*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
    font-family: poppins;
}
body {
    min-height: 100vh;
    background: linear-gradient(-135deg,rgb(2, 25, 29),#fff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    color: white;
    background-color: rgba(255, 255, 255, 0.20);
    border-radius: 2em ;
    padding: 4em 3em;
}
.title {
    font-size: 3em;
}
hr{
    width: 100%;
    background-color: white;
    height: 5px;
    border-radius: 1em;
    border: none;
}
.timer{
    font-size: 10em;
    font-weight: 700;
}
.button-wrapper{
    display: flex;
    gap: 1em;
}
button{
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 0.5em 1.5em;
    border-radius: 8px;
    border-bottom: 4px solid rgba(0,0,0,0.35);
    border:none;
    color:white;
    cursor: pointer;
    transition:all 0.1s ease-in-out;
}
button:hover{
    transform: translateY(-10px);
}
button:active{
    transform: translateY(3px);
    border-bottom-width:1px ;
}
#start{
    background-color: hsl(100 ,89%,40%);

}
#stop{
    background-color: hsl(0,90%,45%);
}
#reset{
    background-color: hsl(209,89%,45%);
}
#start:hover{
    background-color: hsl(100,89%,50%);
}
#start:active{
    background-color: hsl(100,89%,65%);
}
#stop:hover{
    background-color: hsl(0,90%,55%);
}
#stop:active {
    background-color: hsl(0,90%,70%);
}
#reset:hover{
    background-color: hsl(209,89%,55%);
}
#reset:active{
    background-color: hsl(209,89%,70%);
}