html {
    background-color: #424242;
    margin: 2rem;
}

body {
    background-color: #F9F9F9;
    color: #212121;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    padding: 2rem;
    border-radius: 2rem;
}

@media (orientation: portrait) {
    html {
        background-color: #F9F9F9;
        margin: 0;
    }

    body {
        padding: 0;
    }

    .projects {
        /* How do I avoid !important? (specificity doesn't work) */
        box-shadow: none !important;
        background: none !important;
    }
}

header h1 {
    text-align: center;
    margin-bottom: 0;
}

header nav ul {
    margin-top: 0;
    display: flex;
    gap: 10ch;
    justify-content: center;
}

main {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
    gap: 2rem;
}

@supports (grid-template-rows: masonry) {
    main {
        grid-template-rows: masonry;
    }
}

@supports (display: grid) and (not (grid-template-rows: masonry)) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10ch, auto));
        grid-auto-flow: row dense;
        justify-content: center;
    }

    .projects.projects--game-jams {
        grid-row-end: span 13;
        grid-column-end: span 3;
    }

    .projects.projects--repos {
        grid-row-end: span 4;
        grid-column-end: span 3;
    }

    .projects.projects--blog {
        grid-row-end: span 4;
        grid-column-end: span 3;
    }

    .projects.projects--smaller {
        grid-row-end: span 8;
        grid-column-end: span 3;
    }

    .projects.projects--assorted {
        grid-row-end: span 10;
        grid-column-end: span 3;
    }
}

@supports not (display: grid) {
    main {
        display: inline-block;
    }

    .projects {
        float: left;
        margin: 0 1rem 1rem 0;
    }

    main::after {
        display: block;
        content: "";
        clear: both;
    }
}


.projects {
    padding: 1rem;
    width: auto;
    height: max-content;
    border-radius: 1rem;
}

main:hover .projects:hover,
main:not(:hover) .projects {
    box-shadow:
        2px -2px 2px rgb(250 250 250 / .90),
        inset -2px 2px 2px rgb(222 222 222 / .8),
        -2px 2px 2px rgb(222 222 222 / .5),
        inset 2px -2px 2px rgb(253 253 253 / .96);
    transition: 0.5s;
}

main:hover .projects:not(:hover) {
    transition: 2s;
    background-color: #F0F0F0;
    box-shadow:
        2px -2px 2px rgb(250 250 250 / .2),
        inset -2px 2px 2px rgb(222 222 222 / .6),
        -2px 2px 2px rgb(222 222 222 / .4),
        inset 2px -2px 2px rgb(253 253 253 / .2);
}

.projects h2 {
    margin-top: 0;
}

.projects.projects--game-jams h2 {
    margin-bottom: 1.25rem;
}

.projects.projects--game-jams dt {
    font-weight: bold;
    display: list-item;
    list-style-type: circle;
    margin-left: 1.5em;
}

.projects.projects--game-jams dd+dt {
    margin-top: 2rem;
}

li,
dd a {
    padding: 0.5rem;
    background: linear-gradient(to right, #2196f3 0%, transparent 1%);
    background-size: 100%;
    background-position-x: -20px;
    background-repeat: no-repeat
}

li:hover,
dd a:hover {
    background-position-x: 0px;
    background-size: 10000%;
    transition: 0.2s;
}

li:hover>span {
    transition: 0.2s;
    color: #F9F9F9;
}

a.more {
    float: right;
    text-decoration: none;
}