/* define all fonts at top */

@font-face {
    font-family: ledlight;
    src: url(src/fonts/LEDLIGHT.otf);
}

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

@font-face {
    font-family: vga;
    src: url(src/fonts/perfectdosvga437.ttf)
}

/* html elements, non-class */

body {
    background: rgba(0, 0, 0, 0.8);
    background-image: url("src/gif/sky.gif");
    background-blend-mode: multiply;
    background-size: 608px 468px;
}

/* navigation */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #555;
    opacity: 0.75;
    display: flex;
}

nav ul li a {
    display: block;
    color: #FFF;
    opacity: 0.5;
    
    padding: 14px 16px;
    
    text-align: center;
    text-decoration: none;
    font-family: vga;
    font-size: 24px;

    transition: background-color 0.25s ease-in-out, opacity 0.25s ease-in-out, text-shadow 0.25s ease-in-out;
}

nav ul li a:hover {
    background-color: #333;
    opacity: 1;
    text-shadow: 0px 0px 4px white;
}
/* end navigation */

h1 {
    font-size: 50px;
    font-family: bluescreen;
}

p {
    font-size: 24px;
    font-family: bluescreen;
    color: #FFF;
    text-align: center;
}
/* class rules */

.content {
    width: 75vw;
    margin: auto;
    margin-top: 250px;

    border-style: solid;
    border-radius: 8px;
    border-width: 6px;
    border-color: #333;

    background: #222222AA;
}