@import url('https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@0;1&display=swap');

body {
    image-rendering: pixelated;
    /*background-color: #dbdbdb;*/
    /*background-image: url(ourobosTurn.gif);
    background-size: cover;*/
    position: relative;
    /*font-family: "Xanh Mono", monospace;
    font-size: 12px;*/
    width: auto;
    overflow-x: hidden;
    
    border-style:  double none double none;
}

p {
    /*font-family: sans-serif;*/

    
}

.story {
  z-index: 10000000000000;
  position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0px;
        background-color: white;
    border: 1px solid black;
    padding: 2px;
}


.vision {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
details {
    position: absolute;
    top: 20%;
    left: 30%;
    border: 1px solid blue;
}
summary{
    color: #0000ff;
    background-color: white;
    padding: 2px;
}

#background-gif{
    position: fixed;
  
    height: 100vh;
    z-index: -100000000;
    opacity: 0.5;
    align-content: center;
}

#checkpoint {
    position: absolute;
    left: 20px;
    top: 1850px;
    padding-left: 10px;
    padding-top: 2px;
    border: 3px double black;
    z-index: 100000000;
}

#check {
    position: relative;
    background: black;
    height: 2520px;
}

#cherub {
    position: absolute;
    bottom: 0px;
    left: 0;
    background: none;
    z-index: 1000;
    mix-blend-mode: screen;
}

iframe{
    width: 1080px;
    height: 1080px;
}

#music {
    position: absolute;
     background-color: white; 
     padding: 0px;
    right: 100px;
     border: 1px solid black;
}


#gifFrame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -100000000;
    opacity: 0.5;
    /* Optional: Keep size proportional to viewport */
    max-width: 100vw;
    max-height: 100vh;
}

.introtext{
    font-family: sans-serif;
    font-size: 10pt;
    position: absolute;
    font-stretch:ultra-condensed;
    padding: 40vw;
    padding-top: 20px;
}

#hiddenGif {
  position: absolute;
  top: -750px; /* Starts hidden above the screen */
  left: 345px;
  z-index: -900;
}

@keyframes trapdoor {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(800px); /* Moves it down into view */
  }
}

.start-trapdoor-animation {
  animation: trapdoor 4s steps(8) forwards;
}

#enterButton {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#leaveButton {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.GUI{
    /*background-color: red;
    border: 2px solid black;*/
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1000;
}

button {
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#main-wrapper {
    position: relative;
    width: auto;
    margin-left: auto;
    padding 0px;
    align-content: center;
    /* image width (1080px) plus 6px border*/    
}

.dungeon {
    display: block;
    position: relative;
    border-style: none double none double;
    margin: auto;
    width: 1086px;
    overflow: hidden;
    padding: 0px;
    
}

#intro {
    position: relative;
    height: 200vh;
}

form {     
    background-color: white;
    height: auto;
    width: 300px;
    border: solid 1px black;
    padding: 10px;
}

#puzzle {

    position: absolute;
    bottom: 30%;
    left: 400px;
    animation: hoverUpDown 2.5s steps(4) infinite;
}

@keyframes hoverUpDown {
    0% {transform: translateY(0);}
    50% {transform: translateY(-20px);}
    100% {transform: translateY(0);}
}

@keyframes enterZoom {
    0% {transform: scale(1) translate(0px, 100px);}
    33% {transform: scale(2) translate(0px, 150px);}
    66% {transform: scale(3) translate(0px, 180px);}
    100% {transform: scale(4) translate(0px, 200px);}
}

#enter {
}


#text-in-frame {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    margin: auto;
    color: #000000;
    background: none;
    text-align: center;
    z-index: 100; 
    border: none;
}