body {
    margin: 0;
    padding: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #fdfdfd;
}

.form-box {
    width: fit-content;
    padding: 24px 48px;
    background: #fefefe;

    -webkit-box-shadow: 2px 1px 5px #00000050;
    -moz-box-shadow: 2px 1px 5px #00000050;
    box-shadow: 2px 1px 5px #00000050;
}

.login-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
}

img {
    margin: 12px 24px 16px 0px;
}

h3 {
    color: rgb(215,74,23);
    margin: 8px 0px;
    font-family: 'pb';
    font-size: 2rem;
}

input {
    font-family: 'ml';
    padding: 12px 8px;
    width: 250px;
    font-size: 1rem;
    margin: 4px 0px;
    border: 1px solid #e6e6e6;
}

input[type='password']:not(:placeholder-shown) {
    font-size: 1rem;
    font-family: Verdana;
}

.error-message {
    color: #f03616;
    font-family: 'ml';
    font-size: .9rem;
    width: 250px;
}

button {
    cursor: pointer;
    font-family: 'mm';
    padding: 5px 15px;
    font-size: .9rem;
    color: black;
}

span {
    font-size: .7rem;
    font-family: 'ml';
}

span a {
    color: #1c4587;
}

.login-selection {
    margin-right: 16px;
    padding: 2px 15px;

    cursor: pointer;
    font-family: 'mm';
    font-size: .9rem;
    color: black;
    text-decoration: none;

    border: 1px solid rgb(5, 171, 159, 0.8);
    border-radius: 15px;
}

.login-selection:hover {
    background: rgb(5, 171, 159, 0.7);
}

.login-selection:active {
    background: rgb(5, 171, 159, 0.95);
}

.login-active {
    background: rgb(5, 171, 159, 0.6);
}

.login-inactive {
    background: rgb(5, 171, 159, 0.1);
}

/* Turqoise */
.btn_turq {
    width: 250px;
    background: rgb(5, 171, 159, 0.6);
    border: 2px solid rgb(5, 171, 159, 0.65);
}

.btn_turq:hover {
    background: rgb(5, 171, 159, 0.7);
}

.btn_turq:active {
    background: rgb(5, 171, 159, 0.95);
}

.btn_gray {
    width: 250px;
    background: rgba(155, 155, 155, 0.6);
    border: 2px solid rgba(156, 156, 156, 0.65);
}

.btn_gray:hover {
    background: rgba(169, 169, 169, 0.7);
}

.btn_gray:active {
    background: rgba(170, 170, 170, 0.95);
}

/* Fonts */
@font-face {
    font-family: 'pl';
    src: url('fonts/Policemen-Light.ttf');
}

@font-face {
    font-family: 'pb';
    src: url('fonts/Policemen-Black.ttf');
}

@font-face {
    font-family: 'pn';
    src: url('fonts/Policemen.ttf');
}

@font-face {
    font-family: 'ml';
    src: url('fonts/monster_light.ttf');
}

@font-face {
    font-family: 'mm';
    src: url('fonts/monster_med.ttf');
}