body {
    margin: 0;
    padding: 10px 10px 10px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #131516;
    color: #cccccc;
}
main {
    flex: 1; /* keep footer at the bottom */
}
a {
    color: #cccccc;
}

h1 {
	font-size: 3rem;
}

h3 {
	font-size: 2rem;
}

a.no-link-color {
    color: #cccccc;
}

.email:hover {
    color: black;
    background-color: #9b4cda;
}


iframe {
    width: 80%;
    height: 60vh;
    border: 1px dotted black;
    margin-left: 10%;
}

blockquote {
    border-left: .3rem solid #9b4dca;
}

blockquote.warning {
    border-left: .3rem solid #ca5414;
}

text-muted {
    color: gray;
}

.footer {
    text-align: center
}

/* Reset apple form styles */
input, textarea, select, select:active, select:focus, select:hover {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; border-radius: 0;
    background-image: none;
}

#login {
	padding-top: 15vh;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: auto;
}

#login h1, #login h4 {
    text-align: center;
}

#login fieldset {
    display: flex;
    flex-direction: column;
}

#login fieldset label {
    position: relative;
    top: 12px;
    left: 12px;
    width: fit-content;
    line-height: 1;
    padding: 0 6px;
    font-size: 1.4rem;
    background-color: #131516;
    z-index: 999;
}

#login input[type="text"], #login select {
    border-radius: 0.4rem;
    color: #cccccc;
    font-size: 1.6rem;
    height: 4.2rem;
    padding: 0 1.4rem;
    margin-bottom: 1rem;
}

#login select option {
    background-color: #131516;
    color: #cccccc;
}

#login .dropdown {
    position: relative;
    border-radius: 0.4rem;
}

#login .dropdown::before {
    position: absolute;
    content: "\2193";
    top: 15%;
    right: 12px;
}

#login .buttons {
    margin-top: 1.5rem;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#login .buttons > * {
    width: 100%;
    flex: 1;
    font-size: 1.3rem;
}