:root {
    --header-height: 8vh;
    --menu-width: 64px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-areas: "header header"
                         "menu content";
    grid-template-columns: var(--menu-width) calc(100vw - var(--menu-width));
    grid-template-rows: 1fr 1fr;

    padding: 0;

    background-color: black;

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


#header {
    grid-area: header;

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

    width: 100vw;
    height: var(--header-height);

    padding: 0 48px;

    background-color: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    will-change: backdrop-filter;

    font-family: "Nunito", sans-serif;
}

#logo-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}


#logo-icon {
    width: calc(var(--header-height) * .5);
    height: calc(var(--header-height) * .5);
}

#logo-title {
    color: white;
    text-decoration: none;

    font-family: "Oleo Script Swash Caps", sans-serif;
    font-size: calc(var(--header-height) * .4);
}

#account-name {
    color: white;
    text-decoration: none;

    font-size: calc(var(--header-height) * .25);
}


#menu {
    grid-area: menu;
    
    width: max-content;
    min-width: 250px;
    max-width: 50vw;

    height: calc(100vh - var(--header-height));

    background-color: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    will-change: backdrop-filter;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 16px 24px;
}

#menu #open-menu-button {
    display: none;
}

.menu-section {
    width: max-content;
}

.menu-button {
    color: rgba(255, 255, 255, .6);
    /* background-color: rgba(255, 255, 255, .05); */

    width: 100%;
    height: 40px;

    display: flex;
    align-items: center;

    padding: 8px 16px;
    gap: 12px;

    border-radius: 8px;
    cursor: pointer;

    transition: color .1s;
    text-decoration: none;
}

.menu-button.active {
    color: white;
}

.menu-button:hover {
    color: white;
}

.menu-button-label {
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;

    vertical-align: middle;
}

.menu-button-icon {
    font-size: 24px;
}



.menu-sub-button {
    color: rgba(255, 255, 255, .6);
    /* background-color: rgba(255, 255, 255, .05); */

    width: 100%;
    max-width: var(--menu-width);
    height: 24px;

    display: flex;
    align-items: center;

    padding: 8px 16px;
    gap: 12px;

    border-radius: 8px;
    cursor: pointer;

    transition: color .1s;
    text-decoration: none;
}

.menu-sub-button.active {
    color: white;
}

.menu-sub-button:hover {
    color: white;
}

.menu-sub-button-label {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;

    vertical-align: middle;

    max-width: var(--menu-width);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu-sub-button-icon {
    font-size: 16px!important;
    width: 24px;
    height: 24px;

    display: flex;
    justify-content: center;
    align-items: center;
}


#menu-bottom-section {
    margin-top: auto;
}


#menu.closed {
    min-width: 0;
    width: 72px;
}

#menu.closed .menu-button-label {
    display: none;
}

#menu.closed .menu-button {
    padding: 0;
}

#menu.closed .menu-sub-button {
    display: none;
}

#menu.closed #open-menu-button {
    display: flex;
}

#menu.closed #close-menu-button {
    display: none;
}



#content {
    grid-area: content;

    padding: 3vh 0;
    padding-left: calc(var(--menu-width) * -1);
}

#page-title {
    width: 100%;

    font-family: "Poppins", sans-serif;
    font-size: 5vh;

    color: white;
    text-align: center;
}   




/* Modal */
#modal-container {
    position: absolute;
    top: 0;
    left: 0;    
    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, .5);

    z-index: 9998;

    display: none;
}

#modal-container.active {
    display: block;
}

#modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50vw;
    height: 50vh;

    padding: 18px 18px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    background-color: #222;
    border-radius: 8px;

    overflow: hidden;
    z-index: 9999;
}

#close-modal {
    position: absolute;
    top: 0;
    right: 0;

    width: 48px;
    height: 58px;

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

    color: #ddd;
    font-size: 48px;

    cursor: pointer;

    transition: transform .3s, color .3s;
}

#close-modal:hover {
    transform: scale(1.2);
    color: white;
}

#modal-title {
    width: 100%;
    text-align: center;

    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: rgb(255, 255, 255);
}

#modal-text {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    color: #eee;

    width: 100%;
    padding: 0 26px;
    max-height: calc(50vh - 24px - 12px - 9px);

    overflow-x: auto;
}