@font-face { font-family: castellar-regular; src: url("https://www.dafontfree.net/data/23/c/117539/CASTELAR.ttf") format("woff"), url("https://www.dafontfree.net/data/23/c/117539/CASTELAR.ttf") format("opentype"), url("https://www.dafontfree.net/data/23/c/117539/CASTELAR.ttf") format("truetype"); font-display: swap; }
#particle-canvas { width: 100%; height: 100vh; vertical-align: middle; }
body { margin: 0px;
 padding: 0px;
 text-align: center;
 font-family: "Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
 font-size: 13px; color: rgb(0, 0, 0);
 min-height: 100vh;
 animation: 2.5s ease 0s 1 normal none running fadein;
 background: linear-gradient(0deg, rgb(18, 11, 38) 0%, rgb(47, 17, 96) 100%) 0% 0% / cover no-repeat, ; }
 
body {
  animation: 21s linear 0s infinite normal none running theme;
  &::after, &::before { content: ""; display: block;
  position: fixed; z-index: -1;
  top: 0px;
  width: 100vw;
  height: 100vmax; background: rgba(0, 0, 0, 0.20);
  animation: 90s linear 0s infinite normal none running background; }
  &::after { left: 15vw; }
  &::before { right: 15vw; animation-delay: -30s;
  animation-direction: reverse; }
}
@keyframes theme { 
  0% { background: rgb(116, 195, 144); }
  16% { background: rgb(93, 189, 182); }
  33% { background: rgb(89, 212, 225); }
  50% { background: rgb(81, 188, 232); }
  66% { background: rgb(250, 83, 116); }
  83% { background: rgb(228, 102, 83); }
  100% { background: rgb(116, 195, 144); }
}
@keyframes background { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body { min-height: 100vh;

background-position: calc(50% + 0vmin) calc(50% + 0vmin); background-size: 5vmin 5vmin;  background-color: rgb(6, 82, 221); background-color: rgb(52 0 73); 

  background: #2f1160; /* fallback */
  overflow: visible;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
animation: rotateGradient 20s linear infinite;
  background: linear-gradient(
    var(--angle),
    #120b26 0%,
    #2f1160 100%
);}


@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 90deg;
}

@keyframes rotateGradient {
    from { --angle: 0deg; }
    to   { --angle: 360deg; }
}
.page { margin: 0px auto; position: relative; height: 1200px; width: 1200px; display: grid; gap: 10px; grid-template-columns: 1fr; grid-template-rows: 1fr; justify-content: center; place-items: center; }
@property --gradient-angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
@keyframes spinGradient { 
  0% { --gradient-angle: 0deg; }
  100% { --gradient-angle: 360deg; }
}
.logo { display: flex; height: 110px; width: 110px; border-radius: 20px; background-size: 110px; align-items: center; justify-content: center; transform-origin: center center; top: 14px; left: 146px; position: relative; background-image: url("./IMAGES/Logo1.png"); }
@-webkit-keyframes aitf { 
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.context { width: 100%; position: absolute; top: 50vh; }
.context h1 { text-align: center; color: rgb(255, 255, 255); font-size: 50px; }
.area { background: rgb(78, 84, 200); width: 100%; height: 200px; }
.circles { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; display: grid; gap: 10px; justify-items: center; align-content: start;  }
.circles li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgb(255 180 93 / 67%); animation: 25s linear 0s infinite normal none running animate; bottom: -150px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; background: rgb(255 232 102);}
.circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s;background: rgb(119 33 95); }
.circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; background: rgb(220 13 85); }
.circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; background: rgb(255 0 75 / 70%); }
.circles li:nth-child(10) { left: 85%; width: 130px; height: 130px; animation-delay: 0s; animation-duration: 19s; background: rgb(255 152 152 / 53%)}
@keyframes animate { 
  0% { transform: translateY(0px) rotate(0deg); opacity: 1; border-radius: 50%; }
  100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 85%; }
}