body{
   padding: 0;
    margin: auto;
    background-color: #d3d3d3;
    width: calc(100% - 20px)
}

main{
  margin-top: 10px;
  box-shadow: 0 0 33px -4px black;
  overflow: hidden; 
  background-color:  #212b37;
  border-radius: 20px;
  }
  /*start elements*/
ul {
    list-style: none;
    margin: auto;
    position: relative;
    left: 10px;
  }
header {  
    text-align: center; 
    border-radius: 20px;
    background-color: #212b37;
    height: 90px;
    color: antiquewhite;
    }
h1{
   text-align: center;
   font-size: 4rem;
  }
h2  {  
  text-align: center; 
  font-size: 3rem;
  color: antiquewhite;
  }
h3{
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
}
p{
  font-size: 15px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  color: #ffffff;
  padding: 10px;  

}

  li:hover{
    box-shadow: 0 0 33px -4px black;
    transform: scale(1.05);
}
img {
  width: 40%;
  position: relative;
  display: block;
  padding: 30px;
  margin:auto;
}
.grid-item {
  border-radius: 20px;
  background-color: darkcyan;
  margin: 0px;
}
/* grid float*/

#grid-floats{
  padding: 0px;
  
}

#grid-floats li{
  float: left;
  height: 560px;
  margin: 5px;
} 
#grid-floats::after {
  content: "";
  clear: both;
  display: block;
}
/* grid flex*/

#grid-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}
#grid-flex li{
  margin: 5px;
  height: 560px;
} 
/* defult on desktop*/
li {
  width: calc(100%/4.2);
}
li:nth-child(1) {
  width: calc(97%/2);
}
/* ipad*/
@media (min-width: 768px) and (max-width: 1024px) {      
  li{
    width: calc(94%/3);
  }
  li:nth-child(-n+2) {
    width: calc(95%/2);
  }  
  ul {
   position: relative;
   margin: auto;
 }
}
/* iphone 6/7/8 plus*/

@media (max-width: 414px) {       
  li{
    width: 46%;
   
    
  }
  li:nth-child(1) {
    width: 96%;
   
  }
  
  ul{
    position: relative;
    left: 3.2px;
  }
 h2 {
   font-size: 2em;
 }
}