.counter-wrapper {
  position: absolute;
  /* top: 35px; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    top: -35px;

    /* opacity: 0; */
    animation-name: fadeInOpacity;
    /* animation-iteration-count: 1; */
    animation-timing-function: ease-in;
    animation-duration: 1s;
    animation-delay: 7s;
    animation-fill-mode: backwards;
  }
  
  @keyframes fadeInOpacity {
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
    
    
    /* 0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    } */


}

#counter {
    display: flex;
    width: 250px;
    height: 50px;
    line-height: 50px;

    margin: 5px;
    text-align: left;
    align-items: left;
    justify-content: center;
    flex-direction: column;
    /* font-size: 3rem; */
    font-size: calc(34px + 6 * ((100vw - 320px) / 680));
    padding-left: 10px;
    padding-right: 10px;
    text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}
.counter-header {
    display: flex;
    width: 500px;
    height: 50px;
    line-height: 50px;

    margin: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* font-size: 3rem; */
    flex-direction: column;
    font-size: calc(14px + 6 * ((100vw - 320px) / 680));
    text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}
.counter-legend {
    display: flex;
    width: 500px;
    height: 50px;
    line-height: 50px;

    margin: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* font-size: 3rem; */
    font-size: calc(12px + 6 * ((100vw - 320px) / 680));
    text-shadow: 2px 3px 5px rgba(0,0,0,0.5);

}

.counter-outer {

  display: flex;
  width: 500px;
  height: 50px;
  line-height: 50px;

  margin: 5px;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* font-size: 3rem; */
  /* font-size: calc(34px + 6 * ((100vw - 320px) / 680)); */
  padding-left: 10px;
  padding-right: 10px;
  /* text-shadow: 2px 3px 5px rgba(0,0,0,0.5); */

}

@media only screen and (min-width: 270px) and (max-width:430px ) {
  .counter-wrapper {
    top: -80px;
  }

}

@media only screen and (min-width: 1010px) and (max-width:3000px ) {
  .counter-wrapper {
    top: -60px;
  }
  .counter-header {
    font-size: calc(22px + 6 * ((100vw - 300px) / 680));
    width: 700px;
    height: 60px;
    line-height: 80px;


  }


  .counter-legend {
    display: flex;
    width: 700px;
    height: 60px;
    line-height: 70px;

    margin: 5px;
    margin-top: 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* font-size: 3rem; */
    font-size: calc(12px + 6 * ((100vw - 240px) / 680));
    text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
  }


}