* {
    box-sizing: border-box;
}

body {
    margin: 0em;
    padding: 0em;
    background-color: #C3C3BE;
    background-image: url("../assets/backgroundLandscape.jpeg");
    background-repeat: no-repeat;
    background-size: auto 100svh;
    background-position: top left;
}

nav {
    position: relative;
}

nav ul {
    margin: 3em 1.5em 0em 0em;
    padding: 0em;
    list-style-type: none;
    position: absolute;
    right: 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
}

nav ul li {
    margin: 0.35em;
    padding: 0%;
}

.secondLogo {
    width: 3.5em;
}

nav a.hoverEffect {
    padding: 0.25em;
    font-family: 'Prata', 'Times New Roman', Times, serif;
    font-size: 24px;
    color: #2E1805;
    text-decoration: none;
    border: 3px rgba(46, 24, 5, 0) solid;
}

nav a.hoverEffect:hover {
    border: 3px #2E1805 solid;
    background-color: rgba(46, 24, 5, 0.15);
}

nav a.hoverEffect:active {
    text-decoration: underline;
}

img.side {
    margin: -0.75em 0em 0em 0em;
    padding: 0em;
    width: 100%;
}

img.top {
    display: none;
}

footer {
    position: fixed;
    bottom: 0.75em;
    right: 1.75em;
    padding: 0.75em 2em;
    background-color: #2E1805D9;
    border: 3px #2E1805 solid;
}

footer p {
    margin: 0% 0% 2% 0%;
    padding: 0em;
    font-family: 'Prata', 'Times New Roman', Times, serif;
    font-size: 12px;
    color: #C3C3BE;
    text-align: right;
}

footer a {
    color: #C3C3BE;
    text-decoration: none;
}

footer a:hover {
    color: #C3C3BE;
    text-decoration: underline;
}

/* queries that determine the background image based on screen size ratio and orientation*/

@media (max-width: 445px) {
    nav ul li {
        font-size: 0.6em;
    }
}

@media (orientation: portrait) {
    nav ul {
        margin: 2.25em 1em 0em 0em;
        right: 0.75em;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        text-align: right;
        align-content: center;
    }

    nav ul li {
        margin: 0.5em;
    }

    img.side {
        display: none;
    }

    img.top {
        width: 25%;
        display: unset;
    }
}

@media (min-aspect-ratio: 9/16) {
    body {
        background-image: url("../assets/background9:16.jpeg");
        background-size: cover;
    }
}

@media (min-aspect-ratio: 3/4) {
    body {
        background-image: url("../assets/background3:4.jpeg");
        background-size: cover;
    }
}

@media (min-aspect-ratio: 4/3) {
    body {
        background-image: url("../assets/background4:3.jpeg");
        background-size: cover;
    }
}

@media (min-aspect-ratio: 16/9) {
    body {
        background-image: url("../assets/background16:9.jpeg");
        background-size: cover;
    }
}