:root {
    --light:#f9f9f9;
    --light2:#d8d4c8;
    --light5150:#e9e6d5;
    --light5150k:#e7e5d9;
    --dark:#444344;
    --dark2:#606266;
    --dark5150:#111113;
    --screen5150:#161f1c;
    --accent:#c8120e;
    --accent2:#ab393d;
    --screentext:#7bff91;
}

@font-face {
    font-family: "mf";
    src:url("/fonts/Web437_IBM_VGA_9x16.woff");
}

html {
    font-family: "Courier New", monospace;
}

body {
    margin: 0;
    padding: 0;
}

.header {
    padding-left: 5vw;
    padding-top: 5vh;
}

.footer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 20vh;
    color: var(--light);
}

.footer a {
    text-decoration: none;
    color: var(--light);
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

.m {
    margin: 1em;
}

.light {
    background-color: var(--light);
    min-height: 80vh;
}

.dark {
    background-color: var(--dark5150);
}

.accent {
    background-color: var(--accent);
    min-height: 100px;
}

.break-light-light {
    height: 3px;
    border: 0;
    border-top: 2px solid var(--dark2);
    background-color: lightgrey;
    border-bottom: 2px solid white;
}

.break-dark-dark {
    height: 2px;
    border: 0;
    border-top: 3px solid black;
    background-color: var(--dark);
    border-bottom: 2px solid var(--dark2);
}

.title {
    font-family: "mf";
    color: var(--accent);
    text-shadow: 1px 1px var(--dark2);
    font-weight: normal;
    margin: 0;
}

.main-title {
    font-family: "mf";
    color: var(--accent);
    text-shadow: 2px 2px var(--dark2);
    font-weight: normal;
    margin: 0;
    font-size: 3em;
}

@keyframes blinking {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}

.blink {
    animation: blinking 1s infinite;
}

.header-link {
    text-decoration: none;
    color: black;
}

a:hover {
    color: var(--accent);
}

.accordion input {
    display: none;
}

.accordion label {
    display: block;    
    cursor: pointer;
    transition: ease .5s;
    position: relative;
}

.accordion label:hover {
    color: var(--accent);
}

.accordion label::after {
    content: '►';
    color: var(--accent);
    text-shadow: 1px 1px var(--dark2);
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 2px;
}

.accordion input:checked + label::after {
    content: '▼';
    text-shadow: 1px 1px var(--dark2);
    right: 14px;
    top: 3px;
}

.accordion .content {
    padding: 1em;
}

.accordion input + label + .content {
    display: none;
}

.accordion input:checked + label + .content {
    display: block;
}

.accordion {
    padding-left: 1em;
}

.small-text {
	margin-top: 1em;
	font-size: 0.7em;
	color: var(--dark2);
}