body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: Outfit, sans-serif;
}

h1#title {
    color: var(--accent);
    text-shadow: 4px 4px 4px black;
}
h1, h2, h3, h4, h5, h6 {
    font-family: SpecialGothicExpandedOne, sans-serif;
}

input, button, .file-input, a.button {
    background-color: var(--background);
    color: var(--foreground);
    border: 2px solid var(--accent);
    outline: none;
    border-radius: 5px;
    padding: 5px;
    transition: 0.1s;
    cursor: pointer;
    text-decoration: none;
}
input[type="file"] {
    display: none;
}
input[type="submit"]:hover, button:hover, .file-input:hover, a.button:hover {
    cursor: pointer;
    background-color: var(--accent);
    color: var(--background)
}

#header {
    width: 100vw;
    margin: 0;
    padding: 0;
    border: None;
    height: var(--header-height);
    box-shadow: 0 1px 5px 0 black;
    z-index: 5;
}

.pfp {
    border-radius: 150px;
    height: 150px;
    width: 150px;
}

#logo {
    height: 2em;
}