/* Colors */

:root {
    --color-red: #da515b;
    --color-green: #87b963;
    --color-yellow: #ca8a4e;
    --color-blue: #42a0ec;
    --color-purple: #ba5dd6;
    --color-cyan: #43acb9;
    --text-color: #282c37;
    --background-color: white;
    --sidebar-background-color: #eeeeee;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-red: #e06c75;
        --color-green: #98c379;
        --color-yellow: #d19a66;
        --color-blue: #61afef;
        --color-purple: #c678dd;
        --color-cyan: #56b6c2;
        --text-color: white;
        --background-color: #282c37;
        --sidebar-background-color: #2f343e;
    }
}

@media screen {
    #display-only-print {
        display: none;
    }

    @media (max-width: 50em) {
        #title {
            width: 100%;
        }
        #title h1, #title p {
            display: inline-block;
        }
        #title p {
            margin-left: 0.2em;
            margin-bottom: 0;
        }

        #skills {
            margin-top: auto;
        }
    }

    @media (max-width: 50em) and (min-width: 30em) {
        #columns {
            flex-direction: column;
        }

        sidebar {
            display: flex;
            flex-flow: row wrap;
            column-gap: 2em;
        }

        sidebar > section {
            width: calc(50% - 1em);
        }
    }

    @media (max-width: 30em) {
        body {
            padding: 0 0.5em 0 0.5em;
        }

        #columns, sidebar {
            display: block;
        }
    }
}