body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: var(--text-color);

    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--primary-bg);
    margin: 0; 
    height: 100%; 
    overflow: hidden;
}

img {
    pointer-events: none;
    -webkit-touch-callout: none;
}

.Header {
    display: flex;
    width: 6vw;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    background: var(--header-bg);
    box-shadow: 7px 0px 10px 0px var(--shadow-color);
}

.Top {
    display: flex;
    width: 6vw;
    height: 20vh;
    padding: 20px 0px 700px 0px;

    flex-direction: column;
    align-items: center;
    gap: 100px;

    position: absolute;
}

.Logo {
    width: 4vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.LogoTime{
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.LogoFrame {
    width: 100%;
    height: 100%;

    border-radius: 13px;
    background-color: var(--primary-bg);
    padding: 10px;
}

.LogoFrame > img {
    width: 100%;
    height: 100%;
}

.LogoText {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#TextShadow{
    text-shadow: 4px 4px 0 var(--shadow-color);
}

#BoxShadow{
    box-shadow: 5px 5px 4px 4px var(--shadow-color);
}

.Buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    align-self: stretch;
}

.Buttons > .Button {
    display: flex;
    height: 59px;
    align-items: center;

    border-radius: 5px 0px 0px 5px;
    background: var(--button-bg);
    text-decoration: none;

    box-shadow: 0px 4px 2px 0px var(--shadow-color);
    
    transition: all 0.1s ease-in-out;
    text-decoration: none
}

.Buttons > .Button:hover {
    cursor: pointer;
    padding-right: 10px;
}


.Buttons > .Button > h3 {
    display: flex;
    width: 120px;
    height: 59px;
    flex-direction: column;
    justify-content: center;

    color: var(--text-light);
    text-align: center;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.Account {
    display: flex;
    height: 209px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding-bottom: 2rem;
}

.AccountFrame {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.AccountText {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


#A, #B, #C, #D, #Settings{
    width: 100%;
    height: 100vh;
    background: var(--secondary-bg);
    display: grid;
    gap: 5px;
}

.item {
    margin: 0.5rem 0.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* box-shadow: 4px 4px 10px 0px var(--shadow-color); */
    background: var(--primary-bg);
}

#A{
    grid-template-areas:
    "A D"
    "A B"
    "C B";
    grid-template-rows: 3fr 4fr 1fr;    /* ---- */
    grid-template-columns: 5fr 3fr;     /* |||| */
}

#B{
    grid-template-areas:
        "A B"
        "C B"
        "C D";
    grid-template-rows: 5fr 2fr 2fr;    /* ---- */
    grid-template-columns: 4fr 3fr;     /* |||| */
}

#C{
    grid-template-areas:
        "A B"
        "C B"
        "C D";
    grid-template-rows: 5fr 1fr 2fr;    /* ---- */
    grid-template-columns: 4fr 3fr;     /* |||| */
}

#D{
    grid-template-areas:
        "A B"
        "A D"
        "C D";
    grid-template-rows: 5fr 3fr 2fr;    /* ---- */
    grid-template-columns: 4fr 3fr;     /* |||| */
}

#Settings{
    grid-template-areas:
        "A B"
        "A D"
        "C D";
    grid-template-rows: 2fr 1fr 2fr;    /* ---- */
    grid-template-columns: 4fr 3fr;     /* |||| */
}

@media screen and (min-width: 1600px) {
    :root{
        --HeaderWidth: 10vw;
    }
    .Main {
        width: calc(100% - var(--HeaderWidth));
    }
    .Header, .Top, .Account{
        width: var(--HeaderWidth); 
    }
    .Button, .Button-active{
        width: 8vw;
    }
    .Logo{
        width: 6vw;
    }
    .AccountFrame > img{
        width: 110%;
    }
}
@media screen and (max-width: 1600px) {
    :root{
        --HeaderWidth: 12vw;
    }
    .Main {
        width: calc(100% - var(--HeaderWidth));
    }
    .Header, .Top, .Account{
        width: var(--HeaderWidth); 
    }
    .Button, .Button-active, .Logo{
        width: 8vw;
    }
}
@media screen and (max-width: 1350px) {
    :root{
        --HeaderWidth: 18vw;
    }
    .Main {
        width: calc(100% - var(--HeaderWidth));
    }
    .Header, .Top, .Account{
        width: var(--HeaderWidth); 
    }
    .Button, .Button-active, .Logo{
        width: 14vw;
    }
}