*, *::before, *::after {box-sizing: border-box;}

:root{
    font-family: "Fredoka", sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    --bg: #FFFDFF;
    --primary: #202026;
    background-color: var(--bg);
    color: var(--primary);

}


.container{
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
header{
    background-color: #00002e;
    color: var(--bg);
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0rem;
    margin: 0 0 0 -2em ;
    
}
nav a{
    display: inline-block;
    padding: 1em 2em ;
    color: inherit;
    text-decoration: none;
}
.row{
    display: flex;
    gap: 2em;

    > * {
        padding: 1rem;
        border: 1px dashed blue;
        flex: 1 1 auto;
    }

    > *:first-child{
        flex-grow: 2;
    }
}
.visually-hidden{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
main{
    
    .cards{
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .cards li{
        background-color: white;
        border: solid black;
        border-radius: .5em;
        box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2), 0 0 2rem rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.2s;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;

        picture{
            order: -1;
        }

        img{
            width: 100%;
        }
        .content{
            padding: 1rem;

        } 
        h3{
            margin: 0;
        }
        
    
    }
    .cards li:hover{
        transform: scale(1.05);
        box-shadow: 0 0 1rem blue;
    }
    .cards img{
        height: auto;
    }
    .content{
        padding: 1rem;
    } 
    .overlay-link{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: white;
        display: none;
        justify-content: center;
        align-items: center;

    }
    .cards li:hover .overlay-link{
        display: flex;
        text-indent: -1000px;
    }
}
@media screen and (min-width: 40em) {
    .cards li{
        flex: 0 1 calc(33% - 1.33rem);
        min-width: 18rem;
    }
    
}
.mylink::before{
    content: url(./bronbestanden/deleteicon.png);
}
.mylink a{
    color: #ed0000;

}
.mybutton a{
    display: inline-block;
    padding: 0.5rem;
    text-decoration: none;
    color: #FFFDFF;
    background-color: green;
    border-radius: 0.625rem;
}