:root{
    --background-color: #3B3B3B;
    --content-background-color: #1D1D1D;
    --header-font-color: #DADADA;
    --content-font-color: #DADADA;
    --scrollbar-track-color: dimgrey;
    --scrollbar-thumb-color: grey;
    --scrollbar-thumb-hover-color: lightgrey;
}

body{
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    padding: 0;
    margin: 0;
    font-family: 'DejaVu Sans Mono', sans-serif;
    font-size: 15px;
}

h1{
    all: unset;
}


@media (min-width: 1100px) {
    html{
        height: 100vh;
        display: flex;
    }

    body{
        height: 100vh;
    }

    header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding-left: 20px;
        gap: 20px;
        color: var(--header-font-color);
        height: min-content;
        font-size: 32px;
        padding-top: 20px;

        & > *{
            margin: 0;
        }
    }

    #logo{
        width: 50px;
        height: 50px;
    }

    #options{
        display: block;
        position: relative;
        font-size: 60px;
        top: -50px;
        height: 0;
        line-height: 10px;
        color: var(--header-font-color);
        background-color: transparent;
        border: none;

        &:hover{
            cursor: pointer;
        }
    }

    #header-text{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        font-weight: bold;

        & > *{
            margin: 0;
        }

        &>:first-child{
            margin-right: 8px;
        }
    }

    #pronouns{
        font-size: 20px;
        padding-right: 20px;
        align-self: start;
    }

    .base-container{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        flex: 1;
        min-height: 0;

    }

    .resume-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--content-background-color);
        border-radius: 45px;
        color: var(--content-font-color);
        height: 98%;
        overflow-y: auto;

        scrollbar-width: auto;
        scrollbar-color: var(--scrollbar-thumb-color) transparent;

        &::-webkit-scrollbar {
            width: 10px;
        }

        &::-webkit-scrollbar-track {
            background-color: var(--scrollbar-track-color);
            border-radius: 10px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb-color);
            border-radius: 10px;
            border: 2px solid var(--scrollbar-track-color);
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar-thumb-hover-color);
        }

        &:nth-child(1){
            width: 25%;
        }
        &:nth-child(2){
            width: 73.5%;
        }

    }
}

@media (max-width: 1099px) {
    header{
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: left;
        padding-left: 20px;
        gap: 20px;
        color: var(--header-font-color);
        height: min-content;
        font-size: 25px;
        padding-top: 20px;

        & > *{
            margin: 0;
        }
    }

    #logo{
        width: 50px;
        height: 50px;
    }

    #options{
        display: block;
        position: relative;
        font-size: 55px;
        top: -20px;
        height: 0;
        line-height: 10px;
        color: var(--header-font-color);
        background-color: transparent;
        border: none;

        &:hover{
            cursor: pointer;
        }
    }

    #header-text{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-weight: bold;

        & > *{
            margin: 0;
        }
    }

    #separation-header-text{
        display: none;
    }

    #pronouns{
        align-self: start;
        font-size: 15px;
        padding-bottom: 10px;
    }

    .base-container{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 100%;
        margin: 20px 0;
        gap: 20px;

    }

    .resume-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--content-background-color);
        border-radius: 45px;
        color: var(--content-font-color);
        width: 90%;
    }
}