/* #region COLORS */
:root {
    --color-light: #F1FAEE;
    --color-mid: #73a17d;
    --color-dark: #324E47;
    --color-text: #09110F;
}

.bg1 {
    background-color: var(--color-light);
}

.bg2 {
    background-color: var(--color-mid);
}

.bg3 {
    background-color: var(--color-dark);
}

.bg4 {
    background-color: var(--color-text);
}

.tx1 {
    color: var(--color-light);
}

.tx2 {
    color: var(--color-mid);
}

.tx3 {
    color: var(--color-dark);
}

.tx4 {
    color: var(--color-text);
}

.tx5 {
    color: black;
}

/* #endregion */

/* #region FONT */
.source-code-pro-standard {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

/* #endregion */

/* #region ID BASED */
#body_panel {
    flex-direction: column;
    padding: 3%;
    width: 66%;
}

#body_text_box {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: auto;
}

#body_text_box img {
    width: 100%;
    border-radius: 20px;
}

#col_container {
    display: flex;
    flex-direction: row;
    height: 100%;
}

#footer {
    padding: 3em;
}

#footer i {
    font-size: x-large;
    margin-bottom: 15px;
}

#name_header {
    font-size: xxx-large;
}

#nav_panel {
    border-radius: 0px 75px 0px 0px;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0px;
    width: 34%;
}

#nav_button_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    height: 40%;
}

/* #endregion */

/* #region TAG BASED */
html {
    height: 100%;
}

body {
    margin: 0px;
}

h2 {
    margin: auto;
}

p {
    margin: auto;
    width: 100%;
}

select {
    font-size: x-large;
}

option {
    font-size: medium;
}

/* #endregion */

/* #region CLASS BASED STRUCTURES */
.heading {
    border-radius: 100px;
    height: 6vh;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.nav_button {
    border-radius: 100px;
    border-style: none;
    width: 80%;
    height: 20%;
    text-decoration: none;
}

.nav_button:hover {
    background-color: #09110F;
    color: #F1FAEE;
}

/* #endregion */

/* #region GEN FORMATTING */
/* Alignment */
.center_h {
    justify-content: center;
    justify-items: center;
}

.center_tx {
    text-align: center;
}

.center_all {
    justify-content: center;
    justify-items: center;
    text-align: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
}

/* Visibility */
.hidden {
    display: none;
}

/* #endregion */

/* #region MOBILE */
@media all and (max-width: 600px) {
    #nav_panel {
        border-radius: 0px 0px 40px 40px;
        flex-direction: column;
        height: auto;
        position: relative;
        width: 100%;
    }

    #body_panel {
        flex-direction: column;
        padding: 5%;
        width: 90%;
    }

    #body_text_box {
        border-radius: 20px;
        gap: 20px;
        /* padding: 20px; */
        width: auto;
    }

    #col_container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #name_header {
        font-size: x-large;
        margin: 10px auto auto auto;
    }

    #nav_button_container {
        width: 100%;
        gap: 10px;
        margin: 10px auto 20px auto;
    }

    .nav_button {
        border-radius: 100px;
        width: 80%;
        height: 20%;
    }

    .widescreen_only {
        display: none;
    }
}

/* #endregion */