body {
    background-color: #bde0fe;
    
}

article {margin-left:  15%;}

h1 {color: #ffd670;
    text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
}

/* 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;

}

h1 {
    font-size: 70px;
    margin-left: 10%;

    
}

}
/* sherm tablet */
@media only screen and (min-width: 800px) {  body {
   
    display: grid; 
    gap: 0.5em;
    grid-template-columns: 1fr 1fr;
   margin: 8%;
     margin-left: 20px;
}

h1 {
    grid-column-start: 1;
    grid-column-end: -1;
    font-size: 8em;
    text-align: center;
   
 
}

img{
    width: 18em;
    height: auto;
    padding: 0%;   
    border-radius: 10px;
    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;
    
}


.pic1 { grid-column-start: 1;}
.pic2 { grid-column-start: 3 ;}
.pic3 { grid-column-start: 2 ;}
.pic4 { grid-column-start: 1 ;}
.pic5 { grid-column-start: 3 ;}
.pic6 { grid-column-start: 2 ;}
.pic7 { grid-column-start: 1 ;}
.pic8 { grid-column-start: 3 ;}
.pic9 { grid-column-start: 2 ;}
.pic10 { grid-column-start: 1 ;}
.pic11 { grid-column-start: 3 ;}
.pic12 { grid-column-start: 2 ;}
.pic13 { grid-column-start: 1 ;}
.pic14 { grid-column-start: 3 ;}
.pic15 { grid-column-start: 2 ;}
.pic16 { grid-column-start: 1 ;}
.pic17 { grid-column-start: 3 ;}
.pic18 { grid-column-start: 2 ;}
.pic19 { grid-column-start: 1 ;}
.pic20 { grid-column-start: 3 ;}

.focus{ grid-column-start: 1;}
.food{ grid-column-start: 3;}
.food {grid-row-start: 16;}
.health {grid-column-start: 2;}
.health {grid-row-start: 17;}
.needs {grid-column-start: 1;}
.needs {grid-row-start: 18;}
.view {grid-column-start: 3;}
.view {grid-row-start: 18;}


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

.foodtekst {grid-column-start: 3;}

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

.needstekst { grid-column-start: 1;}
.viewtekst {grid-column-start: 3;}
}


    
/* scherm desktop */
@media only screen and (min-width: 992px) { body {
   
    display: grid; 
    gap: 0.5em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

   margin-left: 70px
}

h1 {
    grid-column-start: 1;
    grid-column-end: -1;
    font-size: 8em;
    text-align: center;
   
  
 
}

img{
    width: 18em;
    height: auto;
    padding: 0%;   
    border-radius: 10px;
    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;
}

.pic2 { grid-column-start: 3 ;}
.pic3 { grid-column-start: 5 ;}
.pic4 { grid-column-start: 2 ;}
.pic5 { grid-column-start: 4 ;}
.pic6 { grid-column-start: 1 ;}
.pic7 { grid-column-start: 3 ;}
.pic8 { grid-column-start: 5 ;}
.pic9 { grid-column-start: 2 ;}
.pic10 { grid-column-start: 4 ;}
.pic11 { grid-column-start: 1 ;}
.pic12 { grid-column-start: 3 ;}
.pic13 { grid-column-start: 5 ;}
.pic14 { grid-column-start: 2 ;}
.pic15 { grid-column-start: 4 ;}
.pic16 { grid-column-start: 1 ;}
.pic17 { grid-column-start: 3 ;}
.pic18 { grid-column-start: 5 ;}
.pic19 { grid-column-start: 2 ;}
.pic20 { grid-column-start: 4 ;}

.focus{ grid-column-start: 1;}
.food{ grid-column-start: 5;}
.food { grid-row: 11;}
.health {grid-column-start: 3;}
.health {grid-row-start: 12;}
.needs {grid-column-start: 1;}
.needs {grid-row-start: 13;}
.view {grid-column-start: 5;}
.view{ grid-row-start: 13;}

.focustekst{grid-row-start: 12; }
.focustekst {grid-column-start:1;}

.foodtekst {grid-column-start: 5;}
.foodtekst {grid-row-start: 12;}

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

.needstekst { grid-column-start: 1;}
.viewtekst {grid-column-start: 5;}
}