/* ######################################## Variables ########################################*/


:root {
    --nav-btn-scale: 1; /* default size */
}

/* ######################################## General ########################################*/


.background {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(229, 226, 226);
    width: 100vw;
}


.hello_msg {
    text-align: center;
    font-family: "Century Gothic", sans-serif;
    color: #115740;
    font-size: 7vmax;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sub_hello_txt {
    text-align: center;
    font-family: "Century Gothic", sans-serif;
    color: #B9975B;
    font-size: 2vmax;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.floating_buttons {
    position: fixed;
    background: #0b3828 50%;
    top: 0;
    left: 0;
    width: 10vw;
    height: 125vh;
    border-right: #B9975B solid 10px;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.arc_button {
    position: absolute;
    background: #115740;
    color: white;
    border: rgb(222, 222, 222) 0.5vmax solid;
    border-radius: 50%;
    width: 7vmax;
    height: 7vmax;
    font-family: "Century Gothic", sans-serif;
    font-size: 1.5vmax;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
}

.arc_button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.button_1 {
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button_2 {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button_3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button_4 {
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button_5 {
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button_home {
    background: #115740;
    border: #debe6d 0.75vmax solid;
    width: 8vmax;
    height: 8vmax;
    border-radius: 50%;
}



/* ######################################## Desktop ########################################*/


/* Initially hide desktop-specific elements */


/* ######################################## Mobile ########################################*/


/* Initially hide mobile-specific elements */


/* ######################################## Utility ########################################*/


.only_mobile {
    display: none;
}

.only_desktop {
    display: block;
}

/* iphone se 2nd & 3rd gen are 667px */
@media (max-height: 768px) {
    /* Mobile Landscape */

    /* give the page a bottom padding so content doesn't hide behind nav + safe area */
    .background {
        padding-bottom: calc(20vh + env(safe-area-inset-bottom, 0px));
    }

    .button_1 {
        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.3vmax;
    }

    .button_2 {
        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.3vmax;
    }

    .button_3 {
        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.3vmax;
    }

    .button_4 {
        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.3vmax;
    }

    .button_5 {
        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.3vmax;
    }

    .button_home {
        border: #debe6d 0.6vmax solid;
        width: calc(6.5vmax * var(--nav-btn-scale, 1));
        height: calc(6.5vmax * var(--nav-btn-scale, 1));
    }
}


@media (max-width: 768px) {
    /* Mobile Portrait */

    .only_mobile {
        display: block;
    }

    .only_desktop {
        display: none;
    }

    /* leave enough space so content isn't hidden under the fixed nav */
    .background {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

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

    /* bottom nav bar fixed to bottom of viewport */
    .floating_buttons {
        position: fixed;
        left: 0;
        right: 0;

        top: auto;      /* IMPORTANT: override desktop top:0 */
        bottom: 0;

        width: 100vw;
        height: auto;

        background: #0b3828 50%;
        border-right: none;
        border-top: #B9975B solid 10px;
        box-sizing: border-box;

        /* small vertical footprint + safe area */
        padding: 0.5rem 0 calc(env(safe-area-inset-bottom, 0px) + 0.5rem);

        display: flex;
        justify-content: space-evenly;
        align-items: center;

        pointer-events: none;  /* container doesn't block touches */
        z-index: 10;
    }

    /* buttons arranged in a row at the bottom */
    .floating_buttons .arc_button {
        position: relative;
        transform: none;

        width: calc(6vmax * var(--nav-btn-scale, 1));
        height: calc(6vmax * var(--nav-btn-scale, 1));
        font-size: 1.4vmax;

        margin: 0 0.25rem;
        pointer-events: auto;
    }

    .button_home {
        border: #debe6d 0.6vmax solid;
        width: calc(6.5vmax * var(--nav-btn-scale, 1));
        height: calc(6.5vmax * var(--nav-btn-scale, 1));
    }

    .button_1,
    .button_2,
    .button_3,
    .button_4,
    .button_5 {
        top: auto;
        left: auto;
        transform: none;
    }

    .hello_msg {
        font-size: 7vmax;
    }

    .sub_hello_txt {
        font-size: 2vmax;
    }
}