*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background-color:rgb(8, 8, 8);
   padding-top: 5% ;
   padding-left: 33%;
}

 .first .btn{
    padding: 10px 15px;
    color:aliceblue;
    background-color: #202020;;
} 

.timer{
    height:60vh;
    width:550px;
    display:flex; 
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-color: #202020;
    border: 3px solid blueviolet;
    border-radius: 15px;
    box-shadow:0px 0px 10px rgba(57, 223, 229, 0.5);
    overflow: hidden;
}
.timer #display{
    height:10vh;
    width: 100%;
    color:white;
    text-align: center;
    font-size: 40px;
    line-height: 10vh;
}
.timer form{
    height: 35vh;
    width: 100%;
    background-color:#201c1c;
    line-height: 45vh;
    text-align: center;
}
.timer form input{
    width: 130px;
    border: none;
    outline: none;
    border-bottom: 3px solid blueviolet;
    color: aqua;
    background-color: transparent;
    font-size: 50px;
    text-align: center;
}
.timer form input::placeholder{
    font-size: 20px;
    color: blueviolet;
    font-weight: bolder;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.buttons{
    width:100%;
    height:15vh;
    display: flex;
    justify-content: space-around;    
    align-items:center ;
}
.timer .buttons button{
    padding: 15px 10px;
    font-size: 25px;
    background-color: #292828;
    color: white;
    cursor: pointer;
}
.timer .buttons button:hover{
    background-color: rgb(10, 10, 10);
    color: aqua;
}