/* ==========================
   BASE
========================== */

body{
font-family:'Quicksand',sans-serif;
background:linear-gradient(#ffeef4,#fff);
margin:0;
text-align:center;
color:#444;
}

h1{
margin-top:15px;
color:#ff6b9a;
}

/* ==========================
   TOPO
========================== */

.top-bar{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin:10px 0;
}

button{
background:#ff8fab;
border:none;
color:white;
padding:8px 12px;
border-radius:12px;
cursor:pointer;
font-family:'Quicksand';
transition:.2s;
}

button:hover{
background:#ff6b9a;
}

/* ==========================
   AVATAR
========================== */

#avatar{
font-size:60px;
animation:flutuar 3s infinite ease-in-out;
margin-bottom:5px;
}

@keyframes flutuar{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

/* ==========================
   XP
========================== */

#xpBar{
font-size:18px;
margin-bottom:10px;
}

/* ==========================
   CALENDÁRIO
========================== */

.calendar{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
padding:15px;
max-width:1200px;
margin:auto;
}

/* RESPONSIVO */

@media(max-width:900px){
.calendar{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:500px){
.calendar{
grid-template-columns:1fr;
}
}

/* ==========================
   DIA
========================== */

.day{
background:white;
border-radius:18px;
padding:12px;
box-shadow:0 6px 15px rgba(255,150,180,.3);
display:flex;
flex-direction:column;
min-height:420px;
}

/* TÍTULO DIA */

.day-title{
margin:0;
color:#ff6b9a;
font-size:18px;
}

/* DATA */

.day-date{
display:block;
font-size:14px;
color:#999;
margin-top:3px;
}

/* ==========================
   LISTA
========================== */

.day ul{
padding:0;
margin:0;
flex:1;
overflow-y:auto;
}

/* ==========================
   TAREFA COMPACTA
========================== */

li{
list-style:none;
background:#fff0f6;
margin:6px 0;
padding:8px;
border-radius:12px;
display:flex;
flex-direction:column;
gap:5px;
transition:.2s;
}

li:hover{
transform:scale(1.01);
}

/* TOPO */

.task-top{
display:flex;
justify-content:space-between;
align-items:center;
}

/* CORPO */

.task-body{
display:flex;
align-items:center;
gap:6px;
}

/* TEXTO */

textarea{
flex:1;
border:none;
background:transparent;
resize:none;
outline:none;
font-family:'Quicksand';
font-size:14px;
}

/* CHECK */

input[type="checkbox"]{
transform:scale(1.2);
cursor:pointer;
}

/* HORA */

input[type="time"]{
border:none;
background:#ffe4ec;
border-radius:6px;
padding:3px;
}

/* CONCLUÍDO */

.done textarea{
text-decoration:line-through;
opacity:.6;
}

/* LIXEIRA */

.trash{
cursor:pointer;
font-size:18px;
opacity:.7;
transition:.2s;
}

.trash:hover{
opacity:1;
transform:scale(1.2);
}

/* ==========================
   BOTÕES FLUTUANTES
========================== */

.floating-buttons{
position:fixed;
bottom:20px;
right:20px;
display:flex;
flex-direction:column;
gap:10px;
}

/* ==========================
   MODAL
========================== */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
justify-content:center;
align-items:center;
z-index:10;
}

.modal-content{
background:white;
padding:20px;
border-radius:15px;
width:90%;
max-width:400px;
}

.fechar{
cursor:pointer;
float:right;
font-size:20px;
}

/* ==========================
   SCROLL BONITO
========================== */

ul::-webkit-scrollbar{
width:6px;
}

ul::-webkit-scrollbar-thumb{
background:#ffc2d1;
border-radius:10px;
}