body {
    -webkit-tap-highlight-color: transparent; 
    }
  
    :root {
      --weekday-color: #5C4F42;

      --innerBorder-color: #5C4F42;
      --containerBorder-color: #E3D1DD;

      --sunday-color: #5C4F42;
      --saturday-color: #5C4F42;

      --current-day: #F5E7F0;

      --container: #E3D1DD;
      --inner-container: #E3D1DD;

      --fontWgt: 600;
  
      --headerFont: "Gaegu", serif;
      --textFont: "Sour Gummy", serif;
    }
    
  
    /*containers*/
    .calendar-container {
      position: relative;
      display: flex; 
      flex-direction: column; 
      justify-content: center;
      align-items: center; 
      min-height: 204px;
      max-height: 194px;
      width: 194px; 
      background-color: var(--container); 
      border-radius: 40px; 
      border: solid 3px var(--containerBorder-color);
      text-align: center; 
      padding: 14px; 
      margin: 20px auto; 
    }
  
   
  
    .inner-container {
      position: absolute;
      display: flex; 
      flex-direction: column; 
      justify-content: center;
      align-items: center; 
      min-height: 190px;
      max-height: 180px;
      width: 180px; 
      background-color: var(--inner-container);
      border: solid 3px var(--innerBorder-color); 
      border-radius: 32px; 
      text-align: center; 
      padding: 10px; 
    }
  
    
  
    /*days*/
    .days  {
      font-family: var(--textFont);
      font-size: 15px;
      color: var(--weekday-color);
      border: 0;
      font-weight: var(--fontWgt);
      padding: 2px -10px;
    }
  
  
    td:first-child {
      color: var(--sunday-color);
    } 
  
    td:last-child{
      color: var(--saturday-color);
    } 
  
    table {
      user-select: none;
      border-collapse: collapse;
      width: 140px;
      margin: 1px auto;
    }
  
    
    th, td {
      padding: 0 4px; 
      line-height: 1.2;
      border: 0;
      text-align: center;
    }
  
    
    /*days of the week*/
    th {
      font-family: var(--headerFont);
      color: var(--weekday-color);
      font-size: 15px;
      padding: 2px -10px;
      font-weight: var(--fontWgt);
    }
  
    th:first-child {
      color: var(--sunday-color);
    }
  
    th:last-child {
      color: var(--saturday-color);
    }
  
  
    /*hearder*/
    .header {
      margin-bottom: -7px;
      display: flex; 
      flex-direction: column;
      align-items: center; 
      text-align: center;
    }
  
    #year {
      user-select: none;
      font-family: var(--headerFont);
      color: var(--weekday-color);
      font-size: 0.8em;
      margin-bottom: -12px;
      font-weight: var(--fontWgt);
    }

  
    #month {
      user-select: none;
      font-family: var(--headerFont);
      color: var(--weekday-color);
      padding: 0;
      margin:0;
      font-size: 1.4em;
      letter-spacing: 1.5px;
      font-weight: var(--fontWgt);
    }
  
    .controls {
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      width: 190px; 
      margin: 10px auto;
    }
  
    .controls button {
      color: var(--weekday-color);
      flex: 0 0 35px; 
      text-align: center;
      font-family: var(--headerFont);
      font-size: 1em;
      font-weight: var(--fontWgt);
      opacity: 0.6;
      border: 0;
      background-color: transparent;
    }

  
    .controls button:hover {
      opacity: 1;
    }
  
  
  
  
    
  
  
  
    /*hearder*/
  .current-day {
    position: relative; 
    z-index: 1; 
  }
  
  .current-day::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skew(5deg, 3deg); /* Centers and skews the blob */
    width: 19px;
    height: 19px;
    background-color: var(--current-day); /* Blob color */
    border-radius: 50%; /* Makes it circular */
    z-index: -1; /* Places the blob behind the text */
  }