*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html{
    height: 100%;
    width: 100%;
    background:
    linear-gradient(
        135deg,
        #eef2ff,
        #f8fafc,
        #ffffff
    );
}

main{
    height: 100%;
    width: 100%;
    background-color: whitesmoke;
    padding: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav{
    padding:20px;
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,80,155);
    color: white;
    border-radius: 10px;
    margin-bottom: 20px;
}


.nav-right{
    display:flex;
    gap:1px;
    align-items:center;
}

#toggle{
    width:45px;
    height:45px;
    border-radius:50%;
    padding:0;
    font-size:18px;
    gap: 10px;
}


button{
    padding: 10px 25px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.tasks{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tasks-section{
    max-width:1000px;
    margin:30px auto;
}

.task-card{
  width:300px;
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    width: 25%;
    height: 150px;
}

.task-card h3{
    font-size:28px;
    margin-bottom:15px;
}

.text{
    display:flex;
    flex-direction: column;
    gap:5px;
}

.btns{
  margin-top:10px;
    display:flex;
    justify-content:space-between;
}

.update{
    background-color: darkgoldenrod;
    color: white;
}

.delete{
    background-color: darkred;
    color: white;
}

.form{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.716);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    gap: 10px;
}

form{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 15px;
}

input{
    padding: 10px;
    outline: none;
    border: 1px solid gray;
    border-radius:10px;

}

.close{
    align-items: flex-end;
}

select{
    padding: 10px;
    outline: none;
    border: 1px solid gray;
    border-radius: 10px;
}


/*toggle button*/

.dark{
    background-color: #121212;
    color: white;
}

.dark main{
    background-color: #121212;
}

.dark .task-card{
    background-color: #1e1e1e;
    color: white;
}

.dark nav{
    background-color: #222;
}

.dark form{
    background-color: #1e1e1e;
    color: white;
}

.dark input,
.dark select{
    background-color: #333;
    color: white;
    border: 1px solid #555;
}

/*greeting section*/
.greeting{
   width:100%;
   padding:25px;

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

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border:1px solid rgba(255,255,255,0.2);

    border-radius:20px;

    box-shadow:
    0 8px 32px rgba(31,38,135,0.15);

    text-align:center;

    max-width:700px;
    margin:0 auto 25px auto;
}

/*statistics*/
.stats{
    display:flex;
    gap:20px;
    margin-top:20px;
}

.stat-box{
    flex:1;
    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(15px);

    border-radius:20px;

    border:1px solid rgba(255,255,255,0.2);

    transition:0.3s;

    min-height:100px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:20px;
}

.stat-box p{
    font-size:28px;
    font-weight:700;
}

.pending{
     border-left:5px solid #facc15;

    box-shadow:
    0 0 20px rgba(250,204,21,.4);
}

.completed{
   border-left:5px solid #22c55e;

    box-shadow:
    0 0 20px rgba(34,197,94,.4);
}

.total{
    border-left:5px solid #3b82f6;

    box-shadow:
    0 0 20px rgba(59,130,246,.4);
}

/*recent-tasks*/
.recent-title{
    margin-bottom:20px;
    align-items:center;
    display:flex;

}
.recent-header{
    width:fit-content;

    padding:12px 25px;

    margin:30px 0 20px 0;

    border-radius:15px;

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

    backdrop-filter:blur(12px);

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}
/*dashboard*/
.dashboard{
    max-width:900px;
    margin: 20px auto;
}

/*imp*/
.circle{
    width: 20px;
    height:25px;

    border-radius:50%;

    margin-bottom:10px;
}

.yellow{
    background:#facc15;

    box-shadow:
    0 0 15px #facc15;
}

.green{
    background:#22c55e;

    box-shadow:
    0 0 15px #22c55e;
}

.blue{
    background:#3b82f6;

    box-shadow:
    0 0 15px #3b82f6;
}

/*glassmorphism*/
.task-card{

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

    backdrop-filter: blur(15px);

    border-radius:20px;

    border:1px solid rgba(255,255,255,.2);

    padding:15px;

    transition:.3s;
    width: 320px;
    min-height: 180px;
}

.task-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 30px rgba(255,255,255,.15);
}

/*complete sattus-*/
.task-card.completed{
    border-left:5px solid #22c55e;
}

.task-card.pending{
    border-left:5px solid #facc15;
}

.task-card.incomplete{
    border-left:5px solid #ef4444;
}


.task-details{
    display:none;
}

.show{
    display:block;
}