@charset "utf-8";

    body {
      background: white;
    }

    .job-history {
                margin-bottom: 200px;
    }

     .job-history details > summary {
        padding: 2rem 3rem;
        padding-right: 4rem;
        border: none;
        user-select: none;
        cursor: pointer;
        border: 1px solid var(--color);
        justify-content: space-between;
        border-radius: 0.5rem;
        transition: 0s all;
        position: relative;
        align-items: center;
        width: 100%;
      }

      .job-history details > div {
        margin: 0;
        overflow: hidden;

        line-height: 1.4;
      }

        summary::after {
          content: "";
          clip-path: var(--triangle);
          height: 1.5ch;
          width: 2ch;
          position: absolute;
          right: 2rem;
          top: 2.05rem;
          background: var(--color);
          transition: .2s all;
          transform-origin: 50% 50%;
      }

      details[open] summary::after {
        transform: rotate(180deg);
      }

      .job-history details {
        position: relative;
        margin: .5rem 0;
        width: 70ch;
        border-radius: 0.5rem;
        box-shadow: var(--float-close);
      }

      .job-history details[open] summary * {
        color: var(--color);
      }

      .job-history details div {
        height: 100%;
        padding: 12px;
        color: #333;
        -webkit-animation: summaryClose 0.2s ease-in-out 1 forwards;
      }

      .job-history details[open] dl {
        border: 1px solid var(--color);
        border-top-color: transparent;
      }

      .job-history details[open] summary {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transition: 0s all;
      }

      .job-history details[open] div {
        height: 0px;
        width: 100%;
        color: #eeeeee;
        -webkit-animation: summaryOpen .2s ease-in-out 1 forwards;
      }

      @keyframes summaryOpen {
        from {
          height: 0px;
          padding: 0px 12px;
          color: #eeeeee;
        }
        to {
          height: 100%;
          padding: 12px;
          color: #333;
        }
      }

      @keyframes summaryClose {
        from {
          height: 100%;
          padding: 12px;
          color: #333;
        }

        to {
          height: 0px;
          padding: 0px 12px;
          color: #eeeeee;
        }
      }

      .job-history details dl {
        width: 100%;
        background: #f2f2f2;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        /* letter-spacing: -.02rem; */
        padding: 2rem;
      }

      .job-history dt {
        font-weight: 600;
        margin: .5rem 0;

      }

      .job-history dd {
          line-height: 1.8;
      }


      .job-history ul {
    max-width: 70ch;
    padding: 2rem;
    border: 1px solid var(--color);
    margin: 1rem 0;
    border-radius: .5rem;
    background: var(--color-med);
    font-weight: 300;
}

.job-history li {
    margin: .5rem 1rem;
    line-height: 1.4;
    position: relative;
    color: var(--lightest);
}
.job-history li::before {
    content:"";
    position: absolute;
    height: .5rem;
    width: .5rem;
    clip-path: var(--triangle);
    background-color: var(--color-lt);
    transform: rotate(-90deg)
             translateX(-.3rem)
                translateY(-1rem);

}

.job-history .row {
    align-items: center;
}

.job-history em {
    color: var(--contrast-less);
    font-size: .85rem;
}