:root {
    --purple: #451b83;
}
body, select, button {
    background-color: #f6f6f9;
    color: #202020;
    font-family: 'Semplicita';
    text-transform: lowercase;
}
select, button, textarea, #thankyou {
    background-color: white;
    color: #202020;
    border-radius: 20px;
    border: none;
    font-size: 1rem;
    box-shadow: 1px 1px 3px #00000020;
}
button {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}
button:hover, button:focus {
    background-color: #e2e2e6;
}
button:active, button.selected {
    transition: none;
    background-color: #b0b0b4;
}
.container {
    margin: 50px;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 35px;
}
h1 {
    font-style: italic;
}
h1, h2, p {
    margin: 0;
}
.lastupdate {
    font-style: italic;
    color: #606060;
}
a {
    color: var(--purple);
    text-decoration: none;
    padding: 0;
    margin: 0;
}
a:not(svg a):hover {
    text-decoration: underline;
}
@font-face {
    font-family: 'Semplicita';
    src: url(/fonts/semplicita.otf);
}
@font-face {
    font-family: 'Semplicita';
    src: url(/fonts/SemplicitaItalic.otf);
    font-style: italic;
}
div, aside {
    display: flex;
    flex-direction: column;
}
aside {
    gap: 1.75em;
    flex-basis: 200px;
    flex-grow: 0.15;
    & section {
        flex-grow: 1;
    }
    & .scroll {
        max-height: 15rem;
        overflow-y: scroll;
        padding-right: 20px;
    }
}
.contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    text-align: center;
    & img {
        width: 20px;
        margin-top: 2px;
    }
}
.contact:has(button) {
    margin-bottom: 8px;
}
.contact:has(button):first-of-type {
    gap: 20px;
    margin-top: 2px;
}
.themewrapper {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}
ul {
    margin: 0 0 0 -1em;
}
.headerwrapper {
    flex-direction: row;
    align-items: last baseline;
    justify-content: space-between;
}
#mainbar {
    flex-basis: 500px;
    flex-grow: 0.2;
}
.descriptionbox {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em;
    padding: 1em;
    background-color: white;
    text-align: center;
    min-height: 2.5em;
    box-shadow: 2px 4px 7px #00000030;
}
#buttonwrapper {
    display: flex;
    flex-flow: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    & button {
        text-transform: none;
    }
}
.icon {
    position: fixed;
    top: 2px;
    left: 2px;
    width: 50px;
}
#navjump {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1%;
    transform: translateY(-100%);
    transition: transform 0.5s;
}
#navjump:focus {
    transform: none;
}