#hero { 
    background-color: #333;
    height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      position: relative;
}



#hero .title {
    position: absolute;
    top: 110px;
    color: white
}
#hero .title h3 {   border-top: 0;}
#timeCounter {
    position: absolute;
    bottom: 40%
}
#hero p {
    color: white;
     position: absolute;
    font-size: 1.2rem;
    bottom: 10%
}

 svg#clock { 
    width: 60%;
    height: 60%;
    margin: auto;
    display: block;
    }



 svg#clock circle {
    fill: #f2f2f2;
    stroke: #777;
}


@media screen and (max-width: 782px) {
    svg#clock {
        width: 90%;
        height: 90%;
    }
    #hero .title {
         top: 220px;
    }
    #hero p {
        bottom: 20%
    }
}