*{    
    margin: 0;    
    box-sizing: border-box;    
    background-color: #FAFFF1;
    font-family: 'InterBlackItalic';
}



@font-face 
{    font-family: 'InterBlackItalic';    
    src: url('Inter-BlackItalic.ttf');  
}

nav{    
    width: 100%;    
    padding: 10px 0;    
    display: flex;    
    align-items: center;    
    content: space-between;
}
/* alleen de naam */
nav ul li a.webshopName{    
    font-size: 35px;    
    text-align: center;
}
/* contact en socialmedia */
nav ul li a.contact{    
    font-size: 20px;    
    align-items: center;
}

/* de div die in de nav staat om alles gecenterd te houden */
.centerNav{
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 60px;
}
/* geeft kleur aan de navigatie knoppen, ook als je er overheen hovert */
.centerNav a {    
    float: left;    
    background-color: #FFC09F;    
    color: #000000;    
    text-align: center;    
    padding: 14px 14px;    
    text-decoration: none;    
    font-size: 20px;  
}
.centerNav a:hover {    
    background-color: #E1AB8F;    
    color: black;  
    
}  

/* houdt de search bar de goede grootte */
nav ul li a.search{    
    padding: 14px 76px;
}
/* de div waar de nav in zit */
.topnav {    
    display: flex;    
    border-radius: 25px;    
    background-color: #FAFFF1;    
    overflow: hidden;  
    width: 100%;
}
/* zorgt ervoor dat de knoppen op een vaste plek van elkaar staan */
nav ul li{    
    border-radius: 25px;    
    display: inline-block;    
    list-style: none;    
    margin: 10px 16px;
    
}
/* zorgt ervoor dat de nav icoontjes dezelfde grootte hebben en in het midden staan */
li img{    
    
    height:20px;   
    background-color: #FFC09F;    
    align-items: center;    
}
li img:hover{ 
    background-color: #E1AB8F;     
}

/* zorgt ervoor dat de navigatie items rond zijn en een vaste afstand van elkaar hebben */
nav ul li a{    
    display: flex;    
    align-items: center;     
    border-radius: 25px;    
    text-decoration: none;    
    color: #333;    
    font-weight: 400;
} 
.contactNaam {
  width: 144px;
  margin: auto;
}

.kledingLijst{
  width: 240px;
  margin: auto;
}


figure {
    display: inline-block;
    background: #FFC09F;    
    border: 2px solid #E1AB8F;
    border-radius: 25px;
    box-shadow: 0 1px 2px #221919;
    margin: 0 5% 15px;
    padding: 15px;
    padding-bottom: 5px;
    width:90%;
    background:#FFC09F;
    opacity: 1;
    align-items: center;
    transition: all .3s ease;
}


  a.button{
    padding:10px;
    border-radius: 25px;
    background: #FF9FB0;
    margin:10px;
    display:block;
    text-align:center;
    color:#fff;
    transition:all 1s linear;
    text-decoration:none;
    text-shadow:1px 1px 3px #000000;
    border-bottom:3px solid #db7c8d;
    box-shadow:1px 1px 3px #000000;
  }
  a.button:hover{
    background:#e58f9f;
    border-bottom:3px solid #cf808f;
    color:#f1f2f3;
  }



  .product {
    display: flex;
    background: #FFC09F;
    border: 2px solid #E1AB8F;
    border-radius: 25px;
    padding: 15px;
    margin: 0 auto;
    width:90%;
    margin-bottom: 30px;
}

.product img {
    width: 400px;
    height: auto;
    border-radius: 25px;
    margin-right: 20px;
}

.productDetails {
    margin-top:200px;
    background-color: #FFC09F;
    color: #000000;
}

.productDetails h1 {
    margin: 0 0 10px;
    background-color: #FFC09F;
    color: #000000;
    height: auto;
    margin-left:21px;
}

a.button {
    padding: 10px;
    border-radius: 25px;
    background: #FF9FB0;
    margin-top: -20px;
    display: inline-block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 3px #000000;
    border-bottom: 3px solid #db7c8d;
    box-shadow: 1px 1px 3px #000000;
    transition: all 1s linear;
    margin-left: 21px;
}

a.button:hover {
    background: #e58f9f;
    border-bottom: 3px solid #cf808f;
    color: #f1f2f3;
}

figure img {
    display: flex;
    width: 400px;
    height: 100%;
    justify-content: space-between;
    border-radius: 25px;
    align-items: center;
  }

  .kledingMaat {
    display: flex;
    gap: 10px;
    background-color: #ffc09f;
    margin: 20px;
}
.kledingMaat span{
    background-color: #ffc09f;
}

/* zorgt dat de radio button onzichtbaar is */
.kledingMaat input[type="radio"] {
    display: none;
}

/* zorgt ervoor dat de label een vierkant is */
.kledingMaat label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #FFC09F; 
    color: #333;
    font-weight: bold;
    border: 2px solid #E1AB8F;
    border-radius: 10px;
    transition: background-color 0.3s;
}

/* veranderd de kleur als de knop is geselecteerd */
.kledingMaat input[type="radio"]:checked + label {
    background-color: #E1AB8F; 
    color: #000;
}

.productBeschrijving{
    background-color: #FFC09F;
    margin:100px;
    margin-top: 50px;
    width: 410px;
}
.productBeschrijving h2{
    background-color: #FFC09F;
    font-size: 18px;
}

@media screen and (max-width: 1300px) { 
    .centerNav{padding-left: 0px;}
  }
  @media screen and (max-width: 1240px) { 
    .centerNav{display:none;}
    .productDetails{margin-top:560px; margin-left: -400px;}
  }
  @media screen and (max-width: 1400px) { 
    .product img{width: 366px; height: 550px;}
  }
  @media screen and (max-width: 900px) {
    .productBeschrijving{margin-left:-380px; margin-top: 900px;}
   }