* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100vh;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.hidden {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

/*                        */
/*   Locations (Layers)   */
/*                        */
.location {
    display: flex;
    justify-content: center;
    align-items: center;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.location > *:not(.locationBgImg) {
    position: absolute;
    z-index: 1;
}

.location .locationBgImg {
    position: relative;

    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: -1;
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

/*                             */
/*     Transition Location     */
/*                             */
#transitionLocation {
    font-family: "Roboto Mono", monospace;
    font-size: 3vh;

    position: absolute;
    z-index: 100;
    color: white;
    background-color: black;

    transition: opacity 1s;
}

/* ################################################################################################ */
/*                        */
/*     Attic Location     */
/*                        */
#atticKey {
    cursor: pointer;
    width: calc(100vh*0.15);
    height: calc(100vh*0.15);
}

/* ################################################################################################ */
/*                       */
/*     Dave Location     */
/*                       */
#daveText {
    text-shadow: 2px 2px black;
    font-family: "Roboto Mono", monospace;
    font-size: 3vh;

    text-align: center;

    color: white;

    transform: translateX(0) translateY(calc(100vh*-0.28));
}

#daveCharacter {
    filter: drop-shadow(1vw 1vh 15px rgba(151, 145, 145, 0.5));
    filter: drop-shadow(1vw 1vh 15px rgba(0, 0, 0, 0.5));

    height: 45%;

    width: auto;
    min-width: unset;
    max-width: 100vw;

    opacity: 0;
    animation: fadeIn 4s forwards;

    cursor: not-allowed;
}

#daveTextBox {
    outline: none;
    font-size: calc(100vh * 0.02);

    border: 0 transparent;
    border-bottom: 2px solid gray;
    padding: 0 5px;
    /* border: 0 transparent; */

    opacity: 0;
    visibility: hidden;
    transition: opacity 1s;

    color: white;
    background-color: transparent;

    transform: translateX(0) translateY(calc(100vh*0.27));
}

/* ################################################################################################ */
/*                      */
/*   Crystal Location   */
/*                      */
#crystalText {
    font-family: "Roboto Mono", monospace;
    transition: opacity 5s;
    text-align: center;
}

/* ################################################################################################ */
/*                       */
/*   Basement Location   */
/*                       */
#bulletinBoardContainer {
    width: calc(100vh*0.72);
    height: calc(100vh*0.3);
    font-family: "Rubik", sans-serif;
    font-weight: bold;
    h1 {
        font-weight: bold;
        text-align: center;
        color: orangered;
        text-shadow: 2px 2px black, 2px 0px black, 0px 2px black, -2px 0px black, 0px -2px black;
    }

    p {
        font-weight: 500;
        color: black;
    }
}

#basementBChest {
    width: calc(100vh*0.4);
    height: calc(100vh*0.4);
    transform: translateX(calc(100vh*0.4)) translateY(calc(100vh*0.215));
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

/*             */
/*   Buttons   */
/*             */
.btnArrow, .btnYellowArrow, .btnBlueArrow { 
    cursor: pointer;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: calc(100vh*0.057) calc(100vh*0.057);
}

.btnYellowArrow, .btnBlueArrow { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); }
.btnArrow { background-image: url("/assets/other/arrow.png"); }
.btnYellowArrow { background-image: url("/assets/other/arrow-yellow.png"); }
.btnBlueArrow { background-image: url("/assets/other/arrow-blue.png"); }

/* ################################################################################################ */

.btnUp { transform: translateX(0) translateY(calc(100vh*-0.43)); }
.btnDown { transform: translateX(0) translateY(calc(100vh*0.43)) rotate(180deg); }
.btnLeft { transform: translateX(calc(100vh*-0.625)) translateY(0) rotate(-90deg); }
.btnRight { transform: translateX(calc(100vh*0.625)) translateY(0) rotate(90deg);}

/* ################################################################################################ */

.btnBook {
    transform: translateX(calc(100vh*0.6787)) translateY(calc(100vh*0.044));
    padding: calc(100vh*0.032) calc(100vh*0.016);
}

/* ################################################################################################ */

.btnBulletinLeft {
    cursor: pointer;
    transform: translateX(calc(100vh*-0.325)) translateY(calc(100vh*0.15)) rotate(32deg);
    padding: calc(100vh*0.025) calc(100vh*0.025);
}

.btnBulletinRight {
    cursor: pointer;
    transform: translateX(calc(100vh*0.32)) translateY(calc(100vh*0.14)) rotate(-50deg);
    padding: calc(100vh*0.025) calc(100vh*0.022);
}

/* ################################################################################################ */

.btnDoor {
    cursor: pointer;
    padding: calc(100vh*0.19) calc(100vh*0.12);
}

.btnDoorPosLeft { transform: translateX(calc(100vh*-0.55)) translateY(calc(100vh*0.2)); }
.btnDoorPosRight { transform: translateX(calc(100vh*0.55)) translateY(calc(100vh*0.2)); }

/* ################################################################################################ */

.btnScene31 { transform: translateX(calc(100vh*0.55)) translateY(calc(100vh*0.2)) rotate(90deg); }
.btnScene43 { transform: translateX(calc(100vh*-0.55)) translateY(calc(100vh*0.2)) rotate(-90deg); }
.btnScene52 { transform: translateX(calc(100vh*0.25)) translateY(calc(100vh*0.35)) rotate(-135deg); }
.btnScene70 { transform: translateX(calc(100vh*-0.25)) translateY(calc(100vh*0.35)) rotate(135deg); }

/* Keyframes */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Media Tags */
@media screen and (max-aspect-ratio: 25/18) {
    #atticKey {
        width: calc(100vw*0.11);
        height: calc(100vw*0.11);
    }

    #basementBChest {
        width: calc(100vw*0.29);
        height: calc(100vw*0.29);
        transform: translateX(calc(100vw*0.29)) translateY(calc(100vw*0.155));
    }

    #daveText {
        font-size: 2.1vw;
        transform: translateX(0) translateY(calc(100vw*-0.2));
    }

    #daveCharacter {
        height: auto;
        width: 32%;
        min-height: unset;
        max-height: 100vh;
    }

    #daveTextBox {
        font-size: calc(100vw * 0.0144);
        transform: translateX(0) translateY(calc(100vw*0.195));
    }

    #transitionLocation {
        font-size: 2.3vw;
    }

    #bulletinBoardContainer {
        width: calc(100vw*0.535);
        height: calc(100vw*0.22);
    }

    /*             */
    /*   Buttons   */
    /*             */

    .btnArrow, .btnYellowArrow, .btnBlueArrow { padding: calc(100vw*0.04) calc(100vw*0.04); }

    /* ################################################################################################ */

    .btnUp { transform: translateX(0) translateY(calc(100vw*-0.31)); }
    .btnDown { transform: translateX(0) translateY(calc(100vw*0.31)) rotate(180deg); }
    .btnLeft { transform: translateX(calc(100vw*-0.45)) translateY(0) rotate(-90deg); }
    .btnRight { transform: translateX(calc(100vw*0.45)) translateY(0) rotate(90deg); }

    /* ################################################################################################ */

    .btnBook {
        transform: translateX(calc(100vw*0.488)) translateY(calc(100vw*0.032));
        padding: calc(100vw*0.023) calc(100vw*0.011);
    }

    /* ################################################################################################ */

    .btnBulletinLeft {
        transform: translateX(calc(100vw*-0.233)) translateY(calc(100vw*0.11)) rotate(32deg);
        padding: calc(100vw*0.02) calc(100vw*0.02);
    }

    .btnBulletinRight {
        transform: translateX(calc(100vw*0.23)) translateY(calc(100vw*0.10)) rotate(-48deg);
        padding: calc(100vw*0.02) calc(100vw*0.016);
    }

    /* ################################################################################################ */

    .btnDoor { padding: calc(100vw*0.13) calc(100vw*0.08); }
    .btnDoorPosLeft { transform: translateX(calc(100vw*-0.39)) translateY(calc(100vw*0.13)); }
    .btnDoorPosRight { transform: translateX(calc(100vw*0.39)) translateY(calc(100vw*0.13)); }

    /* ################################################################################################ */

    .btnScene31 { transform: translateX(calc(100vw*0.4)) translateY(calc(100vw*0.145)) rotate(90deg); }
    .btnScene43 { transform: translateX(calc(100vw*-0.4)) translateY(calc(100vw*0.145)) rotate(-90deg); }
    .btnScene52 { transform: translateX(calc(100vw*0.18)) translateY(calc(100vw*0.25)) rotate(-135deg); }
    .btnScene70 { transform: translateX(calc(100vw*-0.18)) translateY(calc(100vw*0.25)) rotate(135deg); }
}