#menu {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: solid 2px var(--btn);
    min-height: 5dvw;
    background-color: var(--blackglass);

    label {
        margin: 0 0 0 1dvw;
        width: 5dvh;
        height: 5dvh;
        background-color: var(--font);
        background-image: url("../assets/favicon.png");
        background-position: center;
        background-size: 4dvh;
        background-repeat: no-repeat;
        border-radius: 100%;
    }

    ul {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        height: 100%;
        li {
            margin: 0 1dvw 0 1dvw;
            color: var(--bg-dark);
        }
        li:hover {
            color: var(--btn);
        }
    }
}

#search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 25dvw;

    hgroup {
        width: 60%;
        h1 {
            color: var(--btn);
            text-align: center;
            font-family: "Public Sans", sans-serif;
            font-size: 3em;
            font-weight: 900;
        }
        label {
            margin: 2dvw 0 0 0;
            display: flex;
            text-align: center;
            word-break: break-all;
            font-weight: 400;
            font-size: 1.5em;
        }
    }
    ul {
        margin: 5vw 0 0 0;
        width: 50%;
        li {
            position: relative;
            border-radius: 100vw;
            border: solid 2px var(--btn);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1dvw;
            width: 100%;
            input {
                width: 90%;
                font-size: 1em;
                /*text-align: center;*/
                background: transparent;
                border: none;
            }
            input:focus {
                outline: none;
            }
            a {
                position: absolute;
                right: 0dvh;
                background: var(--btn);
                border-radius: 100vw;
                cursor: pointer;
                margin: 0.5dvw;
                width: 3dvw;
                height: 3dvw;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.3s;
                span {
                    color: var(--bg-dark);
                }
            }
            a:hover {
                background-color: var(--btn-dark);
                span {
                    color: var(--font);
                }
            }
        }
    }
}