@charset "UTF-8";

<link href="https://fonts.googleapis.com/css2?family=Commissioner:wght@200&family=Lora&display=swap" rel="stylesheet">

html {
    font-size: 62.5%;
}

body {
    font-size: 1rem;
    background-image:url(../images/background-image-rs-crop.jpg);
    background-repeat:space;
    background-size:cover;
    font-family: 'Commissioner', sans-serif;
    padding-bottom: 2%;
    margin-top: 1.5%;
}

#container {
    max-width: 1260px;
    min-width: 780px;
    width: 80%;
    color:black;
    margin: 0 10% 0 10%;
    border: 1px solid black;
}

h1 {
    font-size: 2.1rem;
    font-family:'Lora', serif;
    text-align: center;
}


h2 {
    font-size:1.5rem;
    color:black;
    font-family:'Lora', serif;
    text-align: center;
}


header {
    height: 230px;
    width: auto;
    background-color:black;
}


#headerbuttons {
    padding: 0.5% 2%;
    width: 200px;
    float: right;
}

#headerbuttons a {
    color: black;
    text-decoration: none;
    background-color: antiquewhite;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 5px;
}

#headerbuttons a:hover {
    background-color: darksalmon;
    transition: all 0.5s ease;
}

nav {
    height: 80px;
    width: 100%;
    background-color:darksalmon;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

nav ul {
    list-style-type: none;
    padding: 1% 0.5%;
    margin-left: 2.8%;
    margin-top: 1%;
}

nav li {
    float: left;
    margin-right: 2.5%;
    position: relative;
    margin: 0.3%;
    padding: 0.3%;
    width: 18%;
}

nav li a {
    display: block;
    color:black;
    text-align: center;
    padding: 4% 4%;
    text-decoration: none;
    font-size: 0.85rem;
    background-color:antiquewhite;
    border: 3px solid black;
}

nav li a:hover {
    background-color: black;
    border: 3px solid antiquewhite;
    color: papayawhip;
    margin: none;
    transition: all 0.5s ease;
}

 nav ul li ul {
        color: black;
        position: absolute;
        display: none;
        padding: 3px 5px;
        width: 89.8%;
        text-decoration: none;
        margin-left: 0;
        background-color:antiquewhite;
        overflow: visible;
        z-index: 1;
    }

nav ul li ul li {
    width: 100%;
}
    
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {
        display:grid;
        margin-left: none;
    }

#content {
    background-color: antiquewhite;
    margin: 0;
    padding: 5%;
    opacity: 0.9;
    text-align: left;
}

footer {
    height: 80px;
    width: auto;
    background-color: darksalmon;
    border-top: 1px solid black;
}

footer a {
    text-decoration: none;
    color: papayawhip;
}

#bottomcenter {
    width: 85%;
    text-align: center;
    padding-top: 1.25%;
    margin-left: 6%;
}
#bottomcorner {
    font-size: 0.5rem;
    float: right;
    width: 15%;
    word-wrap: break-word;
    text-align: right;
    padding: 1%;
    color: papayawhip;
}

.clearfix {
    content:"";
    clear:both;
    display:block;
}