@font-face {                  
font-family: 'Gothamono';
src: url(https://humantooth.neocities.org/fonts/Gothamonov0.2-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {
  font-family: "Hollywoo";
  src: url("https://file.garden/acSSy28XdjJpG1oV/Hollywood%20Capital.ttf");
}

            body {
                font-family: Gothamono;
                margin: 0;
                background-size: 65px;
                color: black;
                background-image: url(https://bewilthred.com/images/essentials/galaxybg.jpg);
                background-size: cover;
                       cursor: url("https://bewilthred.com/images/essentials/cursor.png"), auto;
            }

           html, body {margin: 0}
            
            #container {
                max-width: 1000px;
           
                margin: 0 auto;
           
            }
            
        

          


            #container a {
                color: #4c3db2;
                font-weight: bold;
               
            }
            
            a { 
                text-decoration: none; 
                
            }
a:hover {
    text-decoration: underline; 
}

            #header {
                background-size: 100%;
            }

  
            #navbar {
                height: 210px;
            }

          
            #flex {
                display: flex;
            }

         .border { 
            width: 400px; 
            position: relative; 
            background: linear-gradient(180deg,rgba(133, 122, 252, 1) 0%, rgba(79, 67, 204, 1) 100%);
            border: 3px solid #0d0038;
            padding: 3px; 
            flex: 1;
                padding: 10px;
        } 
        
        .inner { 
            background: white; 
            border: 3px solid #0d0038;
            padding: 25px; 
            flex: 1;
                padding: 10px;
        } 

            main {
                flex: 1;
                padding: 20px;
            }



            h1,
            h2,
            h3 {
                font-family: 'Hollywoo';
                color: #4c3db2;
            }

            h1 {
                font-size: 55px;
                
            }

         

.gradient-text {
    background: linear-gradient(180deg,rgba(12, 2, 57, 1) 0%, rgba(76, 61, 178, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
   
}


 .img-floatinganim {
animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 


@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     

            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                

                #navbar ul {
                    flex-wrap: wrap;
                }
                
                row {
                    display: flex;
                     flex-wrap: wrap;
  justify-content: center;
                }
              
              p {
                  font-size: 20px;
            
              }
              
              details {
                font-size: 20px;
              }
             
             
            }
            
               

 /* 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;
        }

     
         /* 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: #0d0038;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: black;
    font-family: 'Gothamono';
    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: #0d0038;
  border-radius: 4px;
}

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

body::-webkit-scrollbar-thumb:hover {
  background: #857afc;
}

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


html {
  scrollbar-width: thin;
  scrollbar-color: #857afc #0d0038;
}
        
        /* Highlight Effect */
        
        ::selection {
background: #857afc;
color: #FFFFFF;
}

 /* Text Styling Ends */
 
 .imghover {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}


.imghover:hover {
 transform: scale(1.1);