* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a[href="catalog.html"] {
    color: var(--secondary-detail-color)
}

.hidden {
    display: none;
}

main {

    background-image: url(../assets/efmbg1.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;


    form {
        display: flex;
        padding: 0 20px;
        justify-self: center;
        gap: 10px;
        width: 100%;

        select,
        ::picker(select) {
            appearance: base-select;
        }

        select {
            width: 100%;
            align-items: center;

            border-radius: 5em;
            border: .1em solid var(--text-color-darkbg);
            background-color: var(--primary-detail-color);
            color: var(--text-color-darkbg);

            &:hover {
                border-color: var(--secondary-detail-color);
                background-color: var(--secondary-detail-color);
                color: var(--text-color-darkbg)
            }

            &:open::picker-icon {
                height: .5em;
                width: .5em;
                background-color: white;
                rotate: x 180deg;
            }

            option {
                background-color: var(--secondary-detail-color);
                padding-top: .5em;
                border: .01em solid var(--text-color-darkbg);
                color: white;

            }

            option:hover {
                background-color: var(--primary-detail-color);
            }

            option:focus {
                background-color: var(--primary-detail-color);
            }

            option:checked {
                font-weight: bold;
            }

            option::checkmark {
                order: 1;
                margin-left: auto;
            }

            option:first-of-type {
                border-radius: 8px 8px 0 0;
            }

            option:last-of-type {
                border-radius: 0 0 8px 8px;
            }



            option:not(option:last-of-type) {
                border-bottom: none;
            }

        }

        ::picker-icon {
            content: "";
            height: .5em;
            width: .5em;
            background-color: white;
            clip-path: polygon(0 0, .5em 0, 50% 100%);
            transition: .3s;
        }

        ::picker(select) {
            border-radius: 8px;
            
        }

        .search {
            width: 100%;
            flex-grow: 1;
            

            input {
                border: .1em solid var(--text-color-darkbg);
                border-radius: 5em;
                height: 1.9em;

                &:hover {
                    border-color: var(--secondary-detail-color);
                    background-color: var(--secondary-detail-color);
                    color: var(--text-color-lightbg)
                }
            }

        }
    }

    /* lijst met artikelen */

    ul {
        display: grid;
        gap: 4em;
        margin: 4em;
        padding: unset;


        @media (min-width: 1000px) {
            grid-template-columns: 1fr 1fr;

        }

        li {
            list-style-type: ' ';
            list-style-image: unset;
        }
    }

    article {
        --art-layout:
            "heading img"
            "paragraaf img";

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto max-content;

        grid-template-areas: var(--art-layout);

        column-gap: 1em;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 10px black;
        backdrop-filter: blur(4px);
        background-color: #001B3299;

        &:nth-of-type(even) {
            grid-template-areas: var(--art-layout);
        }


        img {
            grid-area: img;
            width: 100%;
            display: flex;
            align-self: center;
        }

        h2 {
            margin: 15px 0 0 10px;
            grid-area: heading;
            color: var(--text-color-darkbg);
            text-shadow: 2px 2px 2px black;
        }

        p {
            margin: 0 0 0 10px;
            grid-area: paragraaf;
            color: var(--text-color-darkbg);
            text-shadow: 2px 2px 2px black;
        }

        &:hover {
            transform: scale(1.05);
            transition: .2s;
            cursor: pointer;
        }

        /* .meer {
            grid-area: button;
            justify-self: end;
            align-self: end;
            border-top: solid white 1px;
            border-left: solid white 1px;
            box-shadow: 3px 3px 8px black;
            border-radius: 5px;
            width: fit-content;
            height: fit-content;
            padding: 0.3em;
            text-decoration: none;
            color: var(--text-color-darkbg);
            text-shadow: 2px 2px 2px black;

            &:hover {
                background-color: var(--secondary-detail-color);
            }
        } */
    }
}