main {
    display: grid;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-columns: auto 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        ".        title    title    title   "
        "headshot text     text     text    "
        "headshot text     text     text    "
        "email    gap1     gap1     gap1    "
        "links    cards1   cards1   cards1  "
        ".        gap2     gap2     gap2    "
        ".        cards2   cards2   cards2  ";

    /* Align items to top left */
    place-content: start;
}

#headshot {
    box-sizing: border-box;
    grid-area: headshot;
    justify-self: end;
    position: relative;
    top: 0.25em;
}

#title {
    grid-area: title;
}

#research_description {
    grid-area: text;
}

#links {
    grid-area: links;
    justify-self: end;
    width: 150px;
}

#email {
    max-width: 150px;
    grid-area: email;
    text-align: justify;
    font-size: 10pt;
    line-height: 10pt;
    font-family: monospace;
}

@media only screen and (max-width: 670px) {
    main {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        ".        title    title   "
        "headshot text     text    "
        "email    text     text    "
        "links    links    links   "
        "gap1     gap1     gap1    "
        "cards1   cards1   cards1  "
        "gap2     gap2     gap2    "
        "cards2   cards2   cards2  ";
    }

    #links {
        width: 100%;
    }

    #headshot {
        width: 100%;
    }
}

@media only screen and (max-width: 450px) {
    main {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "title    title  "
        "headshot email  "
        "text     text   "
        "links    links  "
        "gap1     gap1   "
        "cards1   cards1 "
        "gap2     gap2   "
        "cards2   cards2 ";
    }

    #headshot {
        width: 100%;
    }

    #links {
        justify-self: start;
        text-align: left;
    }
}

.cards {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    position: relative;
}

.tape-title {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(1.5em);
    z-index: 100;
    display: flex;
    flex-direction: row;
    transform: translate(10px, -25px) rotate(5deg);
    align-items: stretch;
}

.tape-middle {
    padding-left: 4px;
    padding-right: 4px;
    border-top: 1px solid orange;
    border-bottom: 1px solid orange;
    backdrop-filter: blur(1px);
    box-sizing: border-box;
}

.tape-end {
    border: none;
    width: 8px;
    mask-image: url("../images/icons/tape-end-mask.svg");
    mask-size: auto 100%;
    mask-repeat: no-repeat;
    background-image: url("../images/icons/tape-end.svg");
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    backdrop-filter: blur(1px);
}

.tape-right-end {
    transform: scaleX(-1);
}

.tags-key {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
}

.tags-key-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tags-key-row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color-light);
    cursor: pointer;
}

.tags-key-row.deselected {
    opacity: 0.5;
}

@media (prefers-color-scheme: dark) {
    .tags-key-row {
        border-bottom: 1px solid var(--border-color-dark);
    }
}

.tag-label {
    font-size: 10pt;
    height: 10pt;
    position: relative;
    bottom: -2pt;
}

.tags-key-section-title {
    text-align: left;
}