/*
They lay CSS upon us, and Jesus wept
*/

:root {
    /** Dark theme primary colors */
    --color-primary-a0: #afa3d7;
    --color-primary-a10: #b8addc;
    --color-primary-a20: #c1b7e0;
    --color-primary-a30: #cac1e4;
    --color-primary-a40: #d3cbe9;
    --color-primary-a50: #dbd5ed;

    /** Dark theme surface colors */
    --color-surface-a0: #121212;
    --color-surface-a10: #282828;
    --color-surface-a20: #3f3f3f;
    --color-surface-a30: #575757;
    --color-surface-a40: #717171;
    --color-surface-a50: #8b8b8b;

    /** Dark theme mixed surface colors */
    --color-surface-mixed-a0: #201f23;
    --color-surface-mixed-a10: #353438;
    --color-surface-mixed-a20: #4b4a4d;
    --color-surface-mixed-a30: #626164;
    --color-surface-mixed-a40: #7a797c;
    --color-surface-mixed-a50: #939395;
}
/** Examples */
.bg-primary {
    color: var(--color-primary-a50);
    background-color: var(--color-surface-a0);
}

body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background-color: var(--color-surface-a0);
}

body,
input,
button,
select,
option,
textarea,
summary {
    font-family: monospace;
    color: white;
}

body {
    font-size: 100%;
}

input,
button,
select,
option,
textarea,
summary {
    font-size: 100%;
}

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

.left-column {
    background-color: var(--color-surface-a10);
    border-radius: 12px 0 0 12px;
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 6px 0 6px 6px;
    padding: 12px;
}

.avatar-img {
    border-radius: 12px 12px 0 0;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.main-content {
    background-color: var(--color-surface-a20);
    border-radius: 0 12px 12px 0;
    flex: 4;
    flex-direction: column;
    margin: 6px 6px 6px 0;
    padding: 16px;
}

.info-card {
    border-radius: 12px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-primary-a0);
    display: flex;
    text-align: center;
    flex: 2;
    flex-direction: column;
    margin-bottom: 15px;
}

.nametag-socials {
    display: flex;
    flex: 4;
    flex-direction: column;
}

.avatar {
    flex: 1;
}

.info-card > h1 {
    flex: 3;
}

.social-container {
    display: flex;
    justify-content: center;
}

.social-container > a {
    flex-grow: 1;
    text-align: center;
}

.social-img > img {
    scale: 75%;
    padding: 0px;
}

.social-img {
    margin: 6px;
    background-color: transparent;
    transition: 0.2s background-color linear;
    border-radius: 6px;
}
.social-img:hover {
    background-color: var(--color-surface-a20);
}

.navroot-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-button {
    background-color: transparent;
    transition: 0.2s background-color linear;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    flex: 1;
    padding: 10px 6px;
    text-align: left;
    text-decoration: none;
}

.nav-button:hover {
    background-color: var(--color-surface-a20);
}

.nav-active {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-primary-a0);
}

.indent-5 {
    margin-left: 5%;
}

.indent-10 {
    margin-left: 10%;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .left-column {
        border-radius: 12px 12px 0 0;
        flex-direction: column;
        justify-content: left;
        margin: 6px 6px 0px 6px;
        order: 0;
    }

    .main-content {
        border-radius: 0 0 12px 12px;
        margin: 0px 6px 6px 6px;
    }

    .clock-main-content {
        border-radius: 0 0 12px 12px;
        margin: 0px 6px 6px 6px;
    }

    .social-container {
        flex-direction: row;
    }

    .info-card {
        flex-direction: row;
    }

    .avatar-img {
        border-radius: 12px 0 0 12px;
    }
}

@media (max-width: 576px) {
    .nametag-socials {
        flex: 2.5;
    }
}

@media (max-width: 384px) {
    .nametag-socials {
        flex: 1.5;
    }
}