:root {
    --color-100: #1B262C;
    --color-200: #203D4E;
    --color-300: #275877;
    --color-400: #2C6C97;
    --color-500: #3483B8;
    --color-600: #639CB8;
    --color-700: #8CB9D8;
    --color-800: #C1D9EA;
    --color-900: #F7FAFC;

    background-color: var(--color-100);
}

* {
    color: var(--color-900);
    font-family: 'Recursive', 'Courier New', monospace;

    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 3%;
    padding-bottom: 3%;
    font-size: 1.5em;
}

.myself {
    height: 4em;
    border-radius: 2em;
    padding-left: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--color-200);
}

.myself > img {
    height: 3em;
    width: 3em;
    border-radius: 1.5em;
    margin-right: 1em;
}

.myself > p {
    font-size: 2em;
}

.discord-link {
    font-size: 0.75em;
    color: #AAAAAA;
}

.myself .discord-link {
    font-size: 0.5em;
}

.subheader {
    font-size: 1.5em;
    padding-bottom: 0.1em;
    border-bottom: 0.1em solid var(--color-900);
}

.project-table {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.5em;
}

.project, .big-project {
    border-radius: 1em;
    overflow: hidden;
}

.project {
    background-color: var(--color-200);
}

.big-project {
    background-color: var(--color-300);
}

.project-title {
    background-color: var(--color-400);
    height: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 0.25em;
}

.project-title > p {
    font-size: 1.2em;
}

.project-title > img {
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.75em;
    margin-right: 0.5em;
}

.project-desc {
    margin-left: 0.5em;
    font-size: 0.75em;
}