main {
    margin: 10px;
    display: block;
}
main button {
    all: unset;
    display: block;
    width: 70vw;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 12px;
}
main button:hover, main button:active, .active {
    background-color: white !important;
    color: black;
}

button:nth-child(odd) {
    background-color: #ffffff20;
}

h1, h2, h3, h4 {
    font-family: 'Syncopate', sans-serif;
}

h2 {
    font-size: 1em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}
h3 {
    margin-top: 2em
}
section {
    padding: 1.3em;
    padding-top: 0vw;
    border-bottom: 1px solid white;
    margin-bottom: 7px;
    max-width: 70vw;
}

section a {

    color: lightblue !important;
    text-decoration: underline !important;
}

section p {
    padding-left: 0.4em;
}
section table {
    border-collapse: collapse;
}
section th {
    background-color: var(--site-pink)
}
section th, td {

    padding: 4px;
}

section td {
    color: black;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #00000050;
    background-color: #eeeeee;
}

.partialAcc {
    background-color: #fad48e;
}

.notAcc {
    background-color: #faa296
}

@media (max-width: 768px) {

    section  {
        max-width: 100%;
    }
    main button {
        width: 92vw;
    }
}