*{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: monospace,Arial;
}
body{
   
    background-image: url(corona_lf.png);
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    background-color: #130512;
    
    
}

.header{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.1vw;
    
   
}


.header .hearts img{
    
    width: 5vw;
}

.header .counter h1{

    font-size: clamp(1.5rem,3.5vw,5rem);
    color: white;
    text-align: center;
    
}

.line{
 
    background-color: rgb(231, 231, 231);
    height: 3px;
    box-shadow: 0px 0px 10px white;
    position: relative;
    top: 60vh;
    

    margin-bottom: 100px;

}
.input-container{
    position: relative;
    top: 60vh;
    
   text-align: center;
   z-index: 2;
}
input{
   
    
    
    
    outline: none;
    border: clamp(2px,1vw,10px) solid rgba(99, 99, 99, 0.411);
    width: 60%;
    text-align: center;
    font-size: clamp(1.2rem,3.2vw,4rem);
    border-radius: clamp(50px,10vw,100px);
    padding: 1vw;
    color: rgb(32, 32, 32);
    z-index: 2;
    
}

input:focus{
    caret-color: transparent;
}


.word-box{

   text-align: center;
   position: absolute;
   animation: wordBox linear 10s  forwards;
   z-index: -1;
  
   
}
.word-box h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: clamp(1rem,1.5vw,2rem);
    color: white;
    font-weight: 100;
    text-align: center;
    
}

.word-box img{
    
    width: clamp(110px,10vw,200px);
}

.welcome-container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3;
}
.welcome-card{

     background-color: rgba(255, 255, 255, 0.459);
     width: 310px;
     height: 400px;
     position: absolute;
     left:50%;
     top: 40%;
     transform: translate(-50%,-40%);
     text-align: center;
     padding: 10px;
     border-radius: 10px;

     display: flex;
     flex-direction: column;
     row-gap: 60px;
     color: aliceblue;
     border: 1px solid rgb(255, 255, 255);

}

.welcome-container .welcome-card h2{
    font-size: 30px ;
}
.welcome-container .welcome-card p{
    font-size: 20px ;
}
.welcome-container .welcome-card .btns{
    
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    
}
.welcome-container .welcome-card .btns button{
    
    text-align: center;
    padding: 5px 40px;
    font-size: 25px;
    background-color: rgba(0, 255, 0, 0.767);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.274);
    cursor: pointer;
    
}
.welcome-container .welcome-card .btns .music-container{
    
   display: flex;
   align-items: center;
   column-gap: 10px;
    
}
.welcome-container .welcome-card .btns .music-container input{
    border-radius: 0px;
   transform: scale(1.1);
    
}
.welcome-container .welcome-card .btns .music-container label{
    
  font-size: 22px;
    
}








@media screen and (max-width:2560px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 67vh;
        }
    }
}
@media screen and (max-width:1440px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 66vh;
        }
    }
}
@media screen and (max-width:1024px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 64vh;
        }
    }
}
@media screen and (max-width:768px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 65vh;
        }
    }

    .header .hearts img{
    
        width: 8vw;
    }
}

@media screen and (max-width:500px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 63vh;
        }

        
    }

    .header .hearts img{
    
        width: 10vw;
    }
}
@media screen and (max-width:375px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 63vh;
        }
    }

    .header .hearts img{
    
        width: 12vw;
    }
}
@media screen and (max-width:320px) {
    
    @keyframes wordBox {
    
        from{
            top: -10vh;
        }
        to{
            top: 63vh;
        }
    }

    .header .hearts img{
    
        width: 12vw;
    }
}