/* (A) TABS CONTAINER */
.tab, .tab * {
    box-sizing: border-box;
  }
  .tab { max-width: 100%; }
  
  /* (B) HIDE CHECKBOX */
  .tab input { display: none; }
  
  /* (C) TAB LABEL */
  .tab label {
    /* (C1) DIMENSIONS */
    position: relative; /* required for (f2) position:absolute */
    display: block;
    width: 100%;
    padding: .6em;
    margin:0;
    border-bottom: 1px solid rgb(255, 255, 255);
    /* (C2) COSMETICS */
    background: var(--nav-bg);
    cursor: pointer;
  }
  
  /* (D) TAB CONTENT - HIDDEN BY DEFAULT */
  /* css animation will not work with auto height */
  /* this is why we use max-height instead */
  .tab .content {
    background: var(--footer-bg);
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0;
  }
  .tab .content p, 
  .tab .content h4 { padding: .6em; }

  /* (E) OPEN TAB ON CHECKED */
  .tab input:checked ~ .content { max-height: 100vh; }
  
  /* (F) EXTRA - ADD ARROW INDICATOR */
  .tab label::after {
    /* (F1) RIGHT ARROW */
    display: block;  
    content: "\25b6";
   
    /* (F2) PLACE AT RIGHT SIDE */
    position: absolute;
    right: 10px; top: 10px;
   
    /* (F3) ANIMATED ARROW */
    transition: all 0.4s;
  }
   
  /* (F4) ROTATE ARROW ON CHECKED */
  .tab input:checked ~ label::after { transform: rotate(90deg); }