html {
  font-size: 62.5%;
}


#two:hover,
#four:hover,
#six:hover,
#eight:hover,
#ten:hover,
#twelve:hover {
  border: 5px double cyan;
}

.maincourse {
  display: grid;
  grid-template-columns: 50% 50%;
}

.maincourse>p{
  font-family: 'Rock Salt', cursive;
  justify-self: center;
  font-size: 3.6rem;
}

.maincourse>a {
  justify-self: center;
  font-size: 3.6rem;
  border: 1px solid #d6d9dc;
  border-radius: 5px;
}

/* media query*/
@media only screen and (max-width : 1024px){
  .maincourse {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  #one {
    grid-column: 1;
    grid-row: 1;
  }
  
  #two {
    grid-column: 1;
    grid-row: 2;
  }
  
  #three {
    grid-column: 1;
    grid-row: 3;
  }
  
  #four {
    grid-row: 4;
  }
  
  #five {
    grid-row: 5;
  }
  
  #six {
    grid-row: 6;
  }
  
  #seven {
    grid-row: 7;
  }
  
  #eight {
    grid-row: 8;
  }
  
  #nine {
    grid-row: 9;
  }
  
  #ten {
    grid-row: 10;
  }
  
  #eleven {
    grid-row: 11;
  }
  
  #twelve {
    grid-row: 12;
  }
  
}
@media only screen and (max-width : 768px){
  .maincourse> img {
    width: 50%;
    height: 50%;
  }
}
@media only screen and (max-width : 480px){
  .maincourse> img {
    width: 50%;
    height: 50%;
  }
  #one,#three,#five,#seven,#nine,#eleven {
    font-size: 1.6rem;
  }
}