/* Import Google Font - Poppins */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
  }

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: gray;
  }

  /* #wrapper */
  #wrapper {
      background-color: #fff;
      width: max-content;
      border-radius: 10px;
  }

  /* wrapper header */
  #wrapper header {
      display: flex;
      justify-content: space-between;
      padding: 25px 30px 10px;
  }

  /* header #currentDate */
  header #currentDate {
      font-size: 1.45rem;
      font-weight: 500;
  }

  /* header #icons span i */
  header #icons span i {
      height: 38px;
      width: 38px;
      margin: 0 1px;
      text-align: center;
      line-height: 38px;
      border-radius: 50%;
      cursor: pointer;
      color: #878787;

  }

  header #icons span {
      font-size: 1.9rem;
  }

  header #icons span i:hover {
      background-color: #f2f2f2;
  }

  #calendar {
      padding: 20px;
  }

  /* #calendar ul */
  #calendar ul {
      display: flex;
      list-style-type: none;
      flex-wrap: wrap;
      text-align: center;
  }

  /* #calendar ul li */
  #calendar ul li {
      position: relative;
      width: calc(100% / 7);
  }

  #calendar #days li {
      z-index: 1;
      margin-top: 30px;
      cursor: pointer;
  }

  #days li.inactive {
      color: #aaa;
  }

  #days li.active {
      color: #fff;
  }

  /*  #calendar #weeks li */
  #calendar #weeks li {
      font-weight: 500;
  }

  /* #calendar #days */
  #calendar #days {
      margin-bottom: 20px;
  }

  #calendar #days li::before {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      z-index: -1;
      transform: translate(-50%, -50%);
  }

  #days li:hover::before {
      background: #f2f2f2;
  }

  #days li.active::before {
      background-color: gray;
  }