style.css

@charset "utf-8";

body{
    background-color: #86275c;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top:50px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.clock{
    border:3px solid black;
width:300px;
height:300px;
background-color: #272727;
border-radius:20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.clock h1{
    font-size:26px;
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
}

.clock #star{
    font-size:30px;
}

.btns{
    width:250px;
    height:20px;
    border-radius:20px;
    position: absolute;
    top:290px;
    background-color:#ffffff;
    display: flex;
    gap:20px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.btnsc{
    width:250px;
    height:20px;
    border-radius:100px;
    background-color:#ffffff;
}

.btn{
    font-size:20px;
    width:40px;
    height:40px;
    border-radius: 50px;
    border:none;
    transition: .2s;
}

.btn:hover{
 transform:scale(1.2);
}

.display{
    padding-bottom:30px;
    font-size:35px;
display: flex;
  border:3px solid black;
justify-content:center;
align-items: center;
width:250px;
height:150px;
border-radius:20px;
background-color:#ffffff;
}

footer{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-top:30px;
    font-size:24px;
    text-align: center;
    flex-direction: column;
    display: flex;
    gap:20px;
    color:#000;
}

.icons {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap:30px;
    color:#000;
     transition:.3s;
}
a{
    color:#000;
   
}

.icons i:hover{
transform: scale(1.1);
}