/**
 * 3c3c3c
 * 202020
 * 181818
 */
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #181818;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

input[type=text],
input[type=email],
input[type=password] {
    border: solid 2px transparent;
    margin: 0;
    padding: 2;
    display: block;
    box-sizing: content-box;
    /* -webkit-appearance: textfield; */
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    background-clip: content-box;
    outline: none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus {
    border-bottom: solid 2px #0033ff;   
}

a:link,
a:active,
a:visited {
    color: #808080;
    text-decoration: none;
    border-bottom: solid 2px transparent;
}

a:hover {
    border-bottom: solid 2px #808080;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

#page-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    display: block;
}

#content {
    max-width: 1000px;
    height: 100%;
    min-height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
}

#menu-bar {
    height: 50px;
    background-color: #282828;
    display: block;
    width: 100%;
}

#menu {
    display: block;
    max-width: 1000px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    list-style-type: none;
}

#menu a:link,
#menu a:active,
#menu a:visited {
    color: #e0e0e0;
    text-decoration: none;
    border-bottom: solid 2px transparent;
}

#menu a:hover {
    border-bottom: solid 2px #e0e0e0;
}

#side-menu {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0px;
    display: block;
    background-color: green;
    visibility: hidden;

    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

/*
div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
*/

.inputFields {
    width: inherit;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 5px;
}

#loginForm,
#registerForm {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    display: block;
}

#submit {
    float: right;
    padding: 2px;
    margin-top: 4px;
}