
*{
    margin: 0px;
    padding: 0px;
}
body{
    max-width:100vw;
    max-height: 100vh;
    color: white;
    font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
    text-align: center;
}

#center-content{
    background-image: url("img/background-darker.jpg");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    width: 94vw;
    min-height:75vh;
    border: 8px solid white;
    border-radius: 10px;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-top: 3vw;
    box-shadow: 0px 0px 15px 2px #dddddd; 

}
#center-overlay{
    background-color: rgba(255,255,255,0.5);
    background-size: cover;
    box-sizing: border-box;
    width: 94vw;
    min-height:75vh;
    border-radius: 10px;
}
#inner-content{
    
    padding:10vmin;
}
h1,h2{
    font-family: Roboto, sans-serif;
    text-align: center;
    font-weight: normal;
    font-size:calc(12px + 2vmin);
    color:  #5c5956;
}
h2{
    color: white;
    margin-top:5vmin;
    font-size:calc(12px + 1.5vmin);
}
#counter{
    width:calc(70px + 10vmin);
    height:calc(70px + 10vmin);
    background-color: rgba(255,255,255,0.5);
    border-radius:50%;
    margin: auto;
    margin-top:20px;
    margin-bottom:20px;
}

p{
    color:  #5c5956;
}

#counter-circle{
    position:absolute;
    width:calc(70px + 10vmin);
    height:calc(70px + 10vmin);
    background-image:url(img/counter-circle.png);
    background-size: cover;
    -webkit-animation: rotating 4s linear infinite;
    -moz-animation: rotating 4s linear infinite;
    -ms-animation: rotating 4s linear infinite;
    -o-animation: rotating 4s linear infinite;
    animation: rotating 4s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  #counter-text{
    font-size:calc(35px + 8vmin);
    font-weight:bold;
    color:#5f5c59;
    padding-top: calc(15px + 0.5vmin);
  }
