$backgroundColor: #ffffff;
$bodyColor: #000000;
$bodyFont: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 

body {
  background: $backgroundColor;
  color: $bodyColor;
  font-family: $bodyFont;
}

footer {
  margin-top: 20px;
  padding: 20px;
  text-align: center;
  font-size: 0.8em;
  color: #aaa;
  a {
    font-size: 1.5em;
  }
}
$primary-color: #3498db;
$today-color: #aa1e13;

h1 {
  color: $primary-color;
  text-align: center;
  a{
    text-decoration: none;
  }
  a:visited{
    color: $primary-color;
  }
}

.calendar {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
  font-family: Arial, sans-serif;

  .month {
    width: 100%; /* Full width on small screens */
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;

    h2 {
      color: $primary-color;
      margin-bottom: 10px;
    }

    .days {
      display: flex;
      flex-wrap: wrap;
    }

    .day {
      width: 14.28%; /* One-seventh of the container */
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #ddd;
      text-align: center;
      font-size: 1.2em;

      &.today {
        background-color: $today-color;
        color: #fff;
        font-weight: bold;
      }

      .emoji {
        
      }

      a {
        text-decoration: none;
        color: inherit;
      }
    }
  }

  @media (min-width: 600px) {
    .month {
      width: 48%; /* Two months per row on medium screens */
    }
  }

  @media (min-width: 768px) {
    .month {
      width: 31%; /* Three months per row on large screens */
    }
  }
}