html {
  overflow: hidden;
  background: rgb(0, 0, 0);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
  margin: 0px;
}

.navbar {
  background-color: #00000037;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 103;
  margin-left: 0 !important;
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left; 
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  z-index: 104;
}

.navbar.slideUp{
  opacity: 1; /* Set initial opacity to 1 */
  animation: slideUp 3s forwards; /* Apply slideUp animation */
}

@keyframes slideUp {
  from {
    transform: translateY(100%); /* Start from below */
  }
  to {
    transform: translateY(0); /* Slide up to original position */
  }
}

/* Create a right-aligned (split) link inside the navigation bar */
.navbar a.split {
  float: right;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #dddddd2a;
  color: rgba(255, 255, 255, 0.666);
}

/* Add a green background color to the active link */
.navbar a.active {
  background-color: #000000;
  color: white;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  display: none;
}

.logo-container,
.navbar {
  opacity: 0; /* Initially set opacity to 0 */
}

.logo-container.fade-in {
  animation: fadeIn 5s forwards; /* Apply fadeIn animation */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Start with opacity 0 */
  }
  to {
    opacity: 1; /* Fade in to opacity 1 */
  }
}

.logo-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-container img {
  width: 250px; /* Adjust as per your logo size */
}

body,
head {
  display: block;
  font-size: 52px;
  color: transparent;
}

head::before,
head::after,
body::before,
body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

body::before {
  text-shadow: -0.3901061325em -0.1962183547em 7px rgba(10, 0, 255, 0.9),
    0.1733061851em 2.0149715892em 7px rgba(255, 123, 0, 0.9),
    1.1983516183em 1.4844477807em 7px rgba(255, 177, 0, 0.9),
    2.4077192427em 0.723646839em 7px rgba(0, 109, 255, 0.9),
    1.7132370353em 2.2146983488em 7px rgba(255, 0, 215, 0.9),
    2.3515375083em -0.0470871787em 7px rgba(118, 255, 0, 0.9),
    -0.007256996em 1.4994869544em 7px rgba(255, 0, 180, 0.9),
    2.125220538em 1.4378769312em 7px rgba(0, 137, 255, 0.9),
    2.477215451em -0.3563718624em 7px rgba(0, 26, 255, 0.9),
    0.4562514958em 1.2892327673em 7px rgba(201, 0, 255, 0.9),
    1.270592605em 0.8208857192em 7px rgba(176, 0, 255, 0.9),
    1.3283789669em 0.9988917724em 7px rgba(0, 155, 255, 0.9),
    0.7538059433em 0.6101121823em 7px rgba(0, 255, 58, 0.9),
    -0.1084553732em 0.6716922919em 7px rgba(10, 0, 255, 0.9),
    0.5567766133em 1.2197120406em 7px rgba(255, 108, 0, 0.9),
    -0.3950639252em -0.1753668767em 7px rgba(255, 0, 212, 0.9),
    1.414016268em 2.1596085837em 7px rgba(59, 0, 255, 0.9),
    0.5307253621em 1.2719790176em 7px rgba(0, 255, 237, 0.9),
    0.1641970715em 1.1921021928em 7px rgba(0, 255, 151, 0.9),
    1.859628755em 1.0578399195em 7px rgba(255, 193, 0, 0.9),
    1.5232017154em 2.1009736001em 7px rgba(255, 0, 23, 0.9),
    -0.4067706529em -0.0759896487em 7px rgba(0, 131, 255, 0.9),
    1.435327918em -0.2109558006em 7px rgba(255, 81, 0, 0.9),
    0.7595737558em -0.396951163em 7px rgba(0, 255, 63, 0.9),
    -0.0482800804em 0.4611778865em 7px rgba(255, 119, 0, 0.9),
    -0.2597787376em 1.7925544139em 7px rgba(0, 158, 255, 0.9),
    2.4702194989em 1.2591428691em 7px rgba(248, 0, 255, 0.9),
    2.3421422327em 0.6930895794em 7px rgba(0, 255, 218, 0.9),
    0.5475697296em -0.1620537391em 7px rgba(81, 255, 0, 0.9),
    1.5704403832em 1.1022241709em 7px rgba(255, 81, 0, 0.9),
    1.9294720738em 1.4158998895em 7px rgba(255, 170, 0, 0.9),
    1.9823423951em 0.2259888458em 7px rgba(0, 255, 98, 0.9),
    -0.1395514218em 2.3666758163em 7px rgba(255, 0, 125, 0.9),
    -0.4502793163em 0.5891680846em 7px rgba(255, 148, 0, 0.9),
    -0.306580425em 0.0682750535em 7px rgba(208, 255, 0, 0.9),
    2.0235680943em 2.2092553417em 7px rgba(255, 84, 0, 0.9),
    -0.1892013721em 0.6406796433em 7px rgba(255, 0, 212, 0.9),
    2.4613734208em -0.2289390975em 7px rgba(0, 134, 255, 0.9),
    -0.1845576996em 2.3863424555em 7px rgba(71, 255, 0, 0.9),
    1.2091741025em 0.1384978463em 7px rgba(255, 199, 0, 0.9),
    1.4876823708em 1.3229011565em 7px rgba(255, 139, 0, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}

body::after {
  text-shadow: -0.4068448428em 1.0388817558em 7px rgba(255, 0, 244, 0.9),
    0.9226855669em 1.2742244805em 7px rgba(107, 255, 0, 0.9),
    -0.3526391342em -0.169225218em 7px rgba(0, 87, 255, 0.9),
    2.0898510326em -0.4402041674em 7px rgba(0, 255, 246, 0.9),
    0.6715735541em 0.3840308212em 7px rgba(0, 255, 109, 0.9),
    0.836850299em 1.0137502841em 7px rgba(255, 77, 0, 0.9),
    1.5685014392em 0.4265687288em 7px rgba(249, 255, 0, 0.9),
    1.4644705398em 0.8907968924em 7px rgba(150, 255, 0, 0.9),
    -0.3978724748em 1.8337324686em 7px rgba(255, 0, 126, 0.9),
    -0.2593646441em 1.2529782373em 7px rgba(72, 255, 0, 0.9),
    1.3719355805em -0.3991103646em 7px rgba(255, 0, 95, 0.9),
    0.9114221941em -0.3676868038em 7px rgba(255, 174, 0, 0.9),
    1.8806567899em 1.5926707004em 7px rgba(0, 243, 255, 0.9),
    2.195316376em 0.0209462463em 7px rgba(123, 0, 255, 0.9),
    1.9617629963em 0.0744688607em 7px rgba(0, 255, 177, 0.9),
    0.8043879895em 1.7118159399em 7px rgba(230, 0, 255, 0.9),
    2.0815448862em 2.0941255615em 7px rgba(255, 52, 0, 0.9),
    1.3783286072em 1.794587762em 7px rgba(218, 255, 0, 0.9),
    0.535737754em 1.4550585054em 7px rgba(255, 7, 0, 0.9),
    0.1345605296em 1.1475515232em 7px rgba(255, 0, 44, 0.9),
    2.2323096802em 0.4655323977em 7px rgba(0, 234, 255, 0.9),
    0.972821238em 0.6779702679em 7px rgba(255, 26, 0, 0.9),
    -0.4225551843em 0.4131013068em 7px rgba(255, 0, 249, 0.9),
    1.6298793005em 0.4682800266em 7px rgba(0, 180, 255, 0.9),
    0.5631133978em 2.2854766485em 7px rgba(24, 255, 0, 0.9),
    0.4736926331em 0.5401489808em 7px rgba(189, 255, 0, 0.9),
    -0.0026393135em 0.9849168231em 7px rgba(166, 0, 255, 0.9),
    2.4446525325em -0.132330608em 7px rgba(0, 255, 114, 0.9),
    0.7425626922em -0.3139673283em 7px rgba(0, 255, 228, 0.9),
    1.8444376244em 2.4984594463em 7px rgba(255, 0, 117, 0.9),
    2.1236942284em 1.0590338873em 7px rgba(0, 71, 255, 0.9),
    2.2861353019em 0.2777319644em 7px rgba(255, 223, 0, 0.9),
    1.4114035723em 1.5664461415em 7px rgba(255, 0, 68, 0.9),
    0.2161138568em 2.4954081337em 7px rgba(0, 255, 204, 0.9),
    0.809994782em 0.771193429em 7px rgba(255, 0, 4, 0.9),
    1.2524981593em 0.2910886387em 7px rgba(0, 101, 255, 0.9),
    0.7366266379em 1.906843867em 7px rgba(255, 0, 19, 0.9),
    2.0930688113em 0.9324209778em 7px rgba(255, 180, 0, 0.9),
    1.1492291363em 2.0687273577em 7px rgba(255, 0, 122, 0.9),
    1.3791604874em -0.4137486342em 7px rgba(243, 255, 0, 0.9),
    0.9488292862em -0.0528641578em 7px rgba(228, 0, 255, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}

head::before {
  text-shadow: 1.5897464651em 2.3828344326em 7px rgba(214, 255, 0, 0.9),
    1.8302677888em 1.6759031922em 7px rgba(255, 0, 181, 0.9),
    0.1258621552em 1.4797325676em 7px rgba(255, 201, 0, 0.9),
    1.0252782265em -0.1901434449em 7px rgba(255, 129, 0, 0.9),
    0.921312021em 0.2889911603em 7px rgba(255, 209, 0, 0.9),
    0.3249992689em -0.2993598725em 7px rgba(0, 233, 255, 0.9),
    2.4602705588em 0.6259556253em 7px rgba(255, 78, 0, 0.9),
    1.2401038305em 1.4960088248em 7px rgba(218, 0, 255, 0.9),
    2.1915525807em 0.2107299875em 7px rgba(255, 138, 0, 0.9),
    0.8941519374em 2.1351092472em 7px rgba(255, 54, 0, 0.9),
    2.2692982036em -0.019024206em 7px rgba(0, 79, 255, 0.9),
    1.1657555919em 1.4538672128em 7px rgba(255, 70, 0, 0.9),
    0.991244133em 0.8718644403em 7px rgba(0, 42, 255, 0.9),
    2.0093359956em 2.4598718413em 7px rgba(204, 0, 255, 0.9),
    2.4026464632em -0.4641609595em 7px rgba(255, 0, 4, 0.9),
    1.977531499em 1.9478318647em 7px rgba(255, 5, 0, 0.9),
    1.5135623755em 0.6921574378em 7px rgba(255, 0, 210, 0.9),
    0.5502088826em 1.2911813674em 7px rgba(255, 12, 0, 0.9),
    -0.053436254em 1.5085194923em 7px rgba(255, 0, 129, 0.9),
    0.3174067803em 1.4070277397em 7px rgba(51, 255, 0, 0.9),
    2.2303189839em 1.9647328312em 7px rgba(0, 87, 255, 0.9),
    0.0336191856em 1.4128427766em 7px rgba(72, 255, 0, 0.9),
    0.7562188524em -0.0575610291em 7px rgba(0, 255, 127, 0.9),
    0.4680818735em 1.208708285em 7px rgba(0, 36, 255, 0.9),
    1.7374131245em 0.0794748671em 7px rgba(255, 0, 2, 0.9),
    -0.0396714523em 0.7812346372em 7px rgba(223, 0, 255, 0.9),
    -0.3716213735em 1.0907242038em 7px rgba(26, 255, 0, 0.9),
    -0.0487094124em 1.6209445333em 7px rgba(0, 59, 255, 0.9),
    -0.3110111895em 0.7340839565em 7px rgba(0, 149, 255, 0.9),
    2.3932516772em 2.1213460167em 7px rgba(0, 254, 255, 0.9),
    0.3376860967em 0.3933041852em 7px rgba(93, 0, 255, 0.9),
    0.3841640019em 2.2293880345em 7px rgba(150, 255, 0, 0.9),
    0.7184326767em 0.8104934228em 7px rgba(31, 0, 255, 0.9),
    1.7891924429em 1.1875683023em 7px rgba(54, 0, 255, 0.9),
    1.6541201759em -0.0028893304em 7px rgba(208, 0, 255, 0.9),
    1.9257065632em 1.0146400364em 7px rgba(0, 255, 38, 0.9),
    0.8511122453em -0.4419926982em 7px rgba(255, 0, 18, 0.9),
    0.7190280782em -0.0290252908em 7px rgba(0, 255, 10, 0.9),
    1.769338278em -0.0730807667em 7px rgba(80, 255, 0, 0.9),
    0.2048406746em 0.148648369em 7px rgba(0, 134, 255, 0.9),
    0.426408502em -0.0327624125em 7px rgba(0, 244, 255, 0.9);
  animation-duration: 42s;
  animation-delay: -23s;
}

head::after {
  text-shadow: 0.0003830496em -0.2489659927em 7px rgba(33, 255, 0, 0.9),
    0.6755504296em 1.1717985793em 7px rgba(171, 255, 0, 0.9),
    -0.3809025042em 0.1091700812em 7px rgba(255, 0, 17, 0.9),
    1.4050823772em 1.509052857em 7px rgba(255, 0, 124, 0.9),
    1.2809112702em 1.7343304485em 7px rgba(255, 0, 115, 0.9),
    2.3510142432em 2.4636163312em 7px rgba(11, 0, 255, 0.9),
    1.3046756222em 0.5507161946em 7px rgba(0, 5, 255, 0.9),
    2.242991842em -0.0340193304em 7px rgba(0, 50, 255, 0.9),
    0.5294954136em 1.5853757617em 7px rgba(255, 0, 229, 0.9),
    1.5613859105em -0.0686012546em 7px rgba(0, 159, 255, 0.9),
    1.0827737579em 1.8831265667em 7px rgba(62, 0, 255, 0.9),
    1.8261907299em 0.9933048667em 7px rgba(255, 183, 0, 0.9),
    1.8059521835em -0.1611651985em 7px rgba(249, 255, 0, 0.9),
    0.2163701204em 0.8684385004em 7px rgba(0, 189, 255, 0.9),
    2.3596249984em 0.1765723024em 7px rgba(0, 17, 255, 0.9),
    0.8031383548em 2.3291512339em 7px rgba(236, 255, 0, 0.9),
    -0.4445684514em 0.23403481em 7px rgba(0, 255, 173, 0.9),
    0.4883522141em 1.0843406785em 7px rgba(0, 192, 255, 0.9),
    1.0412547198em 1.9912542813em 7px rgba(0, 199, 255, 0.9),
    -0.0451715655em -0.114877858em 7px rgba(0, 255, 120, 0.9),
    0.7200006717em 0.724993973em 7px rgba(87, 0, 255, 0.9),
    1.5335978935em 2.3554678323em 7px rgba(255, 0, 56, 0.9),
    -0.0289975968em 1.3198789143em 7px rgba(255, 0, 124, 0.9),
    1.161317703em 1.1285918679em 7px rgba(161, 255, 0, 0.9),
    0.085542502em 0.2612975697em 7px rgba(134, 0, 255, 0.9),
    1.700182877em 1.7784481245em 7px rgba(0, 255, 188, 0.9),
    1.0910474748em 0.9578938099em 7px rgba(0, 92, 255, 0.9),
    2.3785639068em 0.0296423191em 7px rgba(0, 255, 29, 0.9),
    -0.4384356332em 1.4846708638em 7px rgba(132, 0, 255, 0.9),
    -0.2831081817em 1.8592131516em 7px rgba(255, 0, 147, 0.9),
    2.0306985294em -0.1312308835em 7px rgba(71, 0, 255, 0.9),
    2.0802566266em 0.8049082839em 7px rgba(0, 255, 50, 0.9),
    -0.3820928732em -0.405766711em 7px rgba(200, 0, 255, 0.9),
    -0.279676614em 0.2516832185em 7px rgba(255, 29, 0, 0.9),
    2.0364143652em 0.4429386437em 7px rgba(0, 181, 255, 0.9),
    -0.1425027512em 0.066114772em 7px rgba(0, 255, 198, 0.9),
    0.6686399506em 0.9659310843em 7px rgba(0, 110, 255, 0.9),
    -0.0201940048em 1.9139468035em 7px rgba(0, 255, 109, 0.9),
    1.789917139em 0.7393986469em 7px rgba(0, 255, 91, 0.9),
    2.4492171877em 0.709169496em 7px rgba(0, 90, 255, 0.9),
    1.4415754132em 1.6766128049em 7px rgba(255, 147, 0, 0.9);
  animation-duration: 41s;
  animation-delay: -19s;
}

@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}