.myBoxes {
padding: 0px 10px 10px 20px;
padding: 0px 10px 10px 10px;
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3ZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 75%, rgba(247,247,247,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(75%,rgba(253,253,253,1)), color-stop(100%,rgba(247,247,247,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(253,253,253,1) 75%,rgba(247,247,247,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 );
    -webkit-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
border: 1px #CDCDCD solid;
border-radius: 5px;
}

#nav {
  width: 975px;
  float: left;
  margin: 0 0 3px 0;
  padding: 0;
  list-style: none;
  background-color: #666666;
  border-bottom: 1px solid #666666;
  border-top: 1px solid #666666; }
#nav li {
  float: left; }
#nav li a {
  display: block;
  padding: 8px 19px;
  text-decoration: none;
  font-weight: bold;
  font-size:12px;
  color: #ffffff;
  border-right: 1px solid #666666; }
#nav li a:hover {
  color: #ffffff;
  background-color: #333333; }

#nav1 {
  width: 975px;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ffffff;
  border-top: 1px solid #ffffff; }
#nav1 li {
  float: left; }
#nav1 li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  font-size:70%;
  color: #000000;
  border-right: 1px solid #ffffff; }
#nav1 li a:hover {
  color: #c00;
  background-color: #ffffff; }
   
.myBoxesWhiteBackground {
padding: 10px;
width:450px;
height:200px;
background: rgb(255,255,255);
    -webkit-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 1px 0px rgba(50, 50, 50, 0.5);
border: 1px #CDCDCD solid;
border-radius: 5px;
}

#nav1 {
  border-bottom: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;}

#nav1 li a {      
  border-right: 1px solid #f2f2f2; }

a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:red;}

BODY {font-family:"Arial"; background-color: #f2f2f2; margin:0px;padding:0px;text-align:center;min-width:1046px;}

h1 {font-size: 275%; font-weight: normal;} 
h2 {font-family: 'Arial'; font-size: 175%; font-weight: normal; color: red; margin-left: 50px;}
h3 {font-size: 130%; font-weight: normal; text-align: left; margin-left: 50px;}
           
p{
    font-family: 'Arial';
    font-size: 110%;
    color: black;
    text-align: left;
	display: block;
	margin-left: 100px;
	margin-right: 100px;
}

@media screen and (min-width: 1001px){
  #nav1{
    margin-bottom: 28px;
  }
}

#centerwrapper {text-align:left; width:975px; margin-left:auto; margin-right:auto;}

@media screen and (max-width: 1000px){
  body, #nav, #nav1, #content,iframe,#centerwrapper,.myBoxesGrayBackground,.myBoxesWhiteBackground{
    max-width: 100%;
    width: 100% !important;
    min-width: 100% !important;
  }
  *{
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  p{
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
    display: block;
    float: none;
  }
  img{
    width: 100%;
    height: auto;
  }
  #nav1 li a{
    display: block;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  #nav li{
    text-align: center;
  }
  *{
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .myBoxesGrayBackground, #content{
    margin-top: 10px !important;
    height: auto !important;
  }
  #centerwrapper{
    width: 90% !important;
    min-width: 90% !important;
    margin-left: 3% !important;
  }
  .myBoxesGrayBackground, .myBoxesWhiteBackground{
    padding: 0 2% !important;
    height: auto !important;
  }
  #nav{
    margin-left: 3% !important;
  }
  li{
    list-style-position: inside;
  }
  #content div{
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
  }
  h2{
    margin-bottom: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #nav li, #nav1 li{
    margin-bottom: 10px;
    margin-top: 10px;
  }
  #nav li a, #nav1 li a{
    font-size: 14px;
  }
  #centerwrapper{
    margin: auto !important;
  }
  #nav{
    margin-left: 0 !important;
  }
  .myBoxesGrayBackground, .myBoxesWhiteBackground{
    box-sizing: border-box;
  }
  .myBoxesGrayBackground, .myBoxesWhiteBackground, .myBoxes{
    box-sizing: border-box;
    padding: 10px 15px 15px !important;            
  }
  .myBoxes{
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 40px !important;
  }
  #content li{
    list-style-position: outside;
    margin-left: 25px !important;
  }
}

/* --------------------------------------------
   AURORA HERO - FIXED VERSION
---------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

:root {
  --aurora-bg: #000000;
  --aurora-clr-1: #00c2ff;
  --aurora-clr-2: #33ff8c;
  --aurora-clr-3: #ffc640;
  --aurora-clr-4: #e54cff;
  --aurora-blur: 1rem;
  --aurora-fs: clamp(3rem, 8vw, 7rem);
  --aurora-ls: clamp(-1.75px, -0.25vw, -3.5px);
}

/* Aurora section - FIXED */
.aurora-container {
  position: relative; /* Changed from default */
  min-height: 60vh; /* Increased height even more */
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 40%, #0b0b0b 0%, #000 60%) #000;
  color: #fff;
  font-family: "Inter", "DM Sans", Arial, sans-serif;
  overflow: visible; /* Changed from hidden */
  z-index: 1; /* Ensure it stays visible */
  margin: 20px 0; /* Add some margin */
  border-radius: 10px; /* Add some style */
}

.aurora-content { 
  text-align: center; 
  position: relative;
  z-index: 2;
}

/* anchor + contain the glow to this box */
.aurora-title {
  position: relative;
  overflow: visible; /* Changed from hidden */
  isolation: isolate;
}

.aurora-title h1 {
  font-size: var(--aurora-fs);
  font-weight: 400;
  letter-spacing: var(--aurora-ls);
  margin: 0;
  position: relative;
  z-index: 3; /* Higher z-index for text */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Add text shadow for better visibility */
}

/* layer for blobs */
.aurora-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible; /* Ensure blobs are visible */
}

/* soft, glowing blobs rendered as radial gradients */
.aurora-aurora__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(450px, 60vmin, 800px); /* Made larger - increased from 45vmin to 60vmin */
  height: clamp(450px, 60vmin, 800px); /* Made larger - increased from 45vmin to 60vmin */
  transform: translate(-50%, -50%);
  filter: blur(var(--aurora-blur));
  opacity: 0.9; /* Increased opacity */
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  will-change: transform, border-radius, opacity;
  background: radial-gradient(closest-side, var(--aurora-clr-1) 0%, rgba(0,194,255,0.3) 40%, rgba(0,0,0,0) 70%);
  animation-play-state: running; /* Ensure animations run */
}

/* per-blob colors */
.aurora-aurora__item:nth-of-type(2){
  background: radial-gradient(closest-side, var(--aurora-clr-3) 0%, rgba(255,198,64,0.3) 40%, rgba(0,0,0,0) 70%);
}
.aurora-aurora__item:nth-of-type(3){
  background: radial-gradient(closest-side, var(--aurora-clr-2) 0%, rgba(51,255,140,0.3) 40%, rgba(0,0,0,0) 70%);
}
.aurora-aurora__item:nth-of-type(4){
  background: radial-gradient(closest-side, var(--aurora-clr-4) 0%, rgba(229,76,255,0.3) 40%, rgba(0,0,0,0) 70%);
}

/* motion: transform-only (GPU-friendly, no layout thrash) */
.aurora-aurora__item:nth-of-type(1){
  animation:
    aurora-border 5s ease-in-out infinite alternate, /* Faster - reduced from 8s to 5s */
    float-1 6s ease-in-out infinite alternate; /* Faster - reduced from 10s to 6s */
}
.aurora-aurora__item:nth-of-type(2){
  animation:
    aurora-border 6s ease-in-out infinite alternate, /* Faster - reduced from 10s to 6s */
    float-2 7s ease-in-out infinite alternate; /* Faster - reduced from 12s to 7s */
}
.aurora-aurora__item:nth-of-type(3){
  animation:
    aurora-border 4s ease-in-out infinite alternate, /* Faster - reduced from 6s to 4s */
    float-3 5s ease-in-out infinite alternate; /* Faster - reduced from 9s to 5s */
}
.aurora-aurora__item:nth-of-type(4){
  animation:
    aurora-border 7s ease-in-out infinite alternate, /* Faster - reduced from 12s to 7s */
    float-4 8s ease-in-out infinite alternate; /* Faster - reduced from 14s to 8s */
}

/* gentle shape morph */
@keyframes aurora-border{
  0%   { border-radius:37% 29% 27% 27% / 28% 25% 41% 37%; }
  50%  { border-radius:27% 37% 31% 29% / 41% 31% 29% 33%; }
  100% { border-radius:37% 29% 27% 27% / 28% 25% 41% 37%; }
}

/* drifting around center; they never fully leave the clip */
@keyframes float-1{
  0%   { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
  50%  { transform: translate(-50%, -50%) translate(20%, -15%) rotate(30deg); }
  100% { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
}
@keyframes float-2{
  0%   { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
  50%  { transform: translate(-50%, -50%) translate(-18%, 20%) rotate(-25deg); }
  100% { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
}
@keyframes float-3{
  0%   { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
  50%  { transform: translate(-50%, -50%) translate(15%,  18%) rotate(22deg); }
  100% { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
}
@keyframes float-4{
  0%   { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
  50%  { transform: translate(-50%, -50%) translate(-20%, -12%) rotate(-28deg); }
  100% { transform: translate(-50%, -50%) translate( 0%,   0%) rotate(0deg); }
}

/* --------------------------------------------
   TAG CLOUD (SCOPED)
---------------------------------------------*/
#tag-cloud {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh; /* Reduced from 100vh to 50vh */
  background-image: url(https://1.bp.blogspot.com/-Fo3iRt97ZXY/XvSG4EMwi0I/AAAAAAAAVEo/mrApRTcVVRk1m-fX9K-ffNwRUXlHUocdwCLcBGAsYHQ/s1600/h.jpg);
  background-color: #181828;
  background-size: cover;
  background-position: center;
}

#tag-cloud * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#tag-cloud svg rect {
  fill: transparent;
}

/* --------------------------------------------
   GRADIENT BOX (END SECTION)
---------------------------------------------*/
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

@keyframes spin {
  to { --bg-angle: 360deg; }
}

article {
  animation: spin 2.5s infinite linear;
  background:
    linear-gradient(
      to bottom,
      oklch(0.1 0.2 240 / 0.95),
      oklch(0.1 0.2 240 / 0.95)
    ) padding-box,
    conic-gradient(
      from var(--bg-angle) in oklch longer hue,
      oklch(0.85 0.37 0) 0 0
    ) border-box;

  border: 6px solid transparent;
  border-radius: 1rem;
  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
  color: white;
  padding: 1rem;
  width: min(400px, 90vw);
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

main {
  background:
    radial-gradient(circle, oklch(0.15 0.2 330 / 0), oklch(0.15 0.2 330 / 1)),
    linear-gradient(344deg in oklch,
      oklch(0.3 0.37 310),
      oklch(0.35 0.37 330),
      oklch(0.3 0.37 310));
  display: grid;
  height: 40vh;
  place-items: center;
}

article h1 { line-height: 1.1; margin: 0; }
article p  { margin: 0.75rem 0 0; }

/* FIX 2026-08-02: the aurora hero is display:grid, which will not overlap
   floats - the uncleared float:left nav bars above squeezed it into a 1px
   sliver at the right edge. Drop it below the floats. */
.aurora-container { clear: both; }