/* global */

    :root {

      /* color set one */
      --cottoncandy: #e896b4;
      --tangyred: #f14f5b;
      --orangesherbet : #f89a60;
      --brass: #ceb954;
      --gold: #dbc972;
      --pondgreen: #88a481;
      --toothpaste: #bddeba;
      --seablue: #a3c8ae;
      --sky: #7997ac;
      --sunsetblue: #6e92cc;
      --grape: #9d75b3;

      --folder: #e1e8c4;
      --coal: #212322;
      --ash: #5c5c5b;
      --pale: #fefcec;

      /* color set two (bad?) */
      --manila: #fcfcf6;
      --vanilla: #f6f0e0;
      --greenleaf: #58805d;
      --machineblue: #56a6c7;
      --brownhide: #c28439;
      --ointmentblue: #afd7cc;
      --pupe: #aea836;
      --thedark: #2b291f;
      --westdirt: #906835;
      --cardboard: #C7B7A7;
      --babypoop: #AAA53F;
      --navygrape: #5419AE;
      --darkmanila: #ece3d4;
      --dryblood: #6c3e41;
      --persimmon: #d14d36;
      --tartorange: #e88939;
      --pepto: #d17489;
    }

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

    audio {
      width:100%;
    }

    math {
      font-family: "Lora", serif;
      text-rendering: optimizeLegibility;
      font-weight: 200;
      color: var(--tangyred );
    }

    body {
      font-family:Arial;
      text-rendering: optimizeLegibility;
      font-size: 1vw;
      font-weight: 200;
      line-height: 1.34;
      background-color: var(--pale);
      color: var(--ash);
    }

    video {
      width:100%;
    }
    iframe {
        display: block;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
        height: 80%;
        width: 80%;
    }

    input {
      background-color: var(--manila);
      color:var(--sunsetblue);
      font-family:Arial;
      text-rendering: optimizeLegibility;
      padding-top:0.3em;
      padding-bottom:0.3em;
      margin-bottom: 0.5em;
      border-width:1px;
    }
    button {
      background-color: var(--sky);
      color:var(--pale);
      font-family:Arial;
      text-rendering: optimizeLegibility;
      font-size: 1.2vw;
      padding-top:0.7em;
      padding-bottom:0.7em;
      margin-top: 1em;
      border-width:1px;
    }


    /* header */
    hgroup {
      margin-top: 2vw;
      margin-left: auto;
      margin-right: auto;
    }

    hgroup h1{
      font-size: 4vw;
      margin-bottom: -1vw;
    }

    hgroup p{
      font-size: 3vw;
      opacity: 50%;
      margin-bottom: 1.5vw;
    }

    hgroup a{
      text-decoration: none;
      color: var(--ash);
    }

    /* nav */
    nav {
      background-color: var(--sky);
      color: var(--pale);
      padding: 8px 0px;
    }

    nav ul {
      list-style: none;
      display: flex;
      justify-content: space-around;
    }

    nav ul li {
      margin: 0 1vw;
    }

    nav ul li a {
      color:  var(--pale);
      text-decoration: none;
      padding: 1vw 1vw;
      transition: background-color 0.3s;
    }

    nav ul li a:hover {
      color:  var(--sky);
      background-color:  var(--pale);
      border-radius: 4px;
    }

    main {
      display: flex;;
      flex-direction: column;
      font-family:Arial;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }

    main article {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 5vw;
    }


    main header {
      color: var(--ash);
      padding-bottom: 0.5vw;
    }

    main header a{
      text-decoration: none;
      cursor: pointer;
      color: var(--ash);
    }

    main section {
      margin-bottom: 5vw;
    }

    main footer {
      justify-content: flex-end;
      text-align: right;
      color: var(--brownhide);
    }

    main footer a{
      text-decoration: none;
      cursor: pointer;
      color: var(--brownhide);
    }

    main ul {
      display: block;
    }

    main ul a{
      display: block;
      text-decoration: none;
      color: var(--ash);
    }
    main ul a:hover{
      background-color: var(--pondgreen);
      color: var(--pale);
    }
    main li {
      cursor: pointer;
      display: list-item;
      list-style-type: none;
      padding: 8px 16px;
    }

    .listheader {
      border-bottom: 1px;
      border-bottom-style: dotted;
      border-color: var(--dryblood);
      background-color: var(--darkmanila);
    }

    .single {

    }

    .single img {
      width:100%;
      height: auto;
    }

    .single video {
      width:100%;
    }

    .single_flat {
      width:100%;
      height: auto;
      margin-bottom: 1vw;
    }

    .double {
      display: flex;
      flex: 1 1;
    }

    main article p {
    }

    main section audio {

    }

    main section cite {

    }


    main section dfn {
    }

    main section p {
      font-family: "Lora", serif;
      letter-spacing: -0.03em;
      padding-left:0vw;
      padding-right:1vw;
    }


    main section q {

    }

    main section video {

    }


    .quote_blurb {
      display: inline;
      font-family: "Libre Baskerville", serif;
      font-weight: 400;
      font-style: italic;
      color: var(--sunsetblue);
    }


    .caption_bottom_left {
      justify-content: flex-start;
      margin-bottom: 0px;
      margin-top: 0vw;
    }

    .caption_bottom_left p {
      font-family: "Lora", serif;
      font-weight: 400;
      font-style: italic;
      color: var(--sky);
      opacity: 1;
    }


    .caption_top_right  {
      justify-content: flex-end;
      padding-bottom: 0px;
      margin-top: -6vw;
      text-align: right;
    }


    .caption_top_right p {
      font-family: "Lora", serif;
      font-weight: 400;
      font-style: italic;
      color: var(--sky);
      opacity: 1;
    }

    .caption_single p {
      justify-content: flex-direction;
      padding-bottom: 0px;
      text-align: center;
    }
    .caption_single p {
      font-family: "Lora", serif;
      font-weight: 400;
      font-style: italic;
      color: var(--sky);
      opacity: 1;
    }



    /* small screen */
    @media all and (max-width: 800px) {

      input {
        font-size: 3vw;
        width:100%;
      }
      button {
        font-size: 3vw;
        width:100%;
      }

      h2 {
        color: var(--ash);
        font-size: 3vw;
        padding-bottom: 1vw;
      }

      math {
        font-size: 5vw;
      }

      hgroup {
        width: 90vw;
      }

      main {
        width: 90vw;
      }

      nav ul li a {
        font-size: 3.5vw;
      }

      main hgroup h2 {
        font-size: 4vw;
      }

      main hgroup p {
        font-size: 3vw;
      }

      main header {
        font-size: 5vw;
      }

      main section p {
        font-size: 3.5vw;
        padding-bottom: 1vw;
      }


      main footer {
        font-size: 4.5vw;
      }
      main li{
        font-size: 3.5vw;
      }


      .backlink {
        position: fixed;
        background-color: var(--sky);
        color: var(--pale);
        transform: rotate(-90deg);
        top: 50vh;
        left: -25px;
        padding: 0px 10px;
        text-decoration: none;
        border-radius: 5px;
        font-size: 3.5vw;
        opacity:0.5;
      }


      .morespan {
        opacity:0.8;
        font-size: 75%;
      }

      .double {
        flex-direction: column;
      }

      .double img {
        max-width:99%;
        height: auto;
        margin-bottom: 1vw;

      }


      .quote_blurb {
        font-size: 4vw;
      }

      .caption_bottom_left {
        margin-top: -3vw;
      }

      .caption_bottom_left p {
        font-size: 3.5vw;
        padding-bottom: 0px;
        margin-bottom: 0px;
      }

      .caption_top_right  {
        justify-content: flex-end;
        padding-bottom: 0px;
        margin-top: -5vw;
        text-align: right;
      }

      .caption_top_right p {
        font-size: 3.5vw;
      }

      .caption_single p {
        font-size: 3.5vw;
      }

    }

    /* big screen */
    @media all and (min-width: 800px) {

      input {
        font-size: 1vw;
        width:50%;
      }
      button {
        font-size: 1.2vw;
        width:50%;
      }

      h2 {
        color: var(--ash);
        font-size: 1.6vw;
      }

      math {
        font-size: 3.5vw;
      }

      hgroup {
        width: 80vw;
      }

      main {
        width: 80vw;
      }

      nav ul li a {
        font-size: 2.5vw;
      }

      main hgroup h2 {
        font-size: 2.75vw;
      }

      main hgroup p {
        font-size: 2vw;
      }

      main header {
        font-size: 3vw;
      }

      main section p {
        font-size: 1.6vw;
      }
      main footer {
        font-size: 3vw;
      }
      main li{
        font-size: 1.6vw;
      }

      .backlink {
        position: fixed;
        background-color: var(--sky);
        color: var(--pale);
        transform: rotate(-90deg);
        top: 50vh;
        left: -18px;
        padding: 2px 15px;
        text-decoration: none;
        font-size: 1.5vw;
        border-radius: 5px;
        opacity:0.5;
      }

      .morespan {
        opacity:0.4;
        font-size: 75%;
      }

      .double {
        flex-direction: row;
      }

      .double img {
        width:48%;
        height: auto;
        margin:1%;
        aspect-ratio: auto;
        object-fit: contain;
      }

      .double p{
        display: flex;
        flex: 1 1;
        width: 50%;
      }

      .quote_blurb {
        font-size: 1.5vw;
      }


      .caption_bottom_left p {
        font-size: 1.5vw;
      }

      .caption_top_right  {
        justify-content: flex-end;
        margin-top: -5vw;
        text-align: right;
      }

      .caption_top_right p {
        font-size: 1.5vw;
      }

      .caption_single p {
        font-size: 1.5vw;
      }

    }

    /* projectpage */