*{
    margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;
}

body{
    background: #111; color: #000; width: 100%; height: 100vh;
    display: flex; align-items: center; justify-content: center;
}

.clock-container{
    border-radius: 20px; min-width: 550px; background: #0a0f1c; color: #9ca3af;
    padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; gap: 25px;
}

header{
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
}

.left-side{
    display: flex; flex-direction: row; align-items: center; gap: 10px;
}

.right-side{
    display: flex; flex-direction: row; align-items: center;
}

.button{
    display: flex; flex-direction: row; align-items: center; gap: 12px;   
}

.clock-info{
    display: flex; flex-direction: column;
}

.Logo{
    color: #fff; font-size: 22px; padding: 15px; background: #15b7b9;
    border-radius: 10px; font-weight: 500; cursor: pointer;
}

.button{
    background: rgba(255, 255, 255, 0.05); border-radius: 150px; padding: 6px;
}

.btn{
    padding: 8px 12px; border-radius: 50px; font-size: 14px; cursor: pointer; 
}

.active{
    color: #15b7b9; background: rgba(255, 255, 255, 0.08); 
}

/* MAIN */

main{
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
}

main .time{
    color: #fff; font-size: 20px;
}

.date{
    display: flex; flex-direction: column; 
}

#day{
    display: flex; justify-content: flex-end;
}

footer{
    display: flex; flex-direction: row; justify-content: space-between; font-size: 14px;
    padding-top: 6px;
}