/* When someone enters your game, you only want them to see the opening and the option buttons. The code below will use the display property to hide certain parts of the story. Remove the comments from the code below when you're ready for that step!*/
 .welcome-screen, .story-opening, .white-rabbit-buttons, .option-one-screen, .option-two-screen, .falling-down-hole, .hallway-option-screen,
.table-with-keys,.key-buttons, .key-one-screen, .key-two-screen, .key-one-end, .key-two-end, .final-ending{
   display:none;
}



/* Feel free to change any of the styling below!*/
html,
body {
    margin: 0;
    padding: 0;
}

/* Style the body with a background color or image if desired */
body {
    font-family: 'Source Code Pro', monospace;
    background-color: #ffdada;
    text-align: center;
    padding: 20px;
}

.enter-name {
    background-color: #f9ffda;
    border: 1px solid #f9ffda;
    padding: 20px;
    border-radius: 10px;
    width: 40%;
    font-family: 'Source Code Pro', monospace;

    position: absolute;
    margin: auto;
    padding: 10px;
    top: 40%;
    left: 30%;

}

.welcome-screen {
    background-color: #f9ffda;
    border: 1px solid #f9ffda;
    padding: 20px;
    border-radius: 10px;
    width: 60%;
    font-family: 'Source Code Pro', monospace;

    position: absolute;
    padding: 10px;
    top: 20%;
    left: 20%;
}

.welcome-screen img {
    width: 50%;
}

.welcome-screen h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.welcome-screen .title {
    font-family: Lucida Handwriting, sans-serif;
}

/* Style the title of your story */
.title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Style the story opening container */
.story-opening {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    width: fit-content;

    position: absolute;
    margin: auto;
    padding: 10px;
    top: 10%;
    left: 15%;

    font-family: 'Source Code Pro', monospace;
}

/* Style the story image */
.story-opening img {
    max-width: 70%;
    height: auto;
    margin-bottom: 10px;
}

/* Style the story opening message */
.story-opening h1 {
    font-size: 20px;
    margin-bottom: 20px;
}

.white-rabbit-buttons {
    font-family: 'Source Code Pro', monospace;
    position: absolute;
    top: 90%;
    left: 37%;
}

/* Style the buttons container */
.buttons {
    margin: 20px;
    font-family: 'Source Code Pro', monospace;
}

/* Style the option buttons */
button {
    font-size: 16px;
    padding: 10px 20px;
    margin: 10px;
    background-color: #D7FEFF;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

.option-one-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.option-two-screen {
    position: absolute;
    left: 15%;
    width:70%;
}

.falling-down-hole {
    position: absolute;
    top: 20%;
    left: 15%;
    width: fit-content;
    
}

/*.falling-down-hole img {
    height: 30%;
    
}*/

.hallway-option-screen {
    position: absolute;
    top: 20%;
    left: 15%;
    width: fit-content;
}

.hallway-option-screen img {
    width: 80%;
}

.table-with-keys {
    position: absolute;
    left: 13%;
}

.key-buttons {
    text-align: center;
    position: absolute;
    top: 85%;
    left: 40%;
}

.key-one-screen {
    position: absolute;
    top: 10%;
    left: 15%;
}

.key-one-end {
    position: absolute;
    left: 15%;
}

.key-two-screen {
    position: absolute;
    top: 7%;
    left: 15%;
}

.key-two-end {
    position: absolute;
    left: 15%;
}

.final-ending {
    background-color: #f9ffda;
    border: 1px solid #f9ffda;
    padding: 20px;
    border-radius: 10px;
    width: 40%;
    font-family: 'Source Code Pro', monospace;

    position: absolute;
    padding: 10px;
    top: 20%;
    left: 30%;
}

.final-ending img {
    width: 300px;
}

/* Style the screens for option one and option two */
.story-opening, .option-one-screen, .option-two-screen, .falling-down-hole, .hallway-option-screen,
.table-with-keys, .key-one-screen, .key-two-screen, .key-one-end, .key-two-end {
    background-color: #f9ffda;
    border: 1px solid #f9ffda;
    padding: 20px;
    border-radius: 10px;
    width: 70%;

    margin-bottom: 10px;
}



/* Style the images in the screens */
.option-one-screen img,
.option-two-screen img,
.key-one-end img,
.key-two-end img {
    max-width: 70%;
    height: auto;
    margin-bottom: 10px;
}

.key-one-screen img {
    width: 400px;
}

/* Style the text in the screens */
.option-one-screen h1,
.option-two-screen h1,
.key-one-end h1,
.key-two-end h1 {
    font-size: 20px;
    margin-bottom: 20px;
}