/* -------- COLOUR SCHEME THINGS -------- */

@media (prefers-color-scheme: light) {
    :root {
        --primary-bg-color: #fff7e9;
        --primary-color: black;

        --bar-color: #c5c5c5;
        --bar-hover-color: #afafaf;
        --accent-color: #a361b9;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg-color: #22201d;
        --primary-color: white;

        --bar-color: #3f3f3f;
        --bar-hover-color: #696969;
        --accent-color: #44284d;
    }
}

/* -------- main css stuff? -------- */

* {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--primary-color);
}

body {
    background-color: var(--primary-bg-color);
    margin: 0 20% 0 20%;
    color: var(--primary-color);
}

/* body > *{
    color: var(--primary-color);
    animation: 500ms both ease-in fadeIn;
} */

h1 {
    color: var(--primary-color);
    animation: 200ms 150ms both ease-in fadeIn;
}

p {
    color: var(--primary-color);
    animation: 200ms 200ms both ease-in fadeIn;
}

p *{
    color: var(--primary-color);
    animation: 200ms 200ms both ease-in fadeIn;
}

h2 {
    color: var(--primary-color);
    margin-bottom: 0;
    animation: 200ms 250ms both ease-in fadeIn;
}

/* -------- navbar -------- */

ul.navbar {
    display: flex;
    list-style-type: none;
    padding: 0;
    justify-content: center;
    align-items: center;
    background-color: var(--bar-color);
}

ul.navbar li {
    display: block;
    color: var(--primary-color);
    padding: 14px 16px;
    text-decoration: none;
}

ul.navbar li:hover {
    background-color: var(--bar-hover-color);
    /* color: var(--primary-color); */
} 

.current {
    background-color: var(--accent-color);
}

/* -------- project widgets -------- */

.projectBox {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 2%;
    grid-template-rows: 50% 50%;
    grid-template-columns: 45% 45%;
}

.project > h3 {
    color: var(--primary-color);
    margin-bottom: 0;
    animation: 200ms 400ms both ease-in fadeIn;
}

.project > a{
    color: var(--primary-color);
    animation: 200ms 450ms both ease-in fadeIn;
}

.project > p {
    color: var(--primary-color);
    animation: 200ms 500ms both ease-in fadeIn;
}

/* -------- footer -------- */

footer {
    background-color: var(--bar-color);
    padding: 0 20% 0 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

footer a {
    display: block;
    color: var(--primary-color);
    padding: 14px 16px;
    text-decoration: none;
}

footer a:hover {
    background-color: var(--bar-hover-color);
}

/* -------- ANIMATIONS --------- */

@keyframes fadeIn {
    from {
        /* background-color: var(--primary-bg-color); */
        opacity: 0;
        color: var(--primary-bg-color);
    }

    to {
        /* background-color: var(--bar-color); */
        opacity: 1;
        color: var(--primary-color);
    }
}