:root {
    --nav-padding: 10px;
}

*, *::before, *::after {
    box-sizing: content-box;
}

body {
    font-family: Tahoma, sans-serif;
    background-color: #111;
    color: #ddd;
}

#container {
    padding: 0px 5px;
    max-width: 600px;
}

main {
    height: 300px;
}

.tab {
    display: none;
}
.tab-selector {
    display: none;
}
.tab-selector:checked + .tab {
    display: block;
}

a, a:visited,
.tab-span,
.totp-back {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
}
a:hover,
.tab-span:hover,
.totp-back:hover {
    text-decoration: underline;
}

.tab-span, .tab-span:visited,
.totp-back {
    color: crimson;
}

h1 {
    font-size: 2em;
}
h2 {
    display: inline;
    padding: 2px 7px;
    background-color: crimson;
}

main a {
    color: #cecece;
}

hr {
    color: #a8a8a8;
}

nav > :not(:first-child) {
    padding: 0px var(--nav-padding);
    border-left: 1px solid white;
}
nav > :first-child {
    padding-right: var(--nav-padding);
}

.flash {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}
.flash-error {
    border-color: crimson;
    background-color: rgba(220, 20, 60, 10%);
}
.flash-info {
    border-color: rgb(20, 108, 220);
    background-color: rgba(20, 108, 220, 10%);
}