#menu {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: solid 2px var(--btn);
    min-height: 5dvw;
    background-color: #0000007a;
    label {
        padding: 1dvw;
    }
    ul {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        height: 100%;
        li {
            margin: 0 1dvw 0 1dvw;
        }
    }
}

#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 {
            word-break: break-all;
            font-weight: 400;
            font-size: 1.5em;
        }
    }
    ul {
        margin: 5vw 0 0 0;
        width: 50%;
        li {
            position: relative;
            background-color: #0000007a;
            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;
            }
            a:hover {
                background-color: var(--btn-dark);
            }
        }
    }
}

#posts {
    background-color: #0000007a;
    padding: 4dvw 0 4dvw 0;
    margin: 4dvw 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;

    ul {
        width: calc(100% - 5dvw);
        display: flex;
        flex-wrap: wrap;
        gap: 1.5vw;
        a {
            width: calc(33.33% - 1dvw - 2px);
            height: 30dvh;
            overflow: hidden;
            border-radius: 1dvw;
            li {
                overflow: hidden;
                width: 100%;
                background: rgb(15, 15, 15);
                display: flex;
                img {
                    width: 25dvh;
                    height: 30dvh;
                    object-fit: cover;
                }
                hgroup {
                    width: calc(100% - 25dvh);
                    label {
                        display: block;
                        width: 100%;
                        text-align: center;
                        font-size: 1.5em;
                        font-family: "Special Gothic Expanded One", sans-serif;
                        color: var(--btn);
                    }
                    h3 {
                        font-family: Arial;
                        display: block;
                        width: 100%;
                        text-align: right;
                    }
                    p {
                        font-family: Arial;
                        white-space: pre-wrap;
                    }
                }
            }
            box-shadow: 0 0 0 #000000;
        }
        a:hover {
            box-shadow: 0 0 5vw #84e9ffa7;
            z-index: 100;
        }
    }
}
