.nav {
    display: flex;
    background-color: var(--accent-container);
}

a {
    display: flex;
    background-color: var(--accent-element);
}

.nav a {
    flex-flow: column wrap;
    font-size: calc(var(--base-unit) * 0.75);
}

.nav span {
    font-size: calc(var(--base-unit) * 1.25);
}

img {
    width: 100%;
    padding: 0;
    margin: auto;
}

#announcements,
#eventList,
.card div {
    padding: 0;
    background-color: transparent;
    border: none;
}

#bio {
    grid: auto / 1fr 4fr;
}

#bio h1 {
    grid-column: 1 / span 2;
}

#bio p {
    width: 100%;
    height: 100%;
}

.card {
    background-color: var(--element);
    grid: auto / 1fr 4fr;
}

.card p,
.card h1 {
    border: none;
}

p {
    text-align: left;
}

p *,
span {
    display: inline;
    padding: 0;
    background-color: transparent;
}

footer {
    background-color: var(--container);
    padding: 0;
    border: none;
}

footer * {
    background-color: transparent;
    text-align: center;
}

iframe {
    width: 100%;
    aspect-ratio: 2;
}

time {
    font-weight: 700;
}

.calendar-wrapper {
    padding: 0;
    border: none;
    grid: auto / auto 2fr auto 2fr;
}

.wrapper {
    padding: 0;
    border: none;
    background-color: transparent;
}

#links-wrapper {
    grid: auto / 1fr 1fr;
}

@media (orientation: portrait) {
    #bio h1 {
        grid-column: 1;
    }

    iframe {
        aspect-ratio: 1;
    }

    #bio,
    #works,
    #events,
    .card {
        grid: auto / 1fr;
    }

    img {
        width: 30%;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}