:root {
    --gap: 8px;
    --smallgap: 4px;
    --accent-color: #aa0000;
    --border-radius: 2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6, .back-button {
    font-family: 'Courier New', Courier, monospace;
}

body {
    display: flex;
    justify-content: center;
    background: url("https://projects.hokkie.org/assets/pepper.jpg") black;
}

main {
    background-color: #ffd7d7;
    border: 1px solid var(--accent-color);
    padding: var(--gap);
    width: 100%;
}

@media screen and (min-width: 1200px) {
    main {
        width: 1200px;
    }
}

img, video {
    max-width: 100%;
}

.back-button {
    display: inline-block;
    padding: .5rem;
    border: 1px solid var(--accent-color);
    text-decoration: none;
    margin-bottom: 1rem;
}

input {
    width: 100%;
    padding: var(--smallgap);
    border: 1px solid var(--accent-color);
    margin-bottom: var(--gap);
    box-sizing: border-box;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--gap);
}

.year-separator {
    grid-column-start: 1;
    grid-column-end: 5;
}

@media screen and (max-width: 900px) {
    .cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .year-separator {
        grid-column-end: 4;
    }
}

@media screen and (max-width: 700px) {
    .cards {
        grid-template-columns: 1fr 1fr;
    }
    .year-separator {
        grid-column-end: 3;
    }
}

@media screen and (max-width: 500px) {
    .cards {
        grid-template-columns: 1fr;
    }
    .year-separator {
        grid-column-end: 2;
    }
}

.card {
    border: 1px solid var(--accent-color);
    position: relative;
}

.card:not(.horizontal-card) .thumb {
    border-bottom: 1px solid var(--accent-color);
}

.horizontal-card .thumb {
    border-right: 1px solid var(--accent-color);
}

.card-body {
    padding: var(--gap);
}

.card-body small {
    position: absolute;
    right: var(--smallgap);
    bottom: var(--smallgap);
}

.horizontal-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 800px;
}