header {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;

    @media screen and (max-width: 979px) {
        flex-direction: row;
    }

    @media screen and (max-width: 500px) {
        padding: 1%;
    }

    #logo {
        aspect-ratio: 1/1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: 979px) {
            width: initial;
            height: 100%;
            aspect-ratio: initial;
            width: 30%;
        }

        a {
            width: 70%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;

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

            img {
                aspect-ratio: 1/1;
                width: 85%;
            }
        }
    }

    #middle {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

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

        #menuButton {
            transform: rotate(-90deg);
            /*border: 1px solid #FF0000;*/
            padding: 5% 10%;
            height: 6%;

            display: flex;
            align-items: center;
            justify-content: center;

            p {
                font-family: lato;
                font-size: 1.5rem;
                user-select: none;
            }

            img {
                aspect-ratio: 1/1;
                height: 100%;
                transform: rotate(90deg);
                display: none;
                user-select: none;
            }

            &:hover {
                cursor: pointer;
            }

            @media screen and (max-width: 979px) {
                display: none;
            }
        }

        #menuMobileButton {
            display: none;
            aspect-ratio: 1/1;
            height: 60%;
            border-radius: 50%;
            justify-content: center;
            align-items: center;

            img {
                aspect-ratio: 1/1;
                width: 75%;

                transition: transform .5s ease;
            }

            &:hover {
                cursor: pointer;
            }

            @media screen and (max-width: 979px) {
                display: flex;
            }
        }
    }

    #theme {
        width: 100%;
        /*border: 1px solid #FF0000;*/
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 20%;
        padding: 1%;

        @media screen and (max-width: 979px) {
            flex-direction: row;
            height: 100%;
            width: 30%;
        }

        .theme-selector {
            aspect-ratio: 1/1;
            border-radius: 50%;
            width: 65%;

            margin: 2%;
            padding: .25%;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 2px solid transparent;

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

            .innerSelector {
                aspect-ratio: 1/1;
                width: 75%;
                border-radius: 50%;
                /*background-color: #FF0000;*/
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 60%;
                }
            }

            &:hover {
                border: 2px solid var(--primary);
                cursor: pointer;
            }
        }

        #light {
            .innerSelector {
                background-color: #FFFFFF;
            }
        }

        #dark {
            .innerSelector {
                background-color: #000316;
            }
        }

        .selected {
            border: 2px solid var(--primary55);
        }
    }
}