:root{
  --titleColor: var(--green-100);
  --titleBorder: var(--teal-900);
  --subtitleColor: var(--green-50);
  --arrowColor: var(--blue-100);
  --arrowBorder: var(--blue-900);
  --shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
  --shadow:  0px 7px 29px rgba(100, 100, 111, 0.3);
}

.diagram{
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: auto minmax(0,1fr) minmax(0,1fr) 3em;
  column-gap: 10px;
  row-gap: 40px;

  .head {
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 5em 1fr;
    h2 {
      grid-column: 1/4;
      border-radius: 25px;
      background: var(--titleColor);
      border: 2pt solid var(--titleBorder);
      margin-bottom: 0
    }
    div.subhead {
      justify-self: center;
      align-self: top;
      background: var(--subtitleColor);
      border: 3pt solid rgba(11, 113, 97,1);
      border-top: none;
      width: 10em;
    }
    div.learning {justify-self: end;}
    div.evaluating {justify-self: start;}
  }

  .footer {
    transition: all 1s ease-in-out, opacity 0.5s step-end;
    .arrow {
        grid-row: 4;
        align-self: start;
        padding: 0ex 2em;
        margin: 0px 1em;
        background: rgb(0,109,136);
        background: linear-gradient(90deg, var(--blue-300) 0%, var(--blue-700) 100%);
        clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 05% 50%, 0% 0%);

        display: grid;
        grid-template-columns: 50% 10% 10% 10% 20%;
        span.fail {
          grid-column: 1;
          border-right: solid 2pt var(--red-500);
        }

        span{
          justify-content: center;
          font-size: 2em;
        }

      }
    }
  .head, .footer {
    grid-column-start: 1;
    grid-column-end: 4;
  }

  .footer.visible {
      filter: drop-shadow(var(--shadow));
  }

  .head.visible {
    h2, .subhead {
      transition: all 1s ease-in-out, opacity 0.5s step-end;
      box-shadow: var(--shadow);
    }
  }

  .learning {grid-column: 1;}
  .evaluating {grid-column:3;}
  .resources {grid-row: 2;}
  .support {grid-row: 3;}
  .learning, .evaluating { justify-self: center; width: 100%; }

  .student {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column: 2;
    align-self: center;
    overflow: hidden;
    height:100%;
    width:100%;
    img {
      height: 90%;
      width: 90%;
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
    }
  }

  .evaluating.support img{
    max-width: 95%;
    max-height: 95%;
   }
    max-width: 50%;
    max-height: 50%;
  }
}

.diagram .learning, .evaluating {
    div.front.large {
        grid-template-row: 1fr;
    }