style.css

body{
    background-color: hsl(0, 0%, 90%);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
    font-size: 3rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

#space{
    background-color: white;
    text-align: center;
    width: 35%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:9.5rem;
    border-radius:2rem ;
    border-color: black;
    border:solid;
}


#stopwatch_text{
    font-weight: bold;
    margin-bottom:1rem;
}

#display{
    height: 3.5rem;
    width: 17rem;
    margin-bottom:2rem ;
    border: none;
    /* background-color:red; */
    color:hsl(0, 0%, 29%);
    font-size: 3rem;
    text-align: center;
    margin-bottom:1rem;
    margin-top:1rem;
    font-weight: bold;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#buttons{
    display: flex;
}

#buttons button{
    width: 6rem;
    margin-left:1rem;
    min-height: 2.5rem;
    color: white;
    font-weight: bold;
}

#start{
    background-color: hsl(116, 100%, 39%);
    border: none;
    border-radius: 0.6rem;
}

#stop{
    background-color: hsl(10, 90%, 50%);
    border: none;
    border-radius: 0.6rem;
}

#reset{
    background-color: hsl(205, 88%, 60%);
    border: none;
    border-radius: 0.6rem;
}



#start:hover{
    background-color: hsl(116, 100%, 49%);
}
#start:active{
    background-color: hsl(116, 100%, 59%);
}

#stop:hover{
    background-color: hsl(10, 90%, 60%);
}

#stop:active{
    background-color: hsl(10, 90%, 70%);
    
}


#reset:hover{
    background-color: hsl(205, 88%, 70%);
}

#reset:active{
    background-color: hsl(205, 88%, 80%);
}


#stopwatch_text:hover{
    color:hsl(0, 1%, 32%);
}

#display:hover{
    color:hsl(0, 0%, 39%);
}