@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

         /* Text Styling Starts */
         
          /* Background Image */

        html {
            background: url('https://i.pinimg.com/1200x/f2/32/2a/f2322a9b559ca425e574ec213ee4d08b.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        body {
            color: black;
            font-size: 20px;
            font-family: "Jersey 10", sans-serif;
            cursor: url("https://kiunlo.neocities.org/cursors/fullsets/blackhole/pointer.png"), auto;
              /* The below is added to make the site fit at all resolutions, thank you DokoDemo for this tidbit! */
            width: 1000px;
            position: relative;
            display: block;
            margin-left:auto;
            margin-right:auto;
    }

        a {
            text-decoration: none;
        }

 /* Rainbow Hover */

        .rainbow-link:hover {
            transition: 0.3s;
            background: linear-gradient(90deg, #EF919B, #F8B392, #f9e78b, #8bdfa7, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        h1 {
            text-align: center;
            font-size: 55px
        }

        p {
            font-size: 25px;
        }
        
         /* Spoilering Text */
        
    
    .spoiler{
 background: black;
 color: black;
 filter: brightness(0);
}
.spoiler:hover, .spoiler:focus {
 color: inherit;
 background: inherit;
 filter: brightness(1);
}
        
        /* Tooltip */
  
  .ui-tooltip, .arrow:after {
    background: #80d4ff;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: black;
    font-family: "Jersey 10", sans-serif;
    font-size: 20px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

/* End Tooltip */

        
        /* Scrollbar Customization */
body::-webkit-scrollbar {
  width: 15px;  
  height: 15px; 
}

body::-webkit-scrollbar-track {
  background: #fafdff;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb {
  background: #66b0ff;
  border-radius: 4px;
  border: 2px solid #fafdff; 
}

body::-webkit-scrollbar-thumb:hover {
  background: #587cd0;
}

body::-webkit-scrollbar-thumb:active {
  background: #c2e6ff;
}


html {
  scrollbar-width: thin;
  scrollbar-color: #66b0ff #fafdff;
}
        
        /* Highlight Effect */
        
        ::selection {
background: #1a8cff;
color: #FFFFFF;
}

 /* Text Styling Ends */
 
  /* Element Styling Begins */

        #container {
            padding: 5px;
            width: 915px;
            margin-top: 15px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        #header {
            border: 5px white ridge;
            border-bottom: none;
            border-radius: 5px;
        }

        #wrapper {
            border-bottom: 5px white ridge;
            border-right: 5px white ridge;
            border-top: 5px white ridge;
            border-left: 5px white ridge;
            background: white;
            height: flex;
            padding: 10px;
        }


        #header-links {
            height: 23px;
            font-weight: bold;
            font-size: 20px;
            background: linear-gradient(to bottom, #9be5fa 5%, #249ae3);
            color: #133385;
            letter-spacing: 0.5px;
            padding: 5px;
        }


        #header-links:hover {
            background: linear-gradient(to bottom, #edfbff 5%, #80ccff);
        }

        #headerimage {
            border-radius: 5px;
            height: 310px;
            background-image: url('https://cdn.imgchest.com/files/48fb062c380e.jpg');
            object-fit: fill;
            background-position: 90% 80%;
            background-size: 100%;
            box-shadow: 0 0 5px 7px white
        }

        #logo {
            position: absolute;
            background-image: url('https://file.garden/acSSy28XdjJpG1oV/Untitled4013_20260508210517.webp');
            background-size: 100%;
            width: 650px;
            margin-top: 5px;
            margin-left: -10px;
        }

        #showlogo {
            -webkit-background-clip:
                text;
            font-size: 145px;
        }

        #seethelightposition {
            margin-left: 220px;
            margin-top: -50px;
        }

        #seethelighttext {
            text-shadow: 1px 1px 3px black, 0 0 1em white, 0 0 0.2em white;
            color: white;
            font-size: 25px;
            text-align: center;
        }

        #eonheader {
            position: absolute;
            left: 605px;
            transform: rotateY(180deg);
        }

        #navcontent {
            border: 4px white ridge;
            border-bottom: none;
        }

        #navtd {
            width: 250px;
            padding: 0;
            margin: 0;
            border-right: 3px ridge white;
        }
       
 /* Element Styling Ends */