@font-face {
    font-family: 'CopperplateGothicBold';
    src: url('./assets/Copperplate\ Gothic\ Bold/CopperplateGothic-Bold.woff2') format('woff2'),
        url('./assets/Copperplate\ Gothic\ Bold/CopperplateGothic-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.header {
    background-image: linear-gradient(to bottom, rgba(173, 216, 230, 0.75), #add8e6);
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 30px;
    height: max-content;
}

.header #header-top {
    font-family: 'CopperplateGothicBold', serif;
    font-size: x-large;
    text-align: center;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px solid black;
}

.header nav {
    padding: 2px 0px 2px 0px;
    display: flex;
    justify-content: center;
    gap: 2px;
    align-items: center;
    background-color: #fff8dc;
    border: 1px solid black;
}

.header nav a {
    width: 13%;
    height: 30px;
    text-transform: capitalize;
    text-decoration: None;
    color: black;
    font-family: 'CopperplateGothicBold', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px black solid;
    border-radius: 5px;
}

.header nav a:hover {
    background-color: #00000033;
}