body {
    header {
        overflow-y: hidden;
        width: 100%;
        height: 7dvh;
        z-index: 1000;
        position: sticky;
        top: 0;
        /*scroll-behavior: smooth;*/

        border-bottom: 1px solid #000000;

        #inner-header {
            width: 100%;
            height: 100%;
            position: relative;

            #header-top {
                background-color: var(--background-primary);
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                position: absolute;
                top: 0;
                left: 0;
                transition: .5s ease;

                #logoDiv {
                    width: 50%;
                    height: 100%;
                    padding: .5%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        height: 100%;
                    }

                    @media screen and (max-width: 979px) {
                        img {
                            height: 85%;
                        }
                    }

                    @media screen and (max-width: 767px) {
                        img {
                            height: 75%;
                        }
                    }

                    @media screen and (max-width: 480px) {
                        img {
                            height: 65%;
                        }
                    }
                }

                #menuDiv {
                    width: 20%;
                    height: 100%;
                    padding: .5% 1%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    border-bottom: 3px solid #000000;

                    p {
                        font-family: future-z;
                        font-size: 1.4em;

                        @media screen and (max-width: 480px) {
                            font-size: 1em;
                        }
                    }
                }
            }

            nav {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: flex-end;
                position: absolute;
                top: 100%;
                left: 0;
                transition: .5s ease;
                background-color: var(--background-primary);

                .navItem {
                    height: 100%;
                    width: 20%;
                    overflow-y: hidden;
                    position: relative;

                    .navItem-primary {
                        background-color: var(--background-primary);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        width: 100%;
                        padding: .5% 1%;
                        position: absolute;
                        top: 0;
                        left: 0;

                        p {
                            font-family: future-z;
                            color: var(--paragraph-primary);
                            font-size: 1.4em;
                        }
                    }

                    .navItem-secondary {
                        background-color: var(--background-secondary);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        width: 100%;
                        padding: .5% 1%;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        transition: .5s ease;

                        p {
                            font-family: future-z;
                            color: var(--paragraph-secondary);
                            font-size: 1.25em;
                        }
                    }

                    @media screen and (max-width: 1200px) {
                        .navItem-primary,
                        .navItem-secondary {
                            p {
                                font-size: 1em;
                            }
                        }
                    }

                    &:hover {
                        .navItem-secondary {
                            top: 0;
                        }
                    }
                }
            }

            @media screen and (max-width: 767px) {
                position: initial;

                #header-top {
                    position: initial;

                    #menuDiv {
                        width: 35%;
                        transition: .5s ease;

                        p {
                            font-size: 1.2em;
                        }

                        &:hover {
                            width: 45%;
                            cursor: pointer;
                        }
                    }
                }

                nav {
                    position: fixed;
                    top: 7dvh;
                    left: 100%;
                    height: 93dvh;
                    width: 100%;

                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;

                    transition: .5s ease;

                    .navItem {
                        width: 100%;
                        height: 10%;
                        border-top: 1px solid #000000;
                        border-bottom: 1px solid #000000;

                        .navItem-primary,
                        .navItem-secondary {
                            p {
                                font-size: 1.25em;
                            }
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 767px) {
            overflow-y: initial;
        }

        @media screen and (min-width: 767px) {
            &:hover {
                #inner-header {
                    #header-top {
                        top: -100%;
                    }

                    nav {
                        top: 0;
                    }
                }
            }
        }
    }
}