header {
    #h-top {
        border-bottom: 1px solid var(--broken-white);
        padding: .75%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65%;

        #searchBar {
            width: 30%;
            padding: .75% 1.25%;
            background-color: var(--broken-white);
            border-radius: 50px;
            display: flex;
            align-items: center;

            &:hover {
                cursor: pointer;
            }

            img {
                aspect-ratio: 1/1;
                width: 7%;
                margin-right: 2.5%;
                opacity: .5;
            }

            input {
                background: none;
                border: none;
                outline: none;
                width: 90%;
                font-family: lato;
                font-size: 1.1em;
            }
        }

        #h-account {
            display: flex;
            padding: 1%;
            height: auto;
        }
    }

    nav {
        background-color: var(--broken-white2);
        display: flex;
        height: 35%;

        .snItem {
            text-decoration: none;
            height: 100%;
            border-bottom: 3px solid var(--broken-white2);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .5% 2%;
            margin: 0 1%;

            p {
                color: var(--black);
                font-weight: 600;
            }

            &:hover {
                border-bottom: 3px solid var(--purple-main);

                p {
                    color: var(--purple-main);
                }
            }
        }

        .sni-selected {
            border-bottom: 3px solid var(--purple-main);

            p {
                color: var(--purple-main);
            }
        }
    }
}