body {
    font-family: sans-serif;
    background-color: black;
    color: white;
    text-align: center;
    position: relative;
}

.stupidbody {
    background-image: url('resources/rizground.png');
    background-size: 30%;
    color: black;
}

.maintitle {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 400px;
  width: auto;
  z-index: 2;
  
}

.maintitle:hover {
  content: url('resources/crispyjumpscare.png');
}

.crispytitle {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    width: auto;
    filter: grayscale(50%);
    margin-bottom: -110px;
    z-index: 2;
    margin-top: -100px;
}

.television {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    width: auto;
    filter: grayscale(50%);
    margin-bottom: -130px;
    z-index: 2;
}

.enterimage {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    width: auto;
}

.mainpipe {
    display: inline-block;
    margin-left: 10px;
    margin-right: auto;
    height: 300px;
    width: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    filter: brightness(25%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
    z-index: 1;
}

.minipipe {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    filter: brightness(25%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
    z-index: 1;
}

.magicube {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    width: auto;
    position: relative;
    top: -20px;
    margin-bottom: -33px;
    filter: brightness(50%) drop-shadow(10px 10px 10px black) saturate(50%);
    z-index: 3;
}

.lefthover {
    display: inline-block;
    filter: brightness(70%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
    height: 250px;
    width: auto;
    position: relative;
    top: -20px;
    margin-left: -55px;
    z-index: 2; 
  }
  
.lefthover:hover {
    content: url('resources/leftopen.png');
    filter: brightness(70%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
}

.righthover {
    display: inline-block;
    filter: brightness(70%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
    height: 250px;
    width: auto;
    position: relative;
    top: -80px;
    margin-right: -80px;
    z-index: 2; 
  }
  
.righthover:hover {
    content: url('resources/rightopen.png');
    filter: brightness(70%) drop-shadow(10px 10px 10px rgb(0, 0, 0)) saturate(50%);
}

.levelcontainer {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.hoverimage {
    position: absolute;
    top: 0;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 150px;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    
    --rainbow-color: red;
    filter: 
        drop-shadow(0 0 15px var(--rainbow-color));
    animation: rainbowFlash 2s infinite;
}
.hoverimage:hover {
    filter: brightness(5%);
}

@keyframes rainbowFlash { /*chatgpt made this part cuz i dum heheheheh*/
    0% { filter: drop-shadow(0 0 15px red); }
    16% { filter: drop-shadow(0 0 15px orange); }
    32% { filter: drop-shadow(0 0 15px yellow); }
    48% { filter: drop-shadow(0 0 15px green); }
    64% { filter: drop-shadow(0 0 15px blue); }
    80% { filter: drop-shadow(0 0 15px indigo); }
    100% { filter: drop-shadow(0 0 15px violet); }
  }

.righthover:hover ~ .right-hoverimage {
    opacity: 1;
    left: 100px;
    z-index: 4;
}


.lefthover:hover ~ .left-hoverimage {
    opacity: 1;
    right: 130px;
    top: 50px;
    z-index: 4;
}

@keyframes spinny { /* yuh pluh flint and steel */
  0% {
    transform: scale(1) rotate(10deg);
  }
  50% {
    transform: scale(.8) rotate(-5deg);
  }

  100% {
    transform: scale(1) rotate(5deg);
  }
}

  .spinny {
    animation: spinny .5s infinite;
    transform-origin: center;
    animation-timing-function: ease-in-out;
  }

.arrowthing {
  height: 600px;
  width: auto;
  position: absolute;
  left: 50px;
  z-index: 4;
}

.smiley {
  height: 150px;
  width: auto;
  position: absolute;
  right: 150px;
  top: 300px;
}

.lotsofarrows {
  width: 100vw;
  height: auto;
}

.backtoentrance {
  height: 100px;
  width: auto;
  position: absolute;
  left: 50px;
}

#chattable {
  position: absolute;
  left: 50px;
  transform: translateY(-130px);
  width: 250px;
  height: 400px;
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;  
    z-index: 0;     
    
    object-fit: cover;
    opacity: 1;
}

/* MAIN BACKGROUND */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('resources/starbg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    z-index: -2;
    pointer-events: none;
}

/* OVERLAY GIF */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('resources/starry.gif');
    background-size: cover;
    background-repeat: no-repeat; /* or repeat */
    background-position: center;
    z-index: -1;
    pointer-events: none;
}