body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--burp), url();
    background-blend-mode: screen;
    background-size:cover;
    font-family: home;

}


/* From: https://aleclownes.com/2017/02/01/crt-display.html*/

/*.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 999;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt {
  animation: textShadow 1.6s infinite;
}*/

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 999;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
 /* Preloader CSS. Change the background color by swapping out #fff in the background property. You can also find more preloader icons here: https://samherbert.net/svg-loaders/  */
        #preloader {
        align-items: center;
        justify-content: center;
        width: 100%;
        display: flex;
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
        background: #3E0160
          url("https://raw.githubusercontent.com/SamHerbert/SVG-Loaders/refs/heads/master/svg-loaders/spinning-circles.svg")
          no-repeat center;
        z-index: 9999;
    }


#oasisNet {
    background-color: var()); 
    width: 800px; top: 50px; left: 25%;
    min-width: 400PX; min-height: 300PX; height: 600px;

    .content {
      height: 500px;
      overflow-y: scroll; scrollbar-width: none;
    }
}

.outer {
   
    background: var(--glass), var(--burp);
    padding: 15px;

    
    border-radius: 10px;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    position: relative; z-index: 1; max-height: ;
    
   
}

.heading {
    background: var();
    color: #000000;
    width: 100%; height:;
    display: flex; align-content: center;
    
    
}

.heading span {
    font-family: home; font-size: x-large;

    display: flex;
    align-items: center;
}

.extras {
    display: flex;
    position: absolute; right: 1px; bottom: 2px;
    margin-right: 0px;
}

.extras button {
    font-size: 15px; font-family: home;
    background: var(--glass);
    border: 5px double;
}

.extras button:hover {
    color: red;
    background-color: red;
    transition-duration: .3s;
}
        

#innie {
    padding: 0.5vw; margin-top: 5px; height: 92%;
    
    background-color: rgb(255, 255, 255);

    border-radius: 5px; border: 3px inset black;
    border-color: black;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
   p {
  font-size: x-large;
  
}

.content {
    background-color: #e8e8f000; width: auto;
    padding: 5px; border-radius: 15px
  }

}

#more {
  display: flex; flex-direction: column; padding: 10px; text-indent: 5px;
  background-color: rgba(162, 0, 255, 0.404);
  width: 250px; max-height: fit-content;
}

#searchbar {
  width: auto; height: 30px; 
  background-color: #E8E8F0; border-radius: 10px;
}

#searchbar button{
  border: 5px outset;
  height: 25px;
  background: var(--glass);

}
#searchbar button:hover {
    border: 5px inset;
    transition-duration: .3s;
}
.searchbox {
  display: flex; align-items: center;
  padding: 10px; 
}

.searchbox input {
  width: 90%; height: 25px;
}


#iconWin img {
  width: 75px; position: relative; background: var(--burp); border-right: 5px solid black; border-bottom: 5px solid black; border-radius: 10px;

}

#iconWin img:hover {
  background: var(--purpgrade); 
}

/*  The content inside the main window*/

#welcome {
  justify-items: center;
}

/* Movable windows!! from RikOs https://www.youtube.com/watch?v=NpBZtR1nLwA&t=597s */

.pane {
  position: relative;
  width: var(--pane-default-width);

}

.title {
  position: relative;
}

.pane .title {
  cursor: move;
}

.pane .corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  
  background-color: rgba(255, 0, 0, 0);
  cursor: nwse-resize;

  display: none;
}



#music {
  background-color: var(); width: 300px; height: fit-content; position: fixed; right: 400px; bottom: 150px;
}

#music .corner {
  display: none;
}
.jukebox {
    font-family: homevideo;
    font-size: x-large;
      button {
      color: #000;
      border: 1px solid #9b8cdf00;
      background: linear-gradient(to bottom, #c4bac448, 25%, #f1f0f156, 50%, #d3d2d3);
      padding: 5px;
      width: 100%;
      height: auto;
      transition-duration: .3s;

        &:hover {
        color: rgb(255, 255, 255);
        background: linear-gradient(180deg, #452888, #7e2e70 86%, #3a2f70);
        width: 100%;

      }

  }
}





.jbbox button {
    border-style: inset; border-color: #000000;border-width: 5;

    background-color: var(--body); background-image: var(--purpgrade);

    font-family: home; font-size: large; color: #E8E8F0;
    text-shadow: 0 0 20px rgb(255, 255, 255); 

    &:hover {
        color: black; background:#9457ca;
    ;

    }
}



/*Taken from: https://stupied.neocities.org */

.tooltip {
    text-decoration:none;
    position:relative;
      &:hover span {
          display:block;
          position:fixed;
          overflow:hidden;
          z-index: 1000;
          border-radius: 5px;
      }

        span {
          color: #000;
          display:none;
          background: #fff;
          outline: 1px solid #000;
          padding: 0.3rem;
          z-index: 100;
    }
}
 



/* Tooltip ends*/



#navi {
    width: 250;
    position: relative; left: 60px;
}

#navi ul {
    background: var(--purp);
    font-family: home;

}

#StartMenu {
    width: 310px; height: 310px;
    background-color: #0a03167a;
    position: fixed; bottom: 60px;
    border: 3px outset;
    box-shadow:  10px 2px rgba(0, 0, 0, 0.413);
    z-index: 2;

}

/* creds: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

#taskbar {
    width: 100%;height: 60px;
    
    background: var(--purpgrade);

    display: flex;align-items: center;

    position: fixed; bottom: 0;
    
      button  {
      height: 100%;
  }
}



:root {
    --body: white;
    --accent: rgba(202, 39, 202, 0.438);
    --dropshadow: linear-gradient(to bottom, #a312c3, 10%, #ec1bffbb, 80%, #ff4df9);
    --overlay: purple;
    --bbg:linear-gradient(0deg, transparent, 45%, #ff00eaaa, 80%, #a030c3, rgb(67, 9, 66));
    --glass: linear-gradient(135deg, #fff5 70px, transparent 100px), 
    linear-gradient(225deg, #fff5 70px, transparent 100px), 
    linear-gradient(54deg, #0002 0 4%, #6661 6% 6%, #0002 8% 10%, #0002 15% 16%, #aaa1 17% 18%, #0002 23% 24%, #bbb2 25% 26%, #0002 31% 33%, #0002 34% 34.5%, #bbb2 36% 40%, #0002 41% 41.5%, #bbb2 44% 45%, #bbb2 46% 47%, #0002 48% 49%, #0002 50% 50.5%, #0002 56% 56.5%, #bbb2 57% 63%, #0002 67% 69%, #bbb2 69.5% 70%, #0002 73.5% 74%, #bbb2 74.5% 79%, #0002 80% 84%, #aaa2 85% 86%, #0002 87%, #bbb1 90%) left center / 100vw 100vh no-repeat fixed;);
    
    --burp:linear-gradient(0deg, #9381FF, #B8B8FF, #E8E8F0);
    --purp:linear-gradient(0deg, #23013E,#3E0160);
    --purpgrade:linear-gradient(to bottom, #23013E, #3E0160);


}

@font-face {
    font-family: home;
    src: url(/Universal-Assets/Fonts/HomeVideo-BLG6G.ttf);
}

.start button {
    border-style: inset; border-color: #000000;border-width: 5;
    width: 200px;   

    background-color: var(--body); background-image: var(--purpgrade);

    font-family: home; font-size: x-large; color: #E8E8F0;
    text-shadow: 0 0 20px rgb(255, 255, 255); 

      &:hover {
        color: black;
        background: #9457ca;
    }  
}



.peeps {
    height: auto; width: 75%;
    position: relative;
    font-size: x-large;
    text-align: center; 
}

.blink {
      animation: blinker 1.5s linear infinite;
      color: rgb(255, 255, 255);

 }

 @keyframes blinker {
      50% {
      opacity: 0;
    }
  }
            
.time iframe {
    position: fixed;right: 25px; bottom: 5px;
    
    border-left-width: 5px;border-style: double;
    
}

#guestbook {
  width: 500px; height: 600px;
  position: fixed; top: 50px; left: 600px;
  background-color: #141053b0;

  iframe {
    width: 500px; height: 550px;
  }
}



#library .header {
  background: linear-gradient(90deg, white, #9381FF, white);
  text-align: center;
}

#deskIcons {
 position: fixed; top: 2%; left: 2%; gap: 3vh; display: flex; flex-direction: column; 
 /*background: var(--burp); border-right: 5px solid black; border-bottom: 5px solid black; border-radius: 10px;*/

  img {
    width: 75px;
  }
}



#fileexplore {
    display: ; position: fixed;
    background-color: var()); 
    width: 600px; height: 450px; top: 100px; left: 30%;
    min-width: 400PX; min-height: 300PX;

    .content {
      height: 50vh;
    }
}

#filenavi {
  background-color: rgba(255, 157, 157, 0); width: auto; height: auto;
  display: flex; flex-direction: column; padding: 10px; gap: 10px; width: 30%;

  .buttons:hover {
    background-color: #E8E8F0; border: dotted;
  }

  .buttons[aria-selected=true] {
    z-index: 2;
    border-right: 50px solid transparent; border-style: inset;
  }
  
}


.filecatagory {
  display: flex; align-items: center;

  img {
    display: flex;
    width: 40px;
  }

}

#filecontent {
  background-color: rgba(223, 223, 223, 0.277); border-radius: 10px; border-style: inset;
  width: 100%; height: 88%; 
  overflow: scroll; scrollbar-width: none;

  > div {
    display: flex; flex-wrap: wrap; flex-direction: row;

  }
}

.filecontenticons {
  padding: 25px; gap: 10px; width: 100px; align-items: center;
  
  img {
    display: flex; width: 100px;
  }
}

#fileGallery {
  .filecontenticons {
    padding: 5px;
  }
}

#openFile {
    background-color: var()); 
    width: 400px; height: 500px; top: 250px; left: 55%;
    min-width: 400PX; min-height: 300PX;
    position: fixed;

  }

#textFile {
  img {
    width: 100%;
  }

  > div {
    overflow-y: scroll;
    height: 50vh;
    scrollbar-width: none;
  }
}

#profile {
  
  width: 100%;
  display: grid;
  grid:
    "header header header"
    "Icon RightInfo RightInfo"
    "One One One" 
    "Media Media Media";

    gap: 8px;
  
  background-color: #ffffff; height: auto;
    align-items: center;
  
  header {
    grid-area: header;
    display: flex;justify-content: center;
    font-size: xx-large;
    background: #eeaeec;
    background: radial-gradient(circle,rgba(238, 174, 236, 1) 0%, rgba(148, 187, 233, 1) 100%);  
  }

  .profileIcon {
    grid-area: Icon;
    width: 250px; height: 250px;
    position: relative;

    img {
      border-radius: 50px;
    }
  }
}

  .profileRightInfo {
    grid-area: RightInfo;
    display: flex; flex-direction: column;
  }
  
  .onebox {
    grid-area: One;
    display: flex; justify-content: center;
    font-size: larger;
    background: #eeaeec;
    background: radial-gradient(circle,rgba(238, 174, 236, 1) 0%, rgba(148, 187, 233, 1) 100%);

      .buttons {
        
          display: block;
          text-decoration: none;
          text-align: center;
          color: #000;
          border: 1px solid #9b8cdf00;
          background: #eeaeec;
          padding: 5px;
          width: auto;
          height: auto;
          border-radius: 5px;
          transition-duration: .3s;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-right: 5px solid black;
            border-bottom: 5px solid black;


          }

      .buttons:hover {
          color: rgb(255, 255, 255);
          background: linear-gradient(#3E0160);
          border: inset;
      }

      .buttons[aria-selected=true] {
          z-index: 2;
          border-bottom: 6px solid transparent;
          background-color: #ffffff
    }
}    

  .profileContent {
    
        grid-area: Media;
        display: flex; flex-wrap: wrap; flex-direction: row;
        align-items: stretch; // yes, actually stretch the images. it's unnoticable
        margin-bottom: 10px;

        @media (max-width: 100%) {
            flex-wrap: wrap;
        }

        img {
            min-width: 100px;
            max-width: 100px;
            height: auto;
            margin: 3px;
            border-radius: 5px;
            transition: transform 0.3s ease;

            &:hover,
            &:focus {
            transform: scale(1.5);
            z-index: 1;

            @media (max-width: 100%) {
                transform: none;
            }
            }
  }
}