body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(90deg,#301430,#7c4088);
  color:#fff;
 
}
.mcontaner{
 display:flex;
  justify-content:center;
  padding:20px;
}

.container {
  width: 700px;
  background: rgba(250, 249, 249, 0.1);
  padding: 21px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
h2 {
     text-align:center; 
     color:#09defa;
      margin-bottom:15px; 
    }

.calendar-header { 
    display:flex;
     justify-content:space-between; 
     align-items:center;
      margin-bottom:10px; 
    }
button {
     padding:5px 10px;
      border:none; 
      border-radius:6px;
       cursor:pointer; 
       background:#05dffc;
        color:#01273b;
        
        font-weight:600;
     }
button:hover { 
    background:#5ce9df;
 }
.calendar { 
    display:grid;
     grid-template-columns:repeat(7,1fr);
      gap:5px; 
    }
.day {
  background: rgb(51, 45, 45);
  padding:10px;
  border-radius:6px;
  text-align:center;
  cursor:pointer;
  position:relative;
  min-height:60px;
}
.day .mood { 
    font-size:20px; 
    margin-top:5px; 
}
.modal {
  position:fixed;
   top:0; left:0; 
   width:100%; 
   
   height:100%;
  background:rgba(0,0,0,0.7); 
  display:none; 
  justify-content:center; 
  align-items:center;
}
#deleteBtn{
 background:#fd4848;
 color:white;
}
.modal-content {
  background:#243b55; 
  padding:20px; 
  border-radius:10px; 
  width:300px; 
  text-align:center;
}
.modal-content textarea { 
    width:100%; 
    height:60px; 
    border-radius:6px; 
    border:none; 
    padding:5px; 
    margin-top:10px; 
    resize:none;
 }

.modal-content button {
     margin-top:10px; 
    }

        footer{
         text-align: center;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      background-color: #5c96b6;
    
    }