tbody tr:nth-child(odd) {
    background-color: light-dark(#f1f1f1, #1c1c1c);
}

.search-label {
    display: flex;
    align-items: center;
}
.search-label label {
    width: 100%;
    text-align: center;
}

#title {
    text-decoration: none;
    color: var(--colour-foreground);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 24px;
}
.site-title {
    margin: 0;
}
/* Campus links (sit next to the title in the page header) */
.campus-links {
    font-size: 1rem;
    white-space: nowrap;
}
.campus-links a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
}

#search-area {
    display: grid;
    grid-template-areas:
        "school-label select-school select-school level-label select-level semester-label select-semester select-semester"
        "title-label title-input search-button code-label code-input code-input code-input go-button";
    grid-template-columns: auto auto 90px auto auto auto auto auto;
    grid-template-rows: auto auto;
    column-gap: 5px;
    row-gap: 10px;
}

@media (width < 900px) {
    #search-area {
        grid-template-areas:
            "school-label select-school select-school select-school select-school"
            "level-label select-level semester-label select-semester select-semester"
            "code-label code-input code-input code-input go-button"
            "title-label title-input title-input title-input search-button";
        grid-template-columns: min-content min-content min-content auto 90px;
        grid-template-rows: auto auto auto auto;
    }
    /* Break selector to its own line on smaller screens */
    .page-header { flex-direction: column; align-items: flex-start; }
    .campus-links { margin-top: 0.25rem; }
}

@media (width < 550px) {
    #search-area {
        grid-template-areas:
            "school-label select-school select-school"
            "level-label select-level select-level"
            "semester-label select-semester select-semester"
            "code-label code-input go-button"
            "title-label title-input title-input"
            "search-button search-button search-button";
        grid-template-columns: auto auto 90px;
        grid-template-rows: repeat(7, auto);
    }
}

@media (width < 490px) {
    #search-area {
        grid-template-areas:
            "school-label school-label school-label"
            "select-school select-school select-school"
            "level-label select-level select-level"
            "semester-label select-semester select-semester"
            "code-label code-input go-button"
            "title-label title-label title-label"
            "title-input title-input title-input"
            "search-button search-button search-button";
        grid-template-columns: auto auto 90px;
        grid-template-rows: repeat(9, auto);
    }
    #level-label label {
        text-align: right;
    }
    #semester-label label {
        text-align: right;
    }
    #code-label label {
        text-align: right;
    }
}

#title-label {
    grid-area: title-label;
}
#title-input {
    grid-area: title-input;
}
#search-button {
    grid-area: search-button;
}

#code-label {
    grid-area: code-label;
}
#code-input {
    grid-area: code-input;
}
#go-button {
    grid-area: go-button;
}

#level-label {
    grid-area: level-label;
}
#level-select-container {
   grid-area: select-level;
}
#level-select {
    width: 100%;
}

#school-label {
    grid-area: school-label;
}
#school-select-container {
    grid-area: select-school;
}
#school-select {
    width: 100%;
}

#semester-label {
    grid-area: semester-label;
}
#semester-select-container {
    grid-area: select-semester;
}
#semester-select {
    width: 100%;
}

table {
    width: 100%;
}

select {
    max-width: 100%;
}

#pagination {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 30px 10px 10px 10px;
}

#previous-page-grid {
    text-align: right;
}

#page-info-grid {
    text-align: center;
}

#next-page-grid {
    text-align: left;
}