* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background: -webkit-gradient(linear, left top, right top, from(mediumpurple), to(lightsalmon));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), lightsalmon);
  background: -o-linear-gradient(left, rgb(255, 255, 255), lightsalmon);
  background: linear-gradient(to right, mediumpurple, lightsalmon); }

.title {
  text-align: center;
  color: #444; }
  
.calendar {
  background: #ffffff;
  width: 80%;
  max-width: 600px;
  margin: 1em auto;
  padding: .5em 0; }

  .calendar__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 2em;
    font-size: 1.2em;
    text-transform: uppercase; }
    
  .calendar__prev, .calendar__next {
    color: #9b9b9b;
    cursor: pointer;
    font-size: 1.3em; }

  .calendar__prev {
    margin-right: auto; }

  .calendar__next {
    margin-left: auto; }

  .calendar__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    font-size: 25px; 
    color: #39a900; }

  .calendar__dates {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-gap: 10px;
      font-size: 25px; 
      color: #9b9b9b; }

  .calendar__month {
    padding: .5em 1em;
    font-size: 30px; 
    color: #00324D;}

  .calendar__year {
    padding: .5em 1em;
    font-size: 20px; 
    color: #39a900;}

  .calendar__item {
    text-align: center;
    line-height: 2; }

  .calendar__today {
    background: #65f80280;
    color: #39a900;
    width: 100%;
    height: 100%;
    font-weight: bolder;
    border-radius: 50%;
    margin: auto; }

  .calendar__last-days {
    opacity: .3; }