1. Replace <your_account> with your Github username in the links
   • DEMO LINK
   • TEST REPORT LINK
2. Follow this instructions
   • Write styles in src/styles/main.scss instead of src/style.css.
   • This task does not have tests so you need to check if it works as expected manually.

Display a calendar in the middle of the screen. The HTML of the calendar needs to have the following structure:

<div class="calendar calendar-30 calendar-tue">
  <div></div>
  <div></div>
  <!--
  ...
  31 child divs in total
  ...
  -->
  <div></div>
</div>

• Use .scss for this task. Please do not use JavaScript.
  • @each
  • @for
• You can use flex and margin-left of required size for the :first-child
• Use the given HTML (don't change anything or add numbers 1 through 31).
• The first day of the week is Monday. (the first column)
• The calendar-30 classname here means that the month has 30 days
  • It should also show correct number of days if we replace calendar-30 class with calendar-28, calendar-29 or calendar-31
• calendar-tue means that the first day of the month is Tuesday.
  • The calendar should start from the correct day if we change calendar-tue to any of those classes calendar-mon, calendar-tue, calendar-wed, calendar-thu, calendar-fri, calendar-sat, calendar-sun.
• Each day must be represented by a 100px × 100px #eeeeee-colored cell (including 1px black borders).
• The gap between the cells must be 1px.
• The date should be written in the middle of the corresponding cell with Arial 30px font.
• On hovering over a cell, the cursor should become pointer.
• The hovered cell has to become pink
  • (Optional) Move it up by 20px.
  • (Optional) both of these properties are to be animated with the duration of half a second.

.