html,body {
  height: 100%;
  width:100%;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  padding:0;
  margin:0;
  font-size: 50px;
}


.main{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    max-width: 800px;
    max-height: 720px;
    background-color: black;

}

.center{
    height: auto;
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.time{
    width:80%;
    background-image: url(timer.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height:120px;
    min-height: 120px;
    display: flex;
    align-items: flex-end;
    margin-top:70px;
}

.time-inside{
    display: flex;
    height:110px;
    align-items: center;
    justify-content: space-around;
    width:100%;
    margin:0 auto;
    margin-top:0px;
    border:2px solid black;
    border-radius: 15px;
    padding:25px 40px;
    background:black;
    border:4px solid #828282; 
    margin-bottom: -10px;
    padding-top:34px;
}


.time .colon{
   width: 8px;
   margin-bottom:20px;
}

.time .numbers{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.letter{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top:10px
}

.letter img{
    height: 10px;
}

.time .numbers > img{
    height:33px;
    margin-left:1.2px;
    margin-right: 1.2px;
}

.logo{
    max-width:180px;
    width:30%;
   
}

.lifetime{
    max-width:400px;
    width:60%;
    margin-top:80px;
}


@media screen and (max-width: 780px){

    .time{
        width:85%;
    }

    
}

@media screen and (max-width: 730px){

    .time{
        width:88%;
    }

    
}

@media screen and (max-width: 700px){

    .time{
        width:90%;
    }

    
}

@media screen and (max-width: 675px){

    .time-inside{
        padding:25px 20px;
        padding-top:34px;
}

}

@media screen and (max-width: 625px){

    .letter img{
        height: 9px;
    }
    
    .time .numbers > img{
        height:30px;
        margin-left:1px;
        margin-right: 1px;
    }

}

@media screen and (max-width: 585px){

    .letter img{
        height: 8px;
    }
    
    .time .numbers > img{
        height:28px;
        margin-left:1px;
        margin-right: 1px;
    }

    .time-inside{
        padding:25px 18px;
        padding-top:34px;
         height:100px;
         margin-bottom:6px;
    }

    .time .colon {
        width: 7px;
        margin-bottom: 17px;
    }

}

@media screen and (max-width: 530px){
    
    .time .numbers > img{
        height:25px;
        margin-left:1px;
        margin-right: 1px;
    }

    .time-inside{
        padding:25px 15px;
        padding-top:32px;
        margin-bottom:6px;
    }

}

@media screen and (max-width: 480px){

    .time .numbers > img{
        height:23px;
        margin-left:0.6px;
        margin-right: 0.6px;
    }

    .time-inside{
        padding:25px 15px;
        padding-top:32px;
        margin-bottom:6px;
    }

    .letter img{
        height: 7px;
    }

}

@media screen and (max-width: 450px){

    .time-inside{
        padding:25px 12px;
        padding-top:32px;
         height:94px;
         margin-bottom:16px;
    }

    .lifetime {
        max-width: 400px;
        width: 60%;
        margin-top: 35px;
    }

    .time {
        margin-top: 52px;
    }

    .letter img{
        height: 6.5px;
    }

    .time .colon {
        width: 5.5px;
        margin-bottom: 15px;
    }

}

@media screen and (max-width: 430px){

    

    .time .numbers > img{
        height:20px;
        margin-left:0.5px;
        margin-right: 0.5px;
    }

    .time-inside{
        padding:22px 10px;
        padding-top:29px;
         height:80px;
         margin-bottom:31px;
         border: 3px solid #828282;

    }

}

@media screen and (max-width: 386px){
    
    .time .colon {
        width: 5px;
        margin-bottom: 16px;
    }

    .time .numbers > img{
        height:19px;
        margin-left:0.5px;
        margin-right: 0.5px;
    }

    .lifetime {
        margin-top: 15px;
    }

    .time {
        margin-top: 40px;
    }

}

@media screen and (max-width: 360px){

    .time .numbers > img{
        height:18px;
        margin-left:0.5px;
        margin-right: 0.5px;
    }

    .time-inside {
       
        margin-bottom: 32px;
    }

}

@media screen and (max-width: 330px){
    
    .time-inside {
        padding-right: 5px;
        padding-left: 5px;
    }
  
}


@media screen and (max-width: 300px){

    .time .numbers > img{
        height:17px;
      
    }

}