@media screen and (min-width: 300px) and (max-width: 399px) and (orientation: portrait) {
  
  html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}  
  
  
  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'hot hot hot hot'
    'main main main main';
    height:100vh;
  }


  .item1 {grid-area: header;
    height: 8vh;
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 5vh;
    font-size: 3vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 1fr; 
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 4vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2.5;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

 }


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

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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 5vh;
    font-size: 3vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 1fr; 
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 4vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2.5;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

}


@media screen and (min-width: 500px) and (max-width: 999px) and (orientation: portrait) {
  
  html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}  
  
  
  .container {
    display:grid;
    grid-template-areas:
    'header header header header'
    'space space space space'
    'hot hot hot hot'
    'main main main main';
    height: 100vh;
  }


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 10vh;
    font-size: 2vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 1fr; 
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 4vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2.5;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

 }


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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 12vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 10vh;
    font-size: 2vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 35vh; 
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 3vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2.5;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

 }

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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 5vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 9vh;
    font-size: 3vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 40vh; 
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 3vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

 }



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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 5vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 9vh;
    font-size: 2.5vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 40vh;
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 3vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

 }





@media screen and (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {

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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 9vh;
    font-size: 2vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 40vh;
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 2vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 3;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

}


 @media screen and (min-width: 1201px) and (max-width: 1300px) and (orientation: landscape) {

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


  .item1 {grid-area: header;
    height: 10vh;
    text-align: center;
    font-size: 8vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 9vh;
    font-size: 2vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 40vh;
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 2vw;
  border-radius: 1%;
  padding: 1vh;
  color: black;
  line-height: 3;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

}

@media screen and (min-width: 1301px) and (max-width: 1500px) and (orientation: landscape) {

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


  .item1 {grid-area: header;
    height: 5vh;
    text-align: center;
    font-size: 5vw;
    color: goldenrod;
  }

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

  .item3 {grid-area: hot;
    height: 10vh;
    font-size: 1.5vw;
    padding: 1vh;
    text-align: center;
  }

  .item4 {grid-area: main;
    height: 36vh;
    padding: 1vh;
    justify-content: space-between;
  }


 a {
  background-color: goldenrod;
  font-size: 2vw;
  border-radius: 1vh;
  padding: 1vh;
  color: black;
  line-height: 2;
  text-decoration: none;
  white-space: nowrap;
 }

 .blink-smooth {
  animation: blinker 10s linear infinite;
 }

 @keyframes blinker {
  60% {
    opacity: 0;
  }
 }

 @keyframes blinkBG {
  0% { background-color: red; }
  30% { background-color: transparent; }
  100% { background-color: red; }
 }

}