@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-VariableFont_wdth\,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}


body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #f5f3f3;
  z-index: -1;
}
.header {
    max-width: 1250px;
    margin: 0 auto;
    padding: 60px;
    background-color: #f5f3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    position: relative;
    .title{
        font-size: 40px;
        margin-bottom: 20px;
        margin-top: 0;
        font-weight: 900;
    }
    .link{
        color: #416FC4;
        text-decoration: none;
        position: relative;
        font-weight: 600;
    }
    .images{
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }
    .image{
        width: 200px;
        border-radius: 10px;
    }
    .line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #416FC4;
        left: 2px;
        bottom: 0;
    }
    @media (max-width: 1150px) {
        padding: 80px 20px;
    }
}

.text-media{
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    gap: 100px;
    .image{
        width: 100%;
        max-width: 500px;
        height: fit-content;
        border: 1px solid;
        border-radius: 10px;
    }
    .bold{
        font-weight: 600;
        margin-top: 15px;
    }
    .normal{
        margin-inline-start: 0;
    }
    .title{
        font-weight: 900;
        margin-top: 0;
    }
    .link {
        text-decoration: none;
        border: 1px solid;
        padding: 6px 10px;
        cursor: pointer;
        font-weight: 500;
        display: block;
        width: fit-content;
        background-color: black;
        color: white;
        border-radius: 5px;
    }

    .link:hover {
        background-color: white;
        color: black;
    }
    @media (max-width: 1150px) {
        flex-direction: column;
        gap: 10px;
        align-items: baseline;
        padding: 40px 20px;
    }
}


#vandijkkaas{
    .title{
        color: #49DCB0;
    }    
}

#legerdesheils{
    .title{
        color: #e8231a;
    }    
}


#iqip{
    .title{
        color: #e4003b;
    }    
}

#demonchy{
    .title{
        color: #34b18f;
    }    
}

#netstar{
    .title{
        color: #226e96;
    }    
}

#peacockia{
    .title{
        color: #8b2360;
    }    
}

#robsnel{
    .title{
        color: #d8182d;
    }    
}

#weid{
    .title{
        color: #01dcc2;
    }    
}

#framestory{
    .title{
        color: #1386b6;
    }    
}

#noordkroon{
    .title{
        color: #2D245A;
    }    
}

#woodlabs{
    .title{
        color: #875215;
    }    
}

#energievanzelf{
    .title{
        color: #C7D75B;
    }    
}

#smolke{
    .title{
        color: #EE7100;
    }    
}

#moduloo{
    .title{
        color: #c2b291;
    }    
}


#derodewinkel{
    .title{
        color: #BB481B;
    }    
}


#roomboter{
    .title{
        color: #AE9A65;
    }    
}


#oogvereniging{
    .title{
        color: #00008B;
    }    
}

#echttexelprodukt{
    .title{
        color: #27A655;
    }    
}



#hace{
    .title{
        color: #428DC4;
    }    
}


#socialelephant{
    .title{
        color: #D5506F;
    }    
}


#straatapp{
    .title{
        color: #295DD1;
    }    
}


#exposupply{
    .title{
        color: #28465C;
    }    
}


#superminorbros{
    .title{
        color: #BB8F57;
    }    
}

#snb{
    .title{
        color: #32A152;
    }    
}

#hse{
    .title{
        color: #007788;
    }    
}

#edsn{
    .title{
        color: #32A152;
    }    
}


#nfn{
    .title{
        color: #4EAF46;
    }    
}

#socialbubble{
    .title{
        color: #C590C0;
    }    
}

#flappybird{
    .title{
        color: #C5BA2A;
    }    
}


#unitymultiplayer{
    .title{
        color: #2ECBFE;
    }    
}


#bbhetkasteel{
    .title{
        color: #E3A323;
    }    
}

#pythonautomatisering{
    .title{
        color: #6c0095;
    }    
}

#filterbubblemachine{
    .title{
        color: #C590C0;
    }    
}

#junis{
    .title{
        color: #FAB80E;
    }    
}

#mthekwerken{
    .title{
        color: #34A853;
    }    
}


#peacock-ia{
    .title{
        color: #0C3F6C;
    }    
}