body {
background-color: #77BEF0;
font-family: poppins;

 button { height: 36px;
        width: 80px;
    margin-left: 35% ;
    border-radius: 40px;
  color: white;
  background-color: black;
}

a:link, a:visited {
color: white;
  text-decoration: none;
    
}
}

 header { 
background-color: #EA5B6F;
 border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(17, 14, 19); 
 box-shadow: rgba(7, 6, 7, 0.931) 5px 5px, rgb(15, 13, 14) 10px 10px;
 margin-bottom: 3em;
 margin-top: 1em;

 grid-column-start: 1;
    grid-column-end: -1;
}

h1 {text-align: center;}



/* scherm telefoon */
@media screen and (max-width: 800px) {
    img { width: 20em;
     height: auto;
    padding: 0%;   
    border-radius: 10px;
      margin-left: 70px;
      border-width: 2px;
    border-style: solid;
    border-color: rgb(17, 14, 19);
    margin: 8%;
    box-shadow: rgba(7, 6, 7, 0.931) 5px 5px, rgb(15, 13, 14) 10px 10px;



    }
}


@media only screen and (min-width: 800px) { body {


header {width: 50%;
margin-left: 25%;}

.container {

    display: grid; 
    gap: 0.7em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    img { width: 19em;
     height: auto;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(17, 14, 19);
    box-shadow: rgba(7, 6, 7, 0.931) 5px 5px, rgb(15, 13, 14) 10px 10px; 
    margin-bottom: 1em;}   

}
    
    
.pic1 { grid-column-start: 1;} 

.pic2 { grid-column-start: 3 ;
grid-row-start: 1;}
.pic3 { grid-column-start: 5 ;
grid-row-start: 1;}
.pic4 { grid-column-start: 2 ;
grid-row-start: 2;}
.pic5 { grid-column-start: 4 ;
grid-row-start: 2;}
.pic6 { grid-column-start: 1 ;
grid-row-start: 3;}
.pic7 { grid-column-start: 3 ;
grid-row-start: 3;}
.pic8 { grid-column-start: 5 ;
grid-row-start: 3;}
.pic9 { grid-column-start: 2 ;
grid-row-start: 4;}
.pic10 {grid-column-start: 4;
grid-row-start: 4;}
.pic11 { grid-column-start: 1 ;
grid-row-start: 5;}
.pic12 { grid-column-start: 3 ;
grid-row-start: 5;}
.pic13 { grid-column-start: 5 ;
grid-row-start: 5;}
.pic14 { grid-column-start: 2 ;
grid-row-start: 6;}
.pic15 { grid-column-start: 4 ;
grid-row-start: 6;}
.pic16 { grid-column-start: 1 ;
grid-row-start: 7;}
.pic17 { grid-column-start: 3 ;
grid-row-start: 7;}
.pic18 { grid-column-start: 5 ;
grid-row-start: 7;}
.pic19 { grid-column-start: 2 ;
grid-row-start: 8;}
.pic20 { grid-column-start: 4 ;
grid-row-start: 8;}
.pic21 { grid-column-start: 1 ;
grid-row-start: 9;}
.pic22 { grid-column-start: 3 ;
grid-row-start: 9;}
.pic23 { grid-column-start: 5 ;
grid-row-start: 9;}
.pic24 { grid-column-start: 2 ;
grid-row-start: 10;}
.pic25 { grid-column-start: 4 ;
grid-row-start: 10;}
.tom {grid-column-start: 1;}
.yassine {grid-column-start: 3;
grid-row-start: 12;}

.but1 {grid-column-start: 1;}
.but2 {grid-column-start: 3;}
.but3 {grid-column-start: 5;}
.but4 {grid-column-start: 2;}
.but5 {grid-column-start: 4;}
.but6 {grid-column-start: 1;}
.but7 {grid-column-start: 3;}
.but8 {grid-column-start: 5;}
.but9 {grid-column-start: 2;}
.but10 {grid-column-start: 4;}
.but11 {grid-column-start: 1;}
.but12 {grid-column-start: 3;}
.but13 {grid-column-start: 5;}
.but14 {grid-column-start: 2;}
.but15 {grid-column-start: 4;}
.but16 {grid-column-start: 1;}
.but17 {grid-column-start: 3;}
.but18 {grid-column-start: 5;}
.but19 {grid-column-start: 2;}
.but20 {grid-column-start: 4;}
.but21 {grid-column-start: 1;}
.but22 {grid-column-start: 3;}
.but23 {grid-column-start: 5;}
.but24 {grid-column-start: 2;}
.but25 {grid-column-start: 4;}

}


.wrapper {
    display: grid; 
    gap: 0.7em;
    grid-template-columns: 1fr 1fr 1fr ;
    img { width: 30em;
     height: auto;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(17, 14, 19);
    box-shadow: rgba(7, 6, 7, 0.931) 5px 5px, rgb(15, 13, 14) 10px 10px; 
    margin-bottom: 1em;}   
}

.focus {
margin-left: 2em;
}
.food {
grid-column-start: 4;
grid-row-start: 2;
margin-right: 2em;
}

.health {
grid-row-start: 3;
grid-column-start: 1;
margin-left: 2em;
}

.needs {    
grid-row-start: 4;
grid-column-start: 4;
margin-right: 2em;
}

.view {
grid-row-start: 5;
grid-column-start: 1;
 margin-left: 2em;
}

.focustekst {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
}

.foodtekst {
grid-row-start: 2;
grid-column-start: 2;
text-align: right;
}

.healthtekst {
grid-row-start: 3;
grid-column-start: 2;
}

.needstekst {
grid-row-start: 4;
grid-column-start: 2;
text-align: right;

}

.viewtekst {
grid-row-start: 5;
grid-column-start: 2;    
}

article {
width: 25em;
margin-left: 6em;
padding-top: 20%;
grid-column: span 2;
}
}