.content_container {
    height: auto;
    width: 100%;
    background-color: rgb(3, 11, 10);
    display: flex;
    justify-content: center;
}
.explainer {
    width: 20%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-justify: inter-word;
}
.explainer button {
    width: 100%;
    padding: 2.5%;
    background-color: rgb(8, 99, 153);
    border: none;
    border-radius: 5px;
    transition: 0.4s;
}
.explainer button:hover {
    cursor: pointer;
    background-color: rgb(60, 139, 245);
}
.explainer button:hover + .rnd_explainer {
    display: block;
}
.rnd_explainer {
    width: 30%;
    position: absolute;
    left: 27%;
    background-color: rgb(8, 99, 153);
    text-align: left;
    text-justify: inter-word;
    border-radius: 15px;
    display: none;
}
.rnd_explainer p {
    margin: 5%;
}
.content {
    width: 60%;
    height: 300vh;
    margin: 5%;
}
.leerjaar {
    height: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: scroll;
}
.item_background {
    min-width: 400px;
    max-width: 400px;
    height: 97%;
    margin-right: 3%;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.item {
    text-decoration: none;
    background-color: rgba(30, 30, 30, 0.9);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20% 80%;
}
.item:hover {
    background-color: rgba(8, 99, 153, 0.95);
}
.item p {
    margin-left: 5%;
    margin-right: 5%;
}
.item h2 {
    text-align: center;
    color: rgb(60, 139, 245);
}

#OMRON {
    background-image: url('../Documents/Leerjaar 6/OMRON.png');
    max-width: 100%;
    margin-right: 0%;
}
#LFTC {
    background-image: url('../Documents/Leerjaar 5/230622-Flip-the-city.jpg');
}
#TDH {
    background-image: url('../Documents/Leerjaar 5/TerreDesHommes.png');
}
#CCHH {
    background-image: url('../Documents/Leerjaar 4/CCHH.jpg');
}
#RecyBank {
    background-image: url('../Documents/Leerjaar 4/Recyclingbank.png');
}
#ALF {
    background-image: url('../Documents/Leerjaar 3/ALF.png');
}
#AidS {
    background-image: url('../Documents/Leerjaar 3/Afval in de stad.jpg');
}
#MWO {
    background-image: url('../Documents/Leerjaar 3/Werkplaats.png');
}
#Intro_week_2 {
    background-image: url('../Documents/Leerjaar 2/Intro.png');
}
#Artcadia {
    background-image: url('../Documents/Leerjaar 2/customLogoartcadia.png');
}
#IBM {
    background-image: url('../Documents/Leerjaar 2/IBM.svg');
}
#NEMO_SALL {
    background-image: url('../Documents/Leerjaar 2/sall_page_cover.png');
}
#Intro_week_1 {
    background-image: url('../Documents/Leerjaar 2/Intro.png');
}
#Decathlon {
    background-image: url('../Documents/Leerjaar 1/Decathlon-logo.png');
}
#Eureka_Cup {
    background-image: url('../Documents/Leerjaar 1/logo-eureka-cup.svg');
}
#Plein_40_45 {
    background-image: url('../Documents/Leerjaar 1/Plein_40-45.jpg');
}
#EODOB {
    background-image: url('../Documents/Leerjaar 1/Covid-19-Coronavirus-logo.jpg');
}


@media screen and (max-width: 600px) {
    .content_container {
        display: flex;
        flex-direction: column;
    }
    .explainer {
        width: 80%;
        margin: 10%;
        height: auto;
    }
    .rnd_explainer {
        width: 100%;
        position: relative;
        left: 0%;
        margin-top: 5%;
    }
    .content {
        width: 90%;
    }
    .leerjaar {
        height: 450px;
    }
    .item_background {
        min-width: 300px;
        max-width: 300px;
    }
}