/* Homepage */
body {
    margin: 0%;
    padding: 0%;
    font-size: 25px;
    font-family: 'Do Hyeon', sans-serif;
}

#menu {
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
}

@media (min-aspect-ratio: 16/9) {
    #menu {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #menu {
        width: auto;
        height: 100%;
    }
}

.music {
    display: none;
}

/* Pages */
#startS,
#houseS,
#tripleAS,
#rideS,
#keepwaitingS,
#keepwaitingBES,
#kitchenS,
#investigateS,
#infridgeS,
#ovenS,
#cleanOvenS,
#redappleS,
#greenappleS,
#pickgreenS,
#ignoreGreenS,
#hideS,
#offradioS,
#pressbtnS,
#bathroomS,
#BadEndingS,
#trytoleavehouseS,
#leaveobjectS,
#keepS,
#putbackS,
#kitchenbeS,
#changefreqS,
#findkeyS,
#goodending1S,
#GoodEndingS,
#GoodEndingS,
#offsinkS,
#lockdoorS,
#hidecupboardS,
#leavecupS,
#basementS,
#leavethroughdoorS,
#bedroomS,
#exitbathS,
#toiletseatS,
#searchcupboardS,
#climbventS,
#bangCupboardS,
#stuckCupboardS,
#breakdowndoorS,
#closeseatS,
#hammerTVS,
#smashtvS,
#lookunderbedS,
#lookrightsideS,
#watchtvS,
#tableDrawerS,
#walkbywallS,
#openleftS,
#openrightS,
#trytoturnTVoffS,
#leftbedS,
#crawlfloorS,
#secretroomS,
#lookunderbedDrawerS,
#warningS{
    background-image: url(./Assets/oldMansion.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#warningS {
    background-image: url(./Assets/Warning.jpg);
}

#lookunderbedDrawerS {
    background-image: url(./Assets/BedDeskDrawer.jpeg);
}

#climbventS {
    background-image: url(./Assets/Vent.jpg);
}

#stuckCupboardS {
    background-image: url(./Assets/CupboardBE.jpg);
}

#houseS {
    background-image: url(./Assets/lobby.png);
}

#tripleAS {
    background-image: url(./Assets/call.png);
}

#rideS,
#keepwaitingS {
    background-image: url(./Assets/hitchRide.png);
}

#keepwaitingBES {
    background-image: url(./Assets/WaitHorror.jpg);
}

#lookunderbedS {
    background-image: url(./Assets/UnderBed.jpg);
}

#lookrightsideS {
    background-image: url(./Assets/KeyUnderBed.jpg);
}

#leftbedS {
    background-image: url(./Assets/LeftBed.jpg);
}

#kitchenS,
#pressbtnS {
    background-image: url(./Assets/kitchen.png);
}

#investigateS {
    background-image: url(./Assets/fridgeOven.png);
}

#redappleS {
    background-image: url(./Assets/RedApple.png);
}

#greenappleS,
#ignoreGreenS {
    background-image: url(./Assets/GreenApple.png);
}

#pickgreenS {
    background-image: url(./Assets/Remote.jpg);
}

#infridgeS,
#putbackS {
    background-image: url(./Assets/OpenFridge.jpg);
}

#ovenS {
    background-image: url(./Assets/OpenOven.jpg);
}

#cleanOvenS,
#offradioS,
#changefreqS {
    background-image: url(./Assets/Radio.jpg);
}

#trytoleavehouseS {
    background-image: url(./Assets/FrontDoorLocked.jpg);
}

#hideS {
    background-image: url(./Assets/closet.png);
}

#openleftS {
    background-image: url(./Assets/DeskDrawerKey.jpg);
}

#openrightS {
    background-image: url(./Assets/DrawerJumpscare.jpg);
}

#bathroomS {
    background-image: url(./Assets/bathroom.png);
}

#BadEndingS {
    background-image: url(./Assets/GameOver.png);
}

#leaveobjectS {
    background-image: url(./Assets/Shadow.jpg);
}

#smashtvS {
    background-image: url(./Assets/BrokenTV.jpg);
}

#tableDrawerS,
#crawlfloorS {
    background-image: url(./Assets/DeskDrawer.jpg);
}

#secretroomS {
    background-image: url(./Assets/secretroom.png);
}

#hammerTVS,
#watchtvS,
#trytoturnTVoffS {
    background-image: url(./Assets/TV.jpg);
}

#walkbywallS {
    background-image: url(./Assets/Wall.jpg);
}

#keepS {
    background-image: url(./Assets/DoorBehindFridge.jpg);
}

#kitchenbeS {
    background-image: url(./Assets/WomanInKit.jpg);
}

#findkeyS {
    background-image: url(./Assets/KeyUnderMat.jpg);
}

#offsinkS {
    background-image: url(./Assets/FootstepBath.jpg);
}

#lockdoorS,
#exitbathS {
    background-image: url(./Assets/LockBathDoor.jpg);
}

#hidecupboardS,
#leavecupS,
#bangCupboardS,
#closeseatS {
    background-image: url(./Assets/CupboardSink.jpg);
}

#basementS {
    background-image: url(./Assets/Basement.jpg);
}

#leavethroughdoorS {
    background-image: url(./Assets/BasementDoor.jpg);
}

#bedroomS {
    background-image: url(./Assets/Bedroom.jpg);
}

#searchcupboardS {
    background-image: url(./Assets/Hammer.jpg);
}

#toiletseatS {
    background-image: url(./Assets/Toilet.jpg);
}

#breakdowndoorS {
    background-image: url(./Assets/HammerDoor.jpg);
}

#goodending1S {
    background-image: url(./Assets/UnlockDoor.jpg);
}

#GoodEndingS {
    background-image: url(./Assets/YouWin.jpg);
}

/* Option and narration designs  */
#paragraphs,
#paragraphsHours {
    background-image: url(./Assets/message_box.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: 1.5% 3% 0% 3%;
    padding: 3%;
    color: white;
    text-align: center;
}

#buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 70vh;
}

.option,
.hiddenOption {
    background-image: url(./Assets/option_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    color: white;
    padding: 1%;
    margin: 0.5%;
    width: 18%;
    border: 5px solid white;
    border-radius: 12px;
    text-align: center;
    font-size: 23px;
    font-family: 'Do Hyeon', sans-serif;
}

.option:focus {
    border-color: yellow;
}

.hiddenOption {
    display: none;
}