:root {
     /*  --bg: #FAF9F5; */
      --bg-shade-200: #F2EEDF;
      --bg-shade-outline: #E0DDCF;

      --font-color: #212121;

      --spacing-32: 2rem;
      --sapcing-24: 1.5rem;
      --spacing-16: 1rem;
      --spacing-1: 0.063rem;

      --universal-transition: all 0.5s ease-in-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: acrobat-semi-bold, sans-serif;
      background-color: var(--bg);
     /*  padding: var(--spacing-16); */
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-16);
      list-style: none;
    }

    /* svg */
    circle-expand {
      --svg-length: 1.5rem;

      display: flex;

      svg {
        width: var(--svg-length);
        height: var(--svg-length);

        circle {
          stroke-dasharray: var(--circle-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(2) {
          stroke-dasharray: var(--top-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(3) {
          stroke-dasharray: var(--bottom-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }
      }
    }

    summary[expanded] {
      circle-expand {
        svg {
          circle {
            stroke-dashoffset: var(--circle-length);
          }

          path:nth-of-type(2) {
            stroke-dashoffset: var(--top-length);
          }

          path:nth-of-type(3) {
            stroke-dashoffset: var(--bottom-length);
          }
        }
      }
    }

    details {
		background: #FAF9F5;
      position: relative;
      border: var(--spacing-1) solid var(--bg-shade-outline);
      padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.28125rem) * 0.8081)), 2rem);
      border-radius: var(--sapcing-24);
      transition: var(--universal-transition);
			font-size:1.5em;
      details-content {
        display: block;
        overflow: hidden;
        height: 0;
        transition: var(--universal-transition);
      }

      &:has(summary[expanded]) {
        background-color: var(--bg-shade-200);
        border-color: var(--bg-shade-200);

        p {
          opacity: 1;
        }
      }

      p {
        opacity: 0;
        line-height: 1.5;
        margin-block: var(--sapcing-24);
        transition: var(--universal-transition);
      }
    }

    summary {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-32);
      list-style: none;
      cursor: pointer;
      transition: var(--universal-transition);

      /* avoid Windows insertion caret */
      caret-color: transparent;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::marker {
      content: '';
    }
	
	#accordion-hold h3{
		font-size:1.5em;
	}