/* Resources */
@font-face {
    font-family: 'Hylia Serif Beta';
    src: url('/korok_hunt/fonts/HyliaSerifBeta-Regular.ttf');
}

@font-face {
    font-family: 'Calamity Sans';
    src: url('/korok_hunt/fonts/Calamity-Regular.otf');
}

@font-face {
    font-family: 'Calamity Sans Bold';
    src: url('/korok_hunt/fonts/Calamity-Bold.otf');
}



/* Main Page Styling */

/* Containers */
.top_container {
    display: flex;
    flex-direction: row;
    padding-top: 1%;
}

.logo_container {
    width: 11%;
    align-items: center;
}

.l_container {
    width: 78%;
}

.text_container {
    background-color: rgb(226, 144, 72);
    border-radius: min(4vh, 4.8vw);
    ;
    box-shadow: 0 5px 10px rgb(142, 118, 86);

    width: 82%;
    margin-left: auto;
    margin-right: auto;
}

.img_container {
    background-color: rgb(226, 144, 72);
    border-radius: min(4vh, 4.8vw);
    ;
    box-shadow: 0 5px 10px rgb(142, 118, 86);

    max-height: 50vh;
    max-width: 88vw;
    aspect-ratio: 1.5;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vw;
    padding-bottom: 4vw;
    
}

.img_container img {
    width: 92%;
}

/* Text */
.b_paragraph {
    font-family: Calamity Sans;
    color: rgb(122, 81, 0);
    text-shadow: 0 0 5px rgba(115, 58, 17, .35);

    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 95%;

    font-size: min(3.6vh, 5.76vw);
    line-height: min(4.05vh, 6.48vw);
    line-height: 1.5em;
}

.t_paragraph {
    font-family: Hylia Serif Beta;
    color: rgb(82, 58, 11);
    text-shadow: 0 0 5px rgb(115, 58, 17, .5);

    text-align: center;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 1%;

    font-size: min(7vh, 11.2vw);
    line-height: min(7.875vh, 12.6vw);
}

.bottom_paragraph {
    font-family: Calamity Sans;
    color: rgb(121, 100, 72);
    text-shadow: 0 0 5px rgb(115, 58, 17, .5);

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    font-size: 18pt;
    line-height: 1.25em;
}

/* Images */
.logo_container img {
    width: 100%;
    filter: drop-shadow(0 0 20px rgb(92, 76, 56));
}

.leaderboard_button img {
    width: 40%;
}


/* Phone Display*/
@media all and (max-aspect-ratio:1) {
    .top_container {
        display: flex;
        flex-direction: column;
        padding-top: 1%;
        margin-left: 1%;
        width: 98%;
    }

    .logo_container {
        align-items: center;
        width: 100%;
    }

    .l_container {
        width: 98%;
        aspect-ratio: 1.5;
    }

    .text_container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }

    .b_paragraph {
        width: 94%;
    }

    .logo_container a {
        text-align: center;
        display: block;
        width: fit-content;
        ;
        height: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .logo_container img {
        height: 25vh;
        width: auto;
        max-width: 100%;
    }

    .leaderboard_button img {
        width: 90%;
    }
}

.l_container>.map_frame {
    border: min(1.2vh, 1.44vw) solid rgb(226, 144, 72);
    border-radius: min(4vh, 4.8vw);
    box-shadow: 0 0 20px rgb(142, 118, 86);

    width: 100%;
    aspect-ratio: 1.65;
    overflow: hidden;
}



/* User Info Styling */
.user_display {
    background-color: rgb(151, 107, 62);
    border-left: 10px solid rgb(80, 54, 32);
    border-bottom: 10px solid rgb(80, 54, 32);

    border-bottom-left-radius: 3vw;
    box-shadow: 0 0 10vw black;

    position: fixed;
    top: 0;
    right: 0;

    font-family: Hylia Serif Beta;
    font-size: 3.5em;
    color: goldenrod;
    text-wrap: wrap;
    overflow-wrap: break-word;

    max-width: 35%;
    padding-left: .25em;
    padding-right: .25em;
    padding-bottom: .1em;

    visibility: hidden;
}



/* Popup Styling*/
.align_popup {
    opacity: 0;
    visibility: hidden;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    background-size: contain;
    container-type: size;
}

.show {
    opacity: 1;
    visibility: visible;
}

.debug {
    border: 1px solid red;
    visibility: visible;
}

.popup_button_container {
    margin-top: auto;
    width: 100%;
}

.popup_button_container>.popup_button {
    background-color: #ce7400;
    border-radius: 3vh;
    width: 95%;
    aspect-ratio: 5;

    font-family: Calamity Sans Bold;
    color: #fed900;
    /*font-size: min(6vh, 8.57vw); .7 aspect*/
    font-size: min(5.083vh, 6.1vw);
    white-space: nowrap;

    border: none;
    outline: none;
    outline-width: 0;
}

.info_popup {
    background-color: rgb(151, 107, 62);
    border: min(1.2vh, 1.44vw) solid rgb(80, 54, 32);
    border-radius: 4vmax;
    box-shadow: 0 0 0 1500px rgb(0, 0, 0, .75);

    max-width: 90vw;
    max-height: 80vh;
    aspect-ratio: .7;
    z-index: 3;

    padding-left: 4vw;
    padding-right: 4vw;
    padding-top: 2vh;
    padding-bottom: 3vh;

    display: flex;
    flex-direction: column;
    flex-basis: auto;
    flex: 1;
    overflow-y: visible;

    min-height: 0;
    min-width: 0;
}

.info_popup_title_div {
    display: flex;
    flex-direction: column;

    height: 42%;
    padding-bottom: 1%;
}

.info_popup_title_div>h1,
.h1 {
    font-family: Calamity Sans Bold;
    font-size: min(3.6vh, 6vw);
    line-height: min(3.6vh, 6vw);
    color: rgba(41, 29, 0, 0.785);
    font-weight: normal;

    margin: 0px;
    padding-bottom: 1%;
}

.info_popup_title_div>h1>u {
    font-size: min(4.2vh, 7.0vw);
    line-height: min(4.2vh, 7.0vw);
    color: goldenrod;
    font-weight: normal;
}

.info_popup_title_div>.logo_div {
    height: 75%;
}

.info_popup_title_div>.logo_div>img {
    height: 100%;
    filter: drop-shadow(0 0 20px rgb(92, 76, 56));
}

.info_popup_text {
    font-family: Calamity Sans;
    /*font-size: min(4.25vh, 6.07vw);  0.7 aspect */
    font-size: min(3.2vh, 5.1vw);
    line-height: min(3.6vh, 5.76vw);
    color: whitesmoke;

    padding-top: 3%;
}

.korok_popup_text {
    font-family: Hylia Serif Beta;
    font-size: min(4.7vh, 7.83vw);
    color: whitesmoke;

    text-align: center;
}

.korok_popup_text>.korok_popup_found_text {
    font-family: Hylia Serif Beta;
    font-size: min(4.7vh, 7.83vw);
    line-height: min(5vh, 8.33vw);
    color: whitesmoke;
}

.korok_popup_text>.korok_popup_count_text {
    font-family: Calamity Sans Bold;
    font-size: min(4.23vh, 7.047vw);
    line-height: min(4.935vh, 8.221vw);
    color: whitesmoke;
    padding-top: 5%;
}

.korok_popup_text>.korok_popup_prev_text {
    font-family: Calamity Sans;
    font-size: min(3.384vh, 5.616vw);
    line-height: min(3.384vh, 5.616vw);
    color: rgb(193, 193, 193);
}

.korok_image_div {
    height: 45%;
    padding-bottom: 3%;
}

.korok_image_div>img {
    height: 100%;
    filter: drop-shadow(1px 1.5vh 2vh #222222b1);
}

.upper_right_float_text {
    position: absolute;
    top: 2%;
    right: 4%;
    text-align: right;
}

.unknown_korok_popup_text {
    font-family: Hylia Serif Beta;
    font-size: min(4.7vh, 7.83vw);
    color: whitesmoke;

    text-align: center;
}

.unknown_korok_popup_text>h1 {
    font-family: Calamity Sans Bold;
    font-size: min(4.7vh, 7.83vw);
    line-height: min(4.935vh, 8.221vw);
    color: whitesmoke;
    font-weight: normal;

    margin: 0;
}

.unknown_korok_popup_text>h2 {
    font-family: Calamity Sans;
    font-size: min(3.384vh, 5.616vw);
    line-height: min(3.384vh, 5.616vw);
    color: rgb(193, 193, 193);
    font-weight: normal;

    margin: 0;
}

.unknown_korok_image_div {
    height: 50%;
    padding-bottom: 6%;
}

.unknown_korok_image_div>img {
    height: 100%;
}

.username_popup {
    background-color: rgb(151, 107, 62);
    border: min(1.2vh, 1.44vw) solid rgb(80, 54, 32);
    border-radius: 4vmax;
    box-shadow: 0 0 0 1500px rgb(0, 0, 0, .75);

    max-height: 60vh;
    max-width: 90vw;
    aspect-ratio: 1.2;
    z-index: 2;

    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 2vh;
    padding-bottom: 2vh;

    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: visible;

    min-height: 0;
    min-width: 0;
}

.username_popup label {
    font-family: Calamity Sans Bold;
    font-size: min(4.5vh, 5.94vw);
    line-height: 0;
    color: whitesmoke;
    text-align: center;

    vertical-align: middle;
    padding-right: 1vw;
}

.username_popup h2 {
    font-family: Calamity Sans;
    font-size: min(3.8vh, 4.8vw);
    line-height: min(4.4vh, 5.28vw);
    color: rgb(193, 193, 193);
    font-weight: normal;

    text-align: center;
    margin: 0;
}

.username_popup_input {
    padding-top: 2%;
    padding-bottom: 1.5%;

    white-space: nowrap;
}

.input_popup_error {
    font-family: Calamity Sans;
    font-size: min(4vh, 4.8vw);
    line-height: min(4vh, 4.8vw);
    color: rgb(107, 0, 0);
    text-align: center;

    padding-top: 3%;
    visibility: hidden;
}

.input_text_area {
    font-family: Calamity Sans Bold;
    color: black;

    width: min(42vh, 50.4vw);
    height: min(6vh, 7.2vw);
    font-size: min(4vh, 4.8vw);
    line-height: min(6vh, 7.2vw);
    outline: none;
    border: none;

    text-align: center;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;

    vertical-align: middle;
}

.input_text_area_label {
    color: whitesmoke;
    vertical-align: middle;
}

.username_popup_input_padding {
    padding-top: 4%;
}


/* Leaderboard styling */
.l_container>.leaderboard_frame {
    border: min(1.2vh, 1.44vw) solid rgb(226, 144, 72);
    border-radius: min(4vh, 4.8vw);
    box-shadow: 0 0 20px rgb(142, 118, 86);
    background-color: rgb(181, 115, 57);

    width: 100%;
    height: 75vh;

    overflow-x: hidden;
    overflow-y: scroll;
}

.leaderboard_frame::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.leaderboard_item {
    width: auto;
    display: flex;
    flex-direction: column;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 1vh;
    padding-bottom: 1vh;

    background-color: rgb(211, 154, 61);
    border-radius: 2vh;
}

.leaderboard_item>.leaderboard_rank_item {
    display: flex;
    flex-direction: row;

    font-family: Calamity Sans Bold;
    color: rgb(122, 81, 0);
    text-shadow: 0 0 5px rgba(115, 58, 17, .35);
    font-size: 2vw;
    line-height: 1.25em;
}

.leaderboard_item rank {
    padding-left: 0.5vw;
    font-family: Hylia Serif Beta;
}

.leaderboard_item username {
    padding-left: 1vw;
    padding-right: 2vw;
    text-wrap: wrap;
}

.leaderboard_item count {
    padding-right: 0.5vw;
    margin-left: auto;
    width: auto;
    text-wrap: nowrap;
}

.leaderboard_item>.leaderboard_other_item {
    font-family: Calamity Sans;
    color: rgb(133, 98, 29);
    text-shadow: none;
    font-size: 1.2vw;
    line-height: 1.25em;
}

.leaderboard_item last_active {
    padding-left: 2em;
}


/* Phone Display*/
@media all and (max-aspect-ratio:1) {
    .l_container>.leaderboard_frame {
        height: 60vh;
    }

    .leaderboard_item>.leaderboard_rank_item {
        font-size: 5vw;
    }

    .leaderboard_item>.leaderboard_other_item {
        font-size: 3vw;
    }
}


/* Alignment */
html {
    overflow-x: hidden;

    -webkit-text-size-adjust: 100%;
    /* Prevent font scaling in landscape while allowing user zoom */
}

body {
    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background-color: burlywood;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.v_center {
    margin-top: auto;
    margin-bottom: auto;
}