/* CSS Reset */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: Arial, sans-serif;

  background: #f4f4f4;

  color: #333;

  line-height: 1.6;

  padding: 20px;

}



header {

  text-align: center;

  margin-bottom: 20px;

}



header h1 {

  font-size: 2.5em;

  margin-bottom: 10px;

}



header p {

  font-size: 1.1em;

  color: #666;

}



.dashboard {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

}



.calendar-card {

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  padding: 15px;

  width: 320px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.calendar-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}



.calendar-card h2 {

  margin-bottom: 10px;

  font-size: 1.5em;

  text-align: center;

}



.date-time {

  font-size: 1.2em;

  margin-bottom: 10px;

  text-align: center;

  font-weight: bold;

}



.history {

  font-size: 0.9em;

  color: #555;

  text-align: justify;

}



@media (max-width: 600px) {

  .calendar-card {

    width: 100%;

  }

}