@media screen and (min-width: 300px) and (max-width: 399px) and (orientation: portrait) {
  
  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}  

  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 8vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 8vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 55vh;
  } 


  .item3 {grid-area: main;
  }


 table {
  border-spacing:1vw;
  text-align: center;
   width: 100%;
 }


 td {
  font-size: 5vw;
 }

}  


@media screen and (min-width: 400px) and (max-width: 699px) and (orientation: portrait) {

  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}  

  
  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 8vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 8vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 40vh;
  } 


  .item3 {grid-area: main;
  }



 table {
  border-spacing: 1vw;
  text-align: center;
   width: 100%;
 }


 td {
  font-size: 5vw;
 }

}


@media screen and (min-width: 700px) and (max-width: 999px) and (orientation: portrait) {

  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}  

  
  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 9vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 8vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 30vh;
  } 


  .item3 {grid-area: main;
  }



 table {
  border-spacing: 1vw;
  text-align: center;
   width: 100%;
 }


 td {
  font-size: 5vw;
 }

} 


@media screen and (min-width: 1000px) and (max-width: 1500px) and (orientation: portrait) {

  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}  

  
  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 10vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 8vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 30vh;
  } 


  .item3 {grid-area: main;
  }



 table {
  border-spacing: 1vw;
  text-align: center;
   width: 100%;
 }


 td {
  font-size: 5vw;
 }

}


@media screen and (min-width: 300px) and (max-width: 700px) and (orientation: landscape) {

  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
} 
  
  
    .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;

    height: 11vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 5vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 55vh;
  } 


  .item3 {grid-area: main;
    margin-left: 5vw;
  }


 table {
  border-spacing: 1vw;
  text-align: center;
 }


 td {
  font-size: 4vw;
 }

}


@media screen and (min-width: 701px) and (max-width: 999px) and (orientation: landscape) {

  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
} 
  
  
    .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 11vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 5vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 55vh;
  } 


  .item3 {grid-area: main;
    margin-left: 5vw;
  }



 table {
  border-spacing: 1vw;
  text-align: center;
 }


 td {
  font-size: 4vw;
 }

}

  
  
  @media screen and (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
  
  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
} 
  
  
    .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 17vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 8vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 65vh;
  } 


  .item3 {grid-area: main;
    margin-left: 27vw;
  }


 table {
  border-spacing: 1vw;
  text-align: center;
 }


 td {
  font-size: 2vw;
 }

}


 @media screen and (min-width: 1201px) and (max-width: 1500px) and (orientation: landscape) {
  
  html, body {
  width: 100%;
  margin: 0;
  padding: 0;
} 
  
  
    .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'main main main main';
  } 
  

  .item1 {grid-area: header;
    height: 17vh;
    border-bottom-left-radius: 1vh;
    border-bottom-right-radius: 1vh;
    background-color: goldenrod;
    text-align: center;
    font-size: 5vw;
    position: sticky;
    top: 0;
  }


  .item2 {grid-area: space;
  height: 65vh;
  } 


  .item3 {grid-area: main;
    margin-left: 27vw;
  }



 table {
  border-spacing: 1vw;
  text-align: center;
 }


 td {
  font-size: 2vw;
 }

}