@charset "UTF-8";

html {
    --black: #000000;
    --blue: #2222ff;
    --gray: #dddddd;
    --green: #14f578;
    --white: #fdfdfd;
    background-color: var(--white);
}

body {
    background-color: var(--white);
    cursor: default;
    font-family: arial, sans-serif;
    font-size: 19px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
}

a {
    color: var(--blue);
    text-decoration: none;

    &:hover {
        color: var(--green);
    }
}

.link--hidden {
    color: var(--black);

    &:hover {
        color: var(--green);
    }
}

p {
    margin-bottom: 1rem;
    max-width: 58ch;
}

::selection {
    background-color: var(--gray);
}

.nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4rem;
    width: 100%;
}

.nav-link.js-expand-toggle {
    margin-left: 1rem;
}

.table-row {
    border-bottom: solid 1px;
    display: flex;
    padding-bottom: 0.5rem;
}

.table__details {
    border-bottom: 1px solid var(--black);
    flex: 1;

    .table__summary {
        color: var(--blue);
    }

    &[open] {
        .table__summary {
            color: var(--black);
        }
    }

    &:hover {
        .table__summary {
            color: var(--black);
            cursor: pointer;
        }
    }
}

.table-category {
    &:has([data-asc="true"]) {
        cursor: n-resize;
    }
}

.table__summary {
    display: flex;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    width: 100%;
}

.table__summary__project {
    flex-basis: 100%;
}

.table__summary__category {
    display: none;
}

.table__summary__role {
    display: none;
}

.table__summary__date {
    display: none;
}

.sort-arrow {
    font-size: 0.9em;
    padding-left: 2px;
    position: absolute;
}

.update-notice {
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-top: 1.5rem;
}

@media (min-width: 900px) {
    .table__summary__project {
        flex-basis: 45%;
    }

    .table__summary__category {
        display: unset;
        flex-basis: 17.5%;
    }

    .table__summary__role {
        display: unset;
        flex-basis: 17.5%;
    }

    .table__summary__date {
        display: unset;
        flex-basis: 10%;
    }

    .table__summary__contribution {
        display: unset;
        flex-basis: 5%;
    }
}