@font-face {
    font-family: "M+ M Type 1";
    src: url("/assets/fonts/m-plus-m-type-1/mplus-1m-regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "M+ M Type 1";
    src: url("/assets/fonts/m-plus-m-type-1/mplus-1m-bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Cooper Hewitt";
    src: url("/assets/fonts/cooper-hewitt/CooperHewitt-Semibold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

:root {
    --color-dark: #3c3c3c;
    --color-light: #ccc;

    --color-blue-light: #367f43;

    --color-fuchsia-light: #dd688e;

    --color-orange-light: #e67f4d;

    --color-red-dark: #ff0000;
    --color-red-light: #f25454;
    --color-red-lighter: #f85454;
    --color-red-lightest: #ff5454;
}


html {
    width: 100%;
}

body {
    width: 100%;
    margin: 0;
    font-family: "M+ M Type 1";
    color: var(--color-light);
    background: var(--color-dark);
}

a {
    color: var(--color-red-light);
}

a:visited {
    color: var(--color-orange-light);
}

a:hover {
    color: var(--color-red-lightest);
}

a:active {
    color: var(--color-fuchsia-light);
}

.banner {
    text-align: center;
    font-size: 4em;
    font-family: "Cooper Hewitt";
    font-weight: bold;
    color: var(--color-dark);
    background-image: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: var(--color-red-dark);
}

footer {
    text-align: center;
    font-size: 0.9em;
}

footer hr {
    width: 95vw;
}