/*
Kyler Olsen
July 2025
*/

main {
    padding-left: 20vw;
    padding-right: 20vw;
}

h1, h2, h3, h4 {
    font-family:
        'Lucida Sans',
        'Lucida Sans Regular',
        'Lucida Grande',
        'Lucida Sans Unicode',
        Geneva,
        Verdana,
        sans-serif;
    /* margin: 16px 64px; */
    margin-top: 16px;
    margin-bottom: 16px;
}

h1 {
    text-align: center;
}

h1 .title {
    font-size: 48px;
}

h1 .semester {
    font-size: 24px;
    font-style: italic;
}

table {
    margin-left: auto;
    margin-right: auto;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 8px;
    text-align: left;
}

hr {
    margin-top: 16px;
}

p {
    font-size: 18px;
    /* text-indent: 4rem; */
    /* margin: 16px 64px; */
    margin-top: 16px;
    margin-bottom: 16px;
}

ul {
    display: block;
    font-size: 18px;
    /* margin: 16px 98px; */
    margin-top: 16px;
    margin-bottom: 16px;
}

ul ul {
    margin-top: revert;
    margin-bottom: revert;
}

a {
    color: blue;
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 8px;
    padding-left: 20vw;
    padding-right: 20vw;
}

@media screen and (max-width: 768px) {
    main {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    footer {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

body[mode="dark"] {
    background-color: #121212;
    color: #dedede;
}

body[mode="dark"] table, body[mode="dark"] th, body[mode="dark"] td {
    border: 1px solid #404040;
}

body[mode="dark"] a {
    color: #3399ff;
}

.input-group {
    margin-top: 4px;
    display: inline-block;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    border: #121212 1px solid;
    border-radius: 4px;
    padding: 2px 4px;
}

body[mode="dark"] input[type="checkbox"] + label {
    border-color: #808080;
}

input[type="checkbox"]:checked + label {
    background-color: #99bbff;
}

body[mode="dark"] input[type="checkbox"]:checked + label {
    background-color: #3366cc;
}

.error-message {
    color: red;
    font-weight: bold;
    font-size: 16px;
}

body[mode="dark"] .error-message {
    color: #ff6666;
}

.error-message.hidden {
    display: none;
}

.no-classes {
    display: none;
}