body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bbg), url(Profile-page/secondary-pngs/bckgroubf.png);
    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;
}

#welcome {
    background-color: rgba(238, 130, 238, 0.664); 
    width: 800px; height: 600px; top: 50px; left: 500px;

}

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


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

.heading {
    background: var();
    width: 100%; height: 50px;
    display: flex;
    
    
}

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

    display: flex;
    align-items: center;
}

.extras {
    display: flex;
    position: absolute; right: 15px;
    margin-right: 0px;
}

.extras button {
    font-size: 25px; 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;
    
    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;

}

#innie p {
  font-size: x-large;
}

#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;
}


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

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

  overflow: clip;

}

.title {
  position: relative;
}

.pane .title {
  cursor: move;
}

#music {
  background-color: rgba(238, 130, 238, 0.712); width: 300px; height: fit-content; position: fixed; right: 400px; bottom: 150px;
}

.jukebox {
    font-family: homevideo;
    font-size: x-large;
}

.jukebox 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;

}

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

}

.jbbox button {
    border-radius: 10px;border-style: inset; border-color: #620776;border-width: 5;

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

    font-family: home; font-size: large; color: rgb(179, 245, 241);
    text-shadow: 0 0 20px rgb(255, 255, 255); 

}

.jbbox button:hover {
    color: black; background: var(--bbg);

}

#icons {
  max-width: fit-content;
  z-index: inherit;
}

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

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    color: #000;
    display:none;
    background: #fff;
    outline: 1px solid #000;
    padding: 0.3rem;
    z-index: 100;
}

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

/* Tooltip ends*/



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

#navi ul {
    background: linear-gradient(to bottom, #a312c3, 10%, #ec1bffbb, 80%, #ff4df9);
    font-family: home;

}

#bord {
    width: 310px; height: 310px;
    background-color: rgba(238, 130, 238, 0.659);
    position: fixed; bottom: 50px;
    border: 3px outset;
    box-shadow:  10px 2px rgba(0, 0, 0, 0.413);

}

#taskbar {
    width: 100%;height: 60px;
    
    background: linear-gradient(to bottom, #31026be2, 25%, #ff00eaaa, 50%, #a030c3);

    display: flex;align-items: center;

    position: fixed; bottom: 0;
    
    
}

#taskbar 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;);

}

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

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

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

    font-family: home; font-size: x-large; color: rgb(179, 245, 241);
    text-shadow: 0 0 20px rgb(255, 255, 255); 
    
}

.start button:hover {
    color: black;
    background: var(--bbg);
}

.peeps {
    height: auto; width: ;
    position: relative;
}
 .blink {
      animation: blinker 1.5s linear infinite;
      color: red;
      font-family: sans-serif;
 }

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

#drawbox {
  background-color: #620776c4;
  width: 540px; height: 700px; 
  position: fixed; top: 50px; left: 600px;
  overflow: scroll; scrollbar-width: none;

}

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

}

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