html {
    background-color: var(--base);
}

nav {
    background-color: var(--accent1);
}

.button {
    color: var(--buttontext);
    border: 1px solid var(--buttonborder);
    background-color: var(--buttonbackground);
}

h1 {
    color: var(--text1);
}

h2 {
    color: var(--text1);
}

h3 {
    color: var(--text2);
}

h4 {
    color: var(--text2);
}

p {
    color: var(--text1);
}

.evenodd tr:nth-child(2n) td:not(:last-child) {
    background-color: var(--accent2);
}

.evenodd tr:nth-child(2n+1) td:not(:last-child) {
    background-color: var(--accent1);
}

.evenoddfull tr:nth-child(2n) td {
    background-color: var(--accent2);
}

.evenoddfull tr:nth-child(2n+1) td {
    background-color: var(--accent1);
}

.even {
    background-color: var(--accent1);
}

.odd {
    background-color: var(--accent2);
}

.input {
    background-color: var(--inputbackground);
    color: var(--inputtext);
}

.input::placeholder {
    color: var(--inputtext);
}

.error {
    color: var(--errormessage);
}

.success {
    color: var(--successmessage);
}

i {
    color: var(--accent2);
}

.loginheader {
    color: var(--accent1);
}

.text2 {
    color: var(--text2);
}

.text1 {
    color: var(--text1);
}

#nav-button i {
    color: var(--text1);
}

#new_year_div {
    margin-top: 50vh;
    transform: translate(0, -50%);
    text-shadow: 0 0 10px #000;
}

#first_new_year {
    font-size: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.new_year {
    text-align: center;
    font-size: large;
    padding: 5px;
    transform: translate(0, -50%);
}

@media (max-width: 1100px) {
    #new_year_div {
        margin-top: 50vh;
        transform: translate(0, -50%);
        text-shadow: 0 0 10px #000;
    }
    
    #first_new_year {
        text-decoration: underline;
        font-size: 5em;
        padding-bottom: 2em;
        text-align: center;
    }
    
    .new_year {
        font-size: 2.5em;
        text-align: center;
        padding: 5px;
        padding-bottom: 1em;
    }
}