* {
    box-sizing: border-box;
}

html {
    margin: 0;
    height: 100%;
    background: url(bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    font-family: sans-serif;
    color: white;
}

body.flex {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
}

body>h1 {
    text-align: center;
}

nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 425px;
    min-width: 250px;
    max-width: 30%;
    flex-shrink: 0;
    background: rgb(24, 24, 24);
    padding: 4px 12px;
    overflow-y: auto;
}

nav .spacer {
    flex-grow: 1;
    padding: 2em 0;
}

nav h1 {
    font-size: 1.5em;
}

nav h2 {
    font-size: 1.2em;
    border-bottom: 1px solid gray;
    padding: 0.25em 0;
}

nav h1.compact {
    margin-bottom: 0;
}

nav a {
    text-decoration: none;
    color: inherit;
}

nav .item {
    color: turquoise;
    display: flex;
    margin: 0.25em 0;
    flex-direction: row;
    align-items: stretch;
    transition: 100ms ease-in;
}

nav .item a {
    flex-grow: 1;
    padding: 0.25em;
    border: 1px solid transparent;
    transition: 100ms ease-in;
    border-right: 1px solid rgb(24, 24, 24);
}

nav .item a:hover, nav .item a:focus {
    border: 1px solid turquoise;
}

nav .item.active a:hover, nav .item.active a:focus {
    background: darkcyan;
    color: white;
    border: 1px solid transparent;
    border-right: 1px solid rgb(24, 24, 24);
}

nav .item.active a:focus {
    border: 1px solid white;
    background: darkturquoise;
    color: black;
}

nav .item a::after {
    content: " >>";
}

nav > a, nav > a:visited {
    border: 1px solid gray;
    padding: 0.25em;
    margin: 0.25em 0;
    border-radius: 4px;
    background: rgb(35, 35, 35);
    text-align: center;
    transition: 100ms ease-in;
}

nav > a:hover, nav > a:focus {
    background: rgb(60, 60, 60);
}

nav .active {
    color: black;
    background: turquoise;
}

nav button {
    padding: 0.5em 0.75em;
    background: turquoise;
    font-weight: bold;
    border: none;
    cursor: pointer;
    visibility: hidden;
    transition: 100ms ease-in;
}

nav .open button {
    visibility: visible;
}

nav button:hover {
    background: darkcyan;
    color: white;
}


nav button:focus {
    outline: 1px solid white;
    background: darkturquoise;
}

iframe {
    border: none;
    flex-grow: 1;
    min-width: 320px;
}

.panel a, .panel a:visited {
    color: turquoise;
    transition: 100ms ease-in;
}

.panel a:hover {
    color: darkcyan;
}

form label, form button, form .recaptcha {
    display: block;
    margin-top: 1em;
}

form input, form textarea {
    resize: vertical;;
    width: 100%;
}

form button {
    font-size: 12pt;
    padding: 0.5em 1em;
    cursor: pointer;
}

code {
    font-family: 'Courier New', Courier, monospace;
    background:rgb(20, 38, 41);
    color: rgb(202, 220, 230);
    border-radius: 2px;
    padding: 0 0.25em;
}

code.error {
    background:rgb(46, 20, 20);
    color: rgb(253, 35, 35);
}

.panel {
    background: rgb(24, 24, 24);
    border-radius: 20px;
    height: fit-content;
    padding: 1em 2em;
    margin: 1em;
}

.hidden {
    display: none;
}

/* display: none breaks iframes on Firefox */
iframe.hidden {
    display: block;
    visibility: hidden;
    position: absolute;
    width: 0px;
    height: 0px;
}

.mobile {
    display: none;
}