style.scss

$color-bg: rgb(0, 0, 0);
$color-text: white;
$color-nav: rgb(0, 0, 0);

$color-bg-footer: #02C3F3;
$color-footer: rgb(0, 0, 0);
$hoverShadow: 0px -2px 4px #633ca2, 0px -2px 10px #8661C1, 0px -6px 15px #9271c5,
0px -10px 20px #b098d5, 0px -20px 40px #eae6ef;

@font-face {
    font-family: "oxanium";
    src: url('fonts/Oxanium/Oxanium-VariableFont_wght.ttf');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {

    background: $color-bg;
    color: $color-text;
    font-family: "oxanium";

    header {

        nav {
            padding: 1rem;
            background-color: $color-nav;

            overflow: hidden;
            position: relative;
            box-shadow: 0 2px 10px -1px rgb(210, 210, 169), 0 4px 20px -2px rgb(154, 77, 77);

            #img-logo {
                max-width: 15%;
            }

            #links {
                display: none;
                list-style-type: none;
                z-index: 99;
                padding-left: 0;
                margin-left: 0;
                margin-top: 1rem;
            }

            .navLink {
                margin-top: 1rem;

                text-decoration: none;
                color: $color-text;
            }

            .navLink:hover {
                text-shadow: $hoverShadow;
            }

            .icon {
                display: block;
                position: absolute;
                right: 0;
                top: 0;
                padding: 10%;
                color: $color-text;
            }

        }

    }


    footer {
        margin-top: 2rem;
        padding: 1rem;
        text-align: center;
        color: $color-footer;
        background-color: $color-bg-footer;
    }




    @media screen and (min-width: 800px) {

        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            margin-bottom: 0;


            .logo {
                align-items: center;
                height: fit-content;
                order: 0;
                margin-right: auto;
            }

            img {
                margin: 0;
                width: 10%;
            }

            #links {
                display: flex !important;
                margin: 1rem;
                order: 1;
            }

            .navLink {
                margin-left: 1rem;
            }

            .icon {
                display: none;
            }
        }

    }



}