*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    font-family:Arial,sans-serif;

    background:linear-gradient(135deg,#0f172a,#334155);

    color:white;

}



h1{

    text-align:center;

    margin-top:40px;

    font-size:45px;

}



.container{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    padding:30px;

}



.card{

    width:320px;

    padding:25px;

    border-radius:20px;

    background:rgba(255,255,255,0.1);

    backdrop-filter:blur(15px);

    box-shadow:0 15px 30px rgba(0,0,0,.3);

    transition:.3s;

}



.card:hover{

    transform:translateY(-5px);

}



input,
textarea{

    width:100%;

    padding:12px;

    border-radius:10px;

    border:none;

    margin:10px 0;

}



textarea{

    height:100px;

    resize:none;

}



button{

    padding:12px 18px;

    border:none;

    border-radius:10px;

    background:#38bdf8;

    font-weight:bold;

    cursor:pointer;

}



button:hover{

    background:#7dd3fc;

}



#clock,
#timerDisplay,
#stopwatch{

    color:#38bdf8;

}



.note,
.task{

    background:rgba(255,255,255,.15);

    padding:12px;

    margin-top:10px;

    border-radius:10px;

}



.delete{

    background:#ef4444;

    color:white;

}