/* for lols and learning*/

.calendar {
    width:300px;
    max-width: 100%;
    padding:4px;
    border:
    1px solid hsl(210deg 10% 40%);
    border-radius: 8px;
    list-style-type: none;

    display: grid;
    grid-template-columns:
      repeat(7, 1fr);
    gap: 4px;
     /* transform: translateX(10%) skewY(7deg); */
 
}

.day {
    display: grid;
    place-content: center;
    border:
        2px solid hsl(210deg 8% 50%);
    border-radius: 4px;
    color: white;
    font-weight: 700;
    /* Aspect ratio  to keep the days square*/
    aspect-ratio: 1/1;
}