@font-face {
    font-family: Coolvetica;
    src: url(/include/font/coolvetica.ttf);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: #2b1515;
    color: white;
    font-family: Coolvetica;
    font-size: 1.5em;
    display: flex;
    flex-flow: column;
    height: 98%;
}

header,
nav,
section {
    border: 2px solid white;
    border-radius: 5px;
}

header {
    background-color: #5f1e1e;
    text-align: center;
    display: flex;
    flex: 0 0 10vh;
    overflow: hidden;
}

header>h1 {
    margin: auto;
}

div#flex-container {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row;
    margin-top: 5px;
}

nav {
    background-color: #461111;
    flex: 0 0 10vw;
    float: left;
    margin-bottom: 5px;
    padding-left: 10px;
    overflow: hidden;
}

article {
    position: relative;
    float: left;
    margin-left: 5px;
    flex: 1 1 auto;
}

article#login-article {
    display: flex;
}

section {
    padding: 15px;
    margin-bottom: 5px;
}

form#login-form {
    width: 30vw;
    min-height: 43vh;
    margin: auto;
    display: flex;
}

form#login-form>fieldset {
    flex: 1 1 auto;
    padding: 50px;
    border-radius: 5px;
}

h1, h2, h3, h4, h5, h6, th {
    font-weight: normal;
}

p#logout-link,
p#login-status {
    float: right;
}

a:link,
a:visited {
    color: #ffffbb;
}

a:hover {
    color: #ffff7c;
}

a:active {
    color: #ffff42;
}

th, td {
    padding: 3px;
}

th {
    text-decoration: underline;
}

input,
select,
textarea {
    color: #54444e;
	border: 1px solid #C8BFC4;
	border-radius: 4px;
	box-shadow: inset 1px 1px 2px #ddd8dc;
    background: #fff;
    font-family: Coolvetica;
    font-size: 0.9em;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
textarea,
select {
    padding-left: 3px;
}

input[type=button],
input[type=submit] {
    transition: background-color .2s;
}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: #dddddd;
}

input[type=button]:focus,
input[type=button]:active,
input[type=submit]:focus,
input[type=submit]:active {
    background: #cacaca;
}

input[type=checkbox] {
    zoom: 1.2;
}

input.ding {
    width: 30vw;
}