* {
    box-sizing: content-box;
    margin:0;
    padding:0;
}
@media (max-width: 500px) {
    nav {
        width: 100%;
        height: 300px;   
        background-image:linear-gradient(to bottom, #291C45, transparent);
        margin: 0;
    }
    nav p {
        height:100%;
        width:100%;
        text-align: center;
        font-size: 1.5em;
        font-style: normal;
        line-height: 1.5em;
        display:flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    nav p a {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: transparent;
        color:white;
        font-style: bold;
        text-decoration: none;
        width:100%;
        height: 2em;
        margin: 0 3%;
        text-align: center;
        letter-spacing: 2px;
    }
    nav p a:hover {
        background-color: #FAB800;
        color: white;
    }
    nav p a#final:hover {
        background-color: #FAB800;
        color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #copyright {
        width:60%;
        color:lightgray;
        font-style: italic;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.8em;
        margin: auto;
        position:static;
        bottom:10px; 
    }
}
@media (min-width:501px) and (max-width:1000px) {
    nav {
        width: 100%;
        height: 2em;   
        background-image:linear-gradient(to bottom, #291C45, transparent);
        margin: 0;
    }
    nav p {
        height:100%;
        width:100%;
        text-align: center;
        font-size: 1.5em;
        font-style: normal;
        line-height: 1.5em;
        display:inline-block;
    }
    nav p a {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: transparent;
        color:white;
        font-style: bold;
        text-decoration: none;
        width:7%;
        height: 100%;
        margin: 0 1%;
        text-align: center;
        letter-spacing: 1px;
    }
    nav p a:hover {
        background-color: #FAB800;
        color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #copyright {
        width:50%;
        color:lightgray;
        font-style: italic;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.8em;
        margin: auto;
        position:static;
        bottom:10px; 
    }
}
@media (min-width:1001px) {
    nav {
        width: 100%;
        height: 2em;   
        background-image:linear-gradient(to bottom, #291C45, transparent);
        margin: 0;
    }
    nav p {
        height:100%;
        width:100%;
        text-align: center;
        font-size: 1.5em;
        font-style: normal;
        line-height: 1.5em;
    }
    nav p a {
        display:inline-block;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color:white;
        font-style: bold;
        text-decoration: none;
        width:10%;
        height: 100%;
        margin: 0 3%;
        text-align: center;
        letter-spacing: 2px;
    }
    nav p a:hover {
        background-color: #FAB800;
        color: white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #copyright {
        width:20%;
        color:lightgray;
        font-style: italic;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.8em;
        margin: auto;
        position:static;
        bottom:10px; 
    }
}
body {
    background-color: black;
}

main {
    background-color: black;
}