/* Base */

body {
    font-family: 'Courier New', monospace;
    display: flex;
}

a {
    text-decoration: none;
    color: black;
}

ul {
    list-style-type: none;
    cursor: pointer;
}

/* Layout */

#container {
    display: flex;
    flex-direction: column;
    margin: 100px min(100px, 10vw);
    flex: 1;
}

#content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.award {
    margin-top: 0;
}

/* Project list */

#project-list {
    margin-bottom: 20px;
}

#project-list li:not(:first-child) {
    padding-top: 4px;
    padding-left: calc(14px + 5ch);
    text-indent: -5ch;
}

.li-category {
    padding-top: 20px;
}

.slant {
    font-style: italic;
}

.date {
    color: lightgray;
}

.note {
    font-style: italic;
    font-size: smaller;
}

.glyph {
    font-size: smaller;
    line-height: 0%;
}

.cancelled {
    text-decoration-line: line-through;
}

.no-select {
    cursor: default;
}

.hover-icon {
    display: none;
}

li:hover .hover-icon,
li:has(a:focus-visible) .hover-icon {
    display: inline;
}

/* Sort toggle (platform / year) */

.visually-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sort-toggle {
    cursor: pointer;
}

.when-year {
    display: none;
}

body:has(#sort-by-year:focus-visible) .sort-toggle {
    text-decoration: underline;
}

body:has(#sort-by-year:checked) {
    .when-platform,
    .hide-by-year,
    #project-list .slant {
        display: none;
    }

    .when-year {
        display: inline;
    }

    #project-list > ul {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
    }

    #project-list .li-category {
        display: contents;
    }

    #project-list li {
        order: calc(-1 * var(--y));
    }
}

/* Mobile */

@media (max-width: 920px) {
    #container {
        margin-top: 40px;
    }

    #content {
        flex-direction: column;
    }

    ul {
        padding-left: 0;
    }

    #project-list li:not(:first-child) {
        padding-left: calc(6px + 5ch);
    }

    body:has(#sort-by-year:checked) #project-list li:not(:first-child) {
        padding-left: 5ch;
    }

    .award {
        margin-top: 40px;
    }
}