/* INITIAL CODE AND COMMENTS BY TabF5.com. JOSH YOU CAN DELETE THIS LINE IF YOU DON'T WANT TO KEEP THE COMMENTS */

/********** FONT IMPORT *********/

@font-face { /* You know what this does */
  font-family: 'Atkinson';
  src: url(/assets/fonts/Atkinson.ttf);
}
  
@font-face { /* You know what this does */
  font-family: 'Font2';
  src: url(/assets/fonts/Tiny5-LCDRegular.otf);
}

/********** GENERIC STYLING **********/

body {
  font-family: "Atkinson", sans-serif; /* The simply epic font for the whole site */

  display: flex; /* Put everything in the dead center of the webpage by default */
  justify-content: center;
  align-items: center;

  margin: 0; /* No stupid spacing around the page boundaries by default */

  background-color: #54a2ff; /* Ermmmm one blue sky to go please */ 
  color: #ffffff; /* Default text color is white now because I said so */  
  
   cursor: url('/assets/cursors/cursor.svg') 20 7, auto;

}

a { 
  color: inherit; /* This gets rid of links being that ugly blue-purple color */
}

a:hover {
  opacity: 70%; /* Let's just have things go semi-transparent instead when you hover over them, TabF5-style (You can manually override this at any time too) */
  transition: opacity 0.075s;
  cursor: url('/assets/cursors/hover.svg') 20 7, pointer;
}

.dropShadow { 
  filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.5)); /* For everything that needs a drop shadow of course */
}

.dropShadowTimerGuy {
  filter: drop-shadow(0px 3px 0px rgba(57, 76, 63, 0.5)); /* Shadow for the character on the stopwatch timer thing */
}

.buttonDropShadow { 
  filter: drop-shadow(2px 2px .7px rgba(0, 0, 0, .5))
}

.hide {
  opacity: 0; 
  z-index: 10;
  filter: drop-shadow(2px 2px .7px rgba(0, 0, 0, .5))

}

.glow {
 filter: drop-shadow(0px 0px 7px rgba(255, 255, 255, 2));
}

.popup {
  display: none;
  position: fixed;
  z-index: 200;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  }
  
.popupContent {
  background-color: #d1645b;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
  z-index: 100;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
}


 /* Popup container */
.textBubble {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.textBubble .bubbleText {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.textBubble .bubbleText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.textBubble .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 

.flexBox {
  background: #1e1f36;
  border: 20px ridge #54a2ff;
  position: absolute;
  border-radius: 37px;
  display: flex;
  overflow: scroll;
  padding: 15px;
  margin-top: 12px;
  width: 90%;
  height: 55%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 2.5rem;
  top: 1rem;
  color: white;
}

.title {
  border-radius: 25px;
  background-color: #54a2ff;
  box-shadow: inset -12px -12px 16px 0px #2564b0, inset 0px 11px 28px 0px #54a2ff;
  position: absolute;
  display: grid;
  width: 100%;
  height: 50px;
  left: 1px;
  top: 240px;
  justify-content: center;
  align-items: center;

}

.titleAbout {
  border-radius: 25px;
  background-color: #54a2ff;
  box-shadow: inset -12px -12px 16px 0px #2564b0, inset 0px 11px 28px 0px #54a2ff;
  position: absolute;
  display: grid;
  width: 20%;
  height: 50px;
  left: 470px;
  top: 10px;
  justify-content: center;
  align-items: center;

}

.titleButtons {
  border-radius: 25px;
  background-color: #54a2ff;
  box-shadow: inset -12px -12px 16px 0px #2564b0, inset 0px 11px 28px 0px #54a2ff;
  position: absolute;
  display: grid;
  width: 20%;
  height: 50px;
  left: 470px;
  top: 83vh;
  justify-content: center;
  align-items: center;

}

.bioBox {
  background: #1e1f36;
  border: 12px ridge #54a2ff;
  background-image: ;
  position: absolute;
  border-radius: 37px;
  display: flex;
  padding: 15px;
  margin-top: 12px;
  width: 49%;
  height: 68%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 21.5rem;
  top: 1rem;
  color: white;
  }

.bioSection {
position: absolute;
display: flex;
top: 20px;
left: 50px;
}

.aboutSection2{
position: absolute;
display: flex;
top: 550px;
left: 50px;
}

.siteButtons {
  display: flex;
  background-color: transparent;
  align-items: center;
  padding: 1px;
  }

.myButton {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 35vh;
  top: 66vh;
}

p.myButton {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 500px;
  left: 10vh;
  top: 70vh;
}

/********* DESKTOP HOMEPAGE **********/

.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}


.container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    z-index: 0;
    top: 50vh;
    left: 50vh;
}

.loadSound {
    width: 200px;
    height: 150px;
    background-color: blue;
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    /* Optional: for centering text inside the box */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    top: 50vh;
    left: 50vh;
  }


.homePageDesktop {
  background-image: url('/assets/siteBG.png'); /* The background */
  background-repeat: no-repeat; /* We don't want that cheesy repeating pattern */
  background-position: center; /* Obviously we want to center it at all times */
  background-size: auto 100vh; /* `auto` for the width means "just make the width whatever value to keep the image proportional" while `100vh` for height forces the the image to always be the same height as the window. Explanation for `vh` located below */

  height: 100vh; /* Forces our homepage to remain at this size, which we can get away with because our body{} code centers everything by default, even if it clips off the screen */
  width: 233.3333vh; /* `vh` is a unit of measurement based on the Viewport Height of your window where 1vh = 1% the height of the window, so resizing the window height resizes the entire div since we force to stay 100% by saying 100vh, while resizing the width just crops your view instead. Hope that makes sense */

  box-shadow: inset 4vh 0 2vh -2vh #54a2ff, inset -4vh 0 2vh -2vh #54a2ff; /* Epic blue gradient that smoothly covers horizontal edges of your background */

  align-items: start; /* This tells `display: flex;` that any items we put in this div (homePageDesktop) should start at the TOP of the page */

  position: relative; /* This is explained later, when it shows up again in this code */
}

.homePageDesktopHeader {
  display: flex; /* We need to tell CSS that we still want to use flexbox mode for some reason, because setting `display: flex;` on one div doesn't mean everything inside those sub-divs also listen to flexbox rules. Weird */
  width: 100%; /* This header holds the logo and timer in the top left and top right corners, so we need the whole width of the page to insert content that reaches those corners */
  justify-content: space-between;
}

.homePageDHLogo {
  margin: 0.75rem 1.5rem; /* This gives everything on the LEFT side of the header a little spacing instead of touching the edges (If we put this in the section above instead of here, we get ugly scrollbars for some reason) */
  font-size: 0.95rem; /* This sets the font size of the copyright notice in a way that zooming in/out still works (It also resizes better with the window compared to using %) */
  font-weight: bold; /* Obviously we want it bold */
}

.homePageDHLogo img {
  width: 24rem; /* It's better practice to set the Plastigon logo's size here than directly in HTML (also `rem` is a CSS unit that you use for anything you want to respond to people zooming in/out of the page for accessibility reasons, as opposed to `vw` or `vh` locking a size permanently) */
  margin-bottom: -0.3rem; /* Setting a negative margin allows HTML items to bring things closer, in this case we're doing this to bring the copyright text closer to the logo (Also you may have noticed, your go-to unit for everything should always be `rem`) */
}

.homePageDHSocials img {
  width: 1.5rem; /* Self-explanatory */
}

.homePageDHSocials a { 
  text-decoration: none; /* Weird URL lines kept showing up unless I did this */
}

.homePageDHTimer {
  margin: 0.75rem 1.5rem; /* This gives everything on the RIGHT side of the header a little spacing instead of touching the edges (If we put this in a few sections above instead of here, we get ugly scrollbars for some reason) */
  position: relative; /* This enables us to stack images on top of this one via `position: absolute` as seen a few sections below */

  display: flex; /* The magic three lines (using flexbox) that instantly center everything inside the div that we call this on, in this case everything on the timer will get centered on it */
  justify-content: center;
  align-items: center;
  align-self: start;

  flex-direction: column; /* For some reason, flexbox was stacking our text with the monster sideways, so this makes everything stack vertically again (Try switching it to `row`) */

  z-index: 2; /* The gigantic spinning logo gif was blocking the way, so this CSS property makes sure it is in front of everything (because everything else by default is z-index: 0;) */
}

.homePageDHTimerItself {
  width: 9rem; /* It's better practice to set image sizes here in CSS instead of directly in the HTML, as stated earlier (This is for the timer btw) */
}

.homePageDHTimerGuy {
  position: absolute; /* This makes our image float over the other one with `position: relative` enabled*/
  width: 3.5rem; /* This sets the size of the monster */
}

.homePageDHTText {
  position: absolute; /* This is kind of a janky solution, but what I'm doing here is putting all the text in a single div and then floating it over the timer too like an image */
  
  display: flex; /* Magic three lines that immediately center something */
  justify-content: center;
  align-items: center;

  flex-direction: column; /* Line of code that makes our text stack vertically because this defaulted to horizontal again for some reason */

  gap: 4.1rem; /* Now all we do is space out the two lines of text with this flexbox option here that sets spacing between items, and voila! We have a timer (AND header) that actually looks good when you resize the window now */

  font-family: "Font2", sans-serif; /* Here's that font you like */
  font-weight: bold;
  color: #3c4e42; /* And that color too */
  text-shadow: 0 0.1rem #3c4e4266; /* And the shadow (REMEMBER THAT `rem` IS YOUR GO-TO UNIT NOW, NOT PIXELS) */
}

.homePageDesktopSpider {
  position: absolute;
  bottom: 20px; /* Starting from the bottom, we position our spider the same way we position our monster on the timer */
  left: 50px; /* It's okay to use pixels here, rem didn't work */
}

.homePageDesktopSpider img {
  width: 12rem;
}

.homePageDesktopSpider:hover + .hide {
  opacity: 100%;
  position: absolute;
  color: white;
  bottom: 10px;
  left: 50px;
}

.homePageDesktopSign {
  position: absolute;
  bottom: 20px; /* Starting from the bottom, we position our spider the same way we position our monster on the timer */
  right: 50px; /* It's okay to use pixels here, rem didn't work */
  filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.5)); /* For everything that needs a drop shadow of course */

}

.homePageDesktopSign img {
  width: 15rem;

}

.souText{
  position: absolute;
  bottom: 5px; /* Starting from the bottom, we position our spider the same way we position our monster on the timer */
  right: 40px; /* It's okay to use pixels here, rem didn't work */
  opacity: 50%;

}

.homePageDesktopHQ {
  position: absolute;
  bottom: 120px; /* Starting from the bottom, we position our spider the same way we position our monster on the timer */
  left: 400px; /* It's okay to use pixels here, rem didn't work */
}

.homePageDesktopHQ a:hover {
  opacity: 100%; /* Disable the HQ going half-transparent on hover */
}

.homePageDesktopHQ img {
  width: 50rem;
  animation: upDown 1.5s alternate infinite steps(10); /* Makes the HQ go up and down, set the framerate with the steps() number */
}

.homePageDesktopHQ:hover + .hide {
  opacity: 100%;
  position: absolute;
  color: white;
  bottom: 90px;
  left: 740px;
  animation: upDown 1.5s alternate infinite steps(10);
}

.door {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.main {
  z-index:2;
}
.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  filter: brightness(0) invert(1) blur(5px);
  -webkit-filter: brightness(0) invert(1) blur(5px);
  opacity:0;
}
.main:hover ~ .glow {
  opacity:1;
}

.homepageDHDoor {
  height: 58px;
  width: 44px;
  background-color: #d54657;
  position: absolute; 
  animation: upDown 1.5s alternate infinite steps(10);
  top: 343px;
  left: 386px;
  z-index: 25; /* Hey Patrick, you know what's funnier than 24? */
  transition: height 0.5s;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));

}

.homePageDesktopHQ:hover .homepageDHDoor { 
  height: 0;
  }



/********** DESKTOP ABOUT PAGE **********/


.aboutDesktop {
  
  height: 100vh;
  width: 233.3333vh;
  /*box-shadow: inset 4vh 0 2vh -2vh #54a2ff, inset -4vh 0 2vh -2vh #54a2ff;*/
  align-items: start; 
  position: relative; 
  }

.aboutBox {
background: #54a2ff;
  border: 5px solid #f75252;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  width: 92rem;
  height: 49rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: white;
  font-family: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
}

.monitorBox {
  background: #1e1f36;
  border: 20px ridge #54a2ff;
  position: absolute;
  border-radius: 37px;
  display: flex;
  overflow: scroll;
  padding: 5px;
  margin-top: 12px;
  width: 90%;
  height: 55%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  left: 2.5rem;
  top: 1rem;
  color: white;
}

/********** ANIMATION KEYFRAMES *********/

@keyframes upDown {
  to { transform: translatey(20px);} /* Set the floating distance of HQ going up and down here*/
}


/** BLINKING TIMER **/

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  
  0% {
    opacity: 1; /* Visible */
  }
  
  50% {
    opacity: 0; /* Hidden */
  }
  
  100% {
    opacity: 1; /* Visible */
  }
  
}

.pFrameAbout {
  
  background: #1e1f36;
  border: 20px ridge #62bcf5;
  position: absolute;
  border-radius: 12px;
  display: flex;
  width: 200px;
  height: 200px;
  overflow-y: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 0 10px #2e2e2e;
  left: 5.5rem;
  top: 6rem;
  color: white;
  background-image: url("/assets/pfp5.png");
  background-size: 100%;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
  z-index: 100;
  }

  section.flexBox {
    height: 50vh;
    width: 100vh;
    left: 70vh;
    top: 8vh;
    overflow: none;
    display: flex;
  }

  h2.flexbox {
  height: 50vh;
  width: 60vh;
  display: grid;
  overflow: hidden;
  }


/********* MOBILE HOMEPAGE **********/

.homePageMobile { 
  display: none; /* This hides the entire mobile view by default */
  background-color: #749c80;
  justify-content: center;
  align-items: center;
  
} 

.timerGuyMobile {
  width: 12rem;
  height: 12rem; /* This sets the size of the monster */
  filter: drop-shadow(0px 5px 0px rgba(57, 76, 63, 0.5)); /* Shadow for the character on the stopwatch timer thing */
  top: 50vh;
  left: 50vh;
}

.mDropShadowTimerGuy {
  width: 12rem;
  height: 12rem;
  filter: drop-shadow(0px 5px 0px rgba(57, 76, 63, 0.5)); /* Shadow for the character on the stopwatch timer thing */
  top: 50vh;
  left: 50vh;
}

.comingSoon {
  display: flex;
  top: 21rem;
  left: 2.6rem;
  position: absolute;
  font-size: 14px;
}


/********** PAGE SELECTOR STUFF *********/

.pageSelector {
  
    
  position: fixed;  
  line-height: 0;
  margin: auto;
  text-align: center;
  background: #a7b7d1;
  border: 4px solid #4d4c4c;
  border-radius: 8px;
  padding: 15px;
  width: 50%;
  height: 8rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 25%;
  margin-bottom: 0.75rem;
background-image: url("/assets/textures/metal2.jpg");
 background-size: 100%;
 display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: hidden;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  z-index: 100; /* Always keeps selector in front */
}

.elevatorButton {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #000000;
  background-color: #f1f1f1;
  color: #000000;
  padding: 1px;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  line-height: 218%;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  display: block;
  }
  
  .elevatorButton:hover {
    opacity: 1;
    box-shadow: inset 0 0 10px #f81900;
  }
  
  .elevatorButton a:hover {
  opacity: 100%;
}

.pageSelector a {
  display: block;
  width: 82%;
  height: 8.5vh;
  justify-content: center;
  display: grid;
  z-index: 50;
}

.elevatorDoorL {
  height: 50vh;
  width: 35vh;
  background-color: #d54657;
  position: absolute;
  top: 22vh;
  left: 40vh;
  z-index: 10;
  /*transition: width 0.5s;*/
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
}

.elevatorDoorR {
  height: 58px;
  width: 44px;
  background-color: #d54657;
  position: absolute; 
  top: 343px;
  left: 500px;
  z-index: 25;
  float: right;
  transition: left 0.5s, width 0.5s;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
}

.elevatorDoorR:hover { 
  width: 0;
  }

.desktopPage {

  height: 100vh; /* Forces our homepage to remain at this size, which we can get away with because our body{} code centers everything by default, even if it clips off the screen */
  width: 233.3333vh; /* `vh` is a unit of measurement based on the Viewport Height of your window where 1vh = 1% the height of the window, so resizing the window height resizes the entire div since we force to stay 100% by saying 100vh, while resizing the width just crops your view instead. Hope that makes sense */
  
  align-items: start; /* This tells `display: flex;` that any items we put in this div (homePageDesktop) should start at the TOP of the page */

  position: relative; /* This is explained later, when it shows up again in this code */
  background-color: #d1635b;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%23ffb6b0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
 
  overflow: hidden; /* Disable scrolling */
}

.gamesPage {
  height: 100vh; 
  width: 233.3333vh; 
  align-items: start;
  position: relative; 
  background-color: #e3837c;
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23d1635b' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  overflow: hidden; /* Disable scrolling */
}

.galleryPage {
  height: 100vh; 
  width: 233.3333vh; 
  align-items: start;
  position: relative; 
  background-color: #f76f6b;
  background-image: url("/assets/bgimg2.png");
  overflow: hidden; /* Disable scrolling */
}

.aboutPage {
  height: 100vh; 
  width: 233.3333vh; 
  align-items: start;
  position: relative; 
  background-color: #f76f6b;
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
  overflow: hidden; /* Disable scrolling */
}

.aboutPageStatic {
    height: 1000vh; 
  width: 500.3333vh; 
  align-items: start;
  position: relative; 
  background-color: #047fbd;
  background-image: url("https://www.transparenttextures.com/patterns/zig-zag.png");
}

.floor {
  height: 40vh;
  width: 100%;
  background-color: #d54657;
  position: absolute;
  top: 72vh;
  left: 0vh;
  z-index: 9;
  transition: width 0.5s;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
  overflow: hidden;
  background-color: #fa7a19;
  background-image: url("https://www.transparenttextures.com/patterns/dark-wood.png");
  }


.desk {
  position: absolute;
  bottom: 22vh;
  left: 98vh;
  z-index: 10;
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
  image-rendering: pixelated;
  
  }
  
  .desk:hover + .hide {
  opacity: 1;
  position: absolute;
  z-index: 100;
  color: white;
  bottom: 350px;
  left: 1000px;
  animation: upDown 1.5s alternate infinite steps(10);
  
  
}
  
.exitSign {
  position: absolute;
  z-index: 10;
  top: -5.5vh;
  left: -7vh;
  image-rendering: pixelated;
}

.exitSign:hover {
  opacity: .7;
  }
  
.deskGuy {
  position: absolute;
  display: flex;
  bottom: 32vh;
  left: 105vh;
  z-index: 9;
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
  animation: squish 1.5s infinite cubic-bezier(1,0,0,1);
  }
  
  @keyframes squish {
    0%, 100% {
      transform: scale(1, 1); 
    }
  
    50% {
      transform: scale(1.1, 0.8); 
     }
  }
  
  .deskGuy:hover + .hide {
  opacity: 1;
  position: absolute;
  z-index: 100;
  color: white;
  bottom: 600px;
  left: 950px;
  animation: upDown 1.5s alternate infinite steps(10);
  }
  
.pFrame {
  background: #1e1f36;
  border: 9px solid #62bcf5;
  position: absolute;
  border-radius: 8px;
  display: flex;
  width: 12%;
  height: 20%;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 0 10px #2e2e2e;
  left: 50.5rem;
  top: 8rem;
  color: white;
  background-image: url("/assets/sky.png");
  background-size: 100%;
  rotate: 9deg;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5))
  }
  
  .elevatorPanel {
  height: 7vh;
  width: 4vh;
  background-color: #d54657;
  position: fixed;
  top: 41vh;
  left: 79vh;
  z-index: 10;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
  margin: auto;
  text-align: center;
  border: 4px solid #4d4c4c;
  background: #a7b7d1;
    background-image: none;
    background-size: auto;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  background-image: url("/assets/textures/metal2.jpg");
  background-size: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: hidden;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  z-index: 100;

}

.updates {
  background: #1e1f36;
  border: 4px solid #e5b68a;
  position: absolute;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  margin-top: 20px;
  width: 12%;
  height: 200px;
  overflow-y: auto;
  overflow-x:none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 0 10px #2e2e2e;
  left: 81%;
  top: 10vh;
  color: white;
  font-family: "atkinson";
  text-align: left;
  background-color: #cc975c;
  background-image: url("https://www.transparenttextures.com/patterns/binding-dark.png");
  font-size: 12px;
 
  }

.triangleUp
{
  width: 0px;
  height: 0px;

  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #d2d2d2;
  position: absolute;
  left: 53vh;
  top: 15vh;
  box-shadow: inset 0 0 10px #000000;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
  }
  
  .triangleDown {
    width: 0px;
  height: 0px;
  
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #d2d2d2;
  position: absolute;
  left: 58vh;
  top: 15vh;
  box-shadow: inset 0 0 10px #2e2e2e;
  filter: drop-shadow(0px 0px 3.5px rgba(0, 0, 0, .7));
    
    }
    
  .jukebox {
  position: absolute;
  bottom: 22vh;
  left: 4vh;
  z-index: 20;
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
  cursor: url('/assets/cursors/hover.svg') 20 7, pointer;
  image-rendering: pixelated;
  }
  
  .jukebox:hover + .hide {
  opacity: 1;
  position: absolute;
  z-index: 100;
  color: white;
  bottom: 600px;
  left: 125px;
  animation: upDown 1.5s alternate infinite steps(10);
  }


.mouseHome {
  width: 3rem;
  height: 3rem;
  background-color: #000000;
  border-radius: 10rem 10rem 0 0;
  position: absolute;
  left: 156vh;
  top: 66.5vh;
}

.mouseTrap {
  position: absolute;
  left: 152vh;
  top: 73.5vh;
  z-index: 100;
  image-rendering: pixelated;
  }

  
/******* GAME ROOM ***********/

.tvBox {
  display: flex;
  justify-content: center;
  align-items: center;   
  min-height: 90vh; 
  
  }


.tv {
  position: absolute;
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
  image-rendering: pixelated;
  z-index: 10;
  top: 24vh;
  left: 65vh;
  
  }
  
.tv img {
  width: 60vh;
  z-index: 10;
  image-rendering: pixelated;
  }
  
.tv img:hover {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 2));
  }
  
.tv:hover + .hide {
  opacity: 1;
  position: absolute;
  color: white;
  bottom: 680px;
  left: 750px;
  animation: upDown 1.5s alternate infinite steps(10);
  
  
}
  
.tvGIF {
  width: 3.5rem;
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: 200;
  margin-left: -30;
  top: 3.8vh;
  left: 26.5vh;
  position: fixed;
  image-rendering: pixelated;
  }
  
.tvGIF img {
  width: 16vh;
  border-radius: 10px;
  }
  
.gShelf {
   position: absolute;
   margin-left:-20vh;
   image-rendering: pixelated;
  z-index: 10;
  margin-top: -80vh;
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.5));
  }
  
.gShelf img {
  width: 100vh;
  z-index: 10;
  image-rendering: pixelated;
  }
  
.gShelf img:hover {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 2));
  }
  
.gShelf:hover + .hide {
  opacity: 1;
  position: absolute;
  color: white;
  bottom: 800px;
  left: 250px;
  animation: upDown 1.5s alternate infinite steps(10);
}
  
.window {
  background: #ffffff;
    background-image: none;
    background-size: auto;
  border: 9px solid #f0f0f0;
  position: absolute;
  border-radius: 2px;
  display: flex;
  width: 29%;
  height: 39%;
  overflow-y: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 0 10px #2e2e2e;
  left: 65vh;
  top: 14vh;
  color: white;
  background-image: url("/assets/sky.png");
  background-size: 100%;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
  z-index: 1;
  
  }
  

/********** MOBILE VIEW **********/

@media (max-aspect-ratio: 1.0) { /* This block of code ONLY runs when the screen is narrower than a square, since a 1:1 aspect ratio is saying 1 / 1 = 1.0. You can add multiple of these "break points" to have different stuff happen as your screen gets narrower at specific widths */

  .homePageDesktop { 
    display: none; /* This hides the entire desktop view */
  } 

.desktopPage {
    display: none;
  }
  
.gamesPage {
  display: none;
  }
  
  .homePageMobile { 
    display: flex; /* This UNHIDES the entire MOBILE view */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  } 
  
  body {
    background-color: #749c80;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

}

/********** ULTRAWIDE NERD VIEW **********/

@media (min-aspect-ratio: 2.4) { /* Anyone with a screen this wide should go to hell */

  html { 
    font-size: 3vh; /* `rem` works based on the font-size set in html, so by doing this, we can stop the items from crowding each other in super-wide windows and have them locked to a single zoom level instead. Fuck them ultrawiders */
  }

  .homePageDesktopSpider {
    bottom: 2vh; /* We need to switch the units on this for it to keep working too, or the spider starts floating */
    left: 5vh;
  }

  .homePageDesktopHQ {
    bottom: 10vh; /* Same here */
    right: 5vh;
  }

  .homePageDesktopSpinny {
    top: -30vh;
    right: -16vh;
  }
  
  .homepageDHDoor {
  height: 9.4vh;
  width: 7.8vh;
  top: 65.7vh;
  left: 72.5vh;
  }
  
  .homePageDesktopSign {
  bottom: 2vh;
  right: 5vh;
  }

}

/************** OBSOLETE (BUT STUFF I DON'T WANNA LOSE JUST IN CASE **************/

/*

.doorDetect {
  height: 58px;
  width: 42px;
  background-color: #00ff00;
  position: absolute; 
  animation: upDown 1.5s alternate infinite steps(10);
  top: 343px;
  left: 387px;
  z-index: 26;
  opacity: 0
}