/* File style.scss */
/* colors */
/* Firenza */
/* ?? based on yellow disk in logo */
/* $background-color-0:              hsl(45, 100%, 85%); */
/* ?? same as red disk in logo */
/* from Gmail web interface */
/* sizes */
/* selectors */
/* @mixins */
/* responsive elements */
/* other @mixins */
/* http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element */
/* ui-message-box - shared by "System Notifications" and ui-message */
/* animation */
@keyframes throb {
  0% {
    opacity: 1.0; }
  50% {
    opacity: 0.0; }
  100% {
    opacity: 1.0; } }
@keyframes ellipsis-content {
  0% {
    content: ""; }
  25% {
    content: "."; }
  50% {
    content: ". ."; }
  75% {
    content: ". . ."; }
  100% {
    content: ""; } }
/* body context (global) */
body {
  margin: 0;
  /* use full viewport height */
  min-height: 100vh;
  font-family: "Open Sans";
  /* Note: Some browsers won't find the web font if weight matching font spec isn't here.  */
  font-weight: 400;
  font-size: 13px;
  /* no text inflation by mobile browser (if automatically scaling down to fit viewport) */
  text-size-adjust: none;
  background-color: #fffbf0;
  /* force vertical scrollbar always to prevent in/out weirdness on Chrome */
  overflow-y: scroll; }
  body img {
    -webkit-user-drag: none; }

/* override user agent stylesheet */
input,
button {
  font-family: "Open Sans";
  /* Note: Some browsers won't find the web font if weight matching font spec isn't here.  */
  font-weight: 400;
  font-size: 13px; }

a {
  text-decoration: none;
  color: #8E2800; }
  a:hover {
    opacity: 0.5; }

hr {
  width: 100%;
  border: solid 0.5px;
  border-color: gray; }

/* _italics_ markdown */
span.s-underscore {
  font-style: italic; }

/* *bold* markdown */
span.s-star {
  font-weight: bold; }

/* `program-text` markdown */
span.s-backquote {
  font-family: monospace;
  font-size: 1.1em;
  background-color: rgba(0, 0, 0, 0.05); }

/* ?? maybe add .page class */
#home-page {
  /* To get the desired Z stacking (animated dropdown menus in front),
  establish the 3D context here, in a parent div.  However, to
  preserve fixed position (relative to viewport) for messages, this
  can't be applied to body.  Search "css perspective position
  fixed". */
  /* ?? perspective: 5000px; */ }

.standard-footer {
  width: 100%;
  background-color: #f44034;
  color: white;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 1.3em; }
  .standard-footer .footer-text {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */ }
    @media (min-width: 1200px) {
      .standard-footer .footer-text {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      .standard-footer .footer-text {
        max-width: 80vw;
        width: 80vw; } }
    @media (max-width: 719px) {
      .standard-footer .footer-text {
        font-size: 0.75em; } }

/* Desktop: 2-column layout with .story on left, .higlights on right */
/* Small screen: 2-row layout with .story on top, .highlights on bottom */
.description-box {
  width: 100%;
  /* for large (desktop) screens, limit absolute width of content */
  /* for smaller screens, leave 10% margins */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 15px;
  margin-right: 15px; }
  @media (min-width: 1200px) {
    .description-box {
      max-width: 960px;
      width: 960px; } }
  @media (max-width: 1199px) {
    .description-box {
      max-width: 80vw;
      width: 80vw; } }
  @media (min-width: 720px) {
    .description-box {
      flex-direction: row; } }
  @media (max-width: 719px) {
    .description-box {
      flex-direction: column; } }
  .description-box .story {
    max-width: 470px;
    font-size: 1.3em;
    margin-right: 15px; }
  .description-box .highlights {
    text-align: center;
    font-size: 2em;
    font-style: italic;
    justify-content: space-around;
    margin-left: 15px;
    margin-top: 1em;
    margin-bottom: 1em; }

.description-grid > div {
  font-size: 1.3em; }

.youtube-video .print-link {
  display: none; }

input[type=submit],
button {
  color: black;
  background-color: white;
  width: -webkit-max-content;
  padding: 0.5em;
  border: solid black 2px;
  border-radius: 10px;
  cursor: pointer; }
  input[type=submit]:focus,
  button:focus {
    outline-style: none; }
  input[type=submit]:hover,
  button:hover {
    background-color: #e6e6e6; }
  input[type=submit]:active,
  button:active {
    background-color: #cccccc;
    box-shadow: inset 0 0 2px 1px #cccccc; }

/* customized substitute for title attribute tooltips */
div[data-title] {
  position: relative; }
  div[data-title]:hover::after {
    content: attr(data-title);
    font-size: 0.9rem;
    font-weight: normal;
    position: absolute;
    width: -webkit-max-content;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    left: 0.5rem;
    top: 2.0rem;
    border: solid grey 1px;
    background-color: #ffffcc;
    z-index: 1; }

/* imports */
/* File _error.scss */
#error-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #error-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #error-page .content-box {
    margin: 3em; }
    #error-page .content-box .the-404 {
      font-size: 3em;
      background-color: #f44034;
      color: white;
      width: 100%;
      text-align: center; }
    #error-page .content-box .the-message, #error-page .content-box .go-home {
      font-size: 2em;
      margin: 1em; }

/* File _home.scss */
#home-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #home-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #home-page .content-box .splash-box {
    width: 100%;
    align-items: center;
    position: relative; }
    #home-page .content-box .splash-box .watermark {
      /* for large (desktop) screens, limit absolute width of content */
      /* for smaller screens, leave 10% margins */
      color: white;
      font-style: italic;
      font-size: 2em;
      /* center horizontally to match other content*/
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      bottom: 2em; }
      @media (min-width: 1200px) {
        #home-page .content-box .splash-box .watermark {
          max-width: 960px;
          width: 960px; } }
      @media (max-width: 1199px) {
        #home-page .content-box .splash-box .watermark {
          max-width: 80vw;
          width: 80vw; } }
      @media (max-width: 719px) {
        #home-page .content-box .splash-box .watermark {
          font-size: 1.5em; } }
      #home-page .content-box .splash-box .watermark .content {
        background-color: rgba(0, 0, 0, 0.2);
        width: fit-content;
        padding-right: 2em;
        padding-left: 1em;
        margin-left: -1em; }
        #home-page .content-box .splash-box .watermark .content p {
          margin-block-start: 0;
          margin-block-end: 0;
          /* Safari */
          -webkit-margin-before: 0;
          -webkit-margin-after: 0;
          text-indent: -1em;
          transform: translate(1em); }
    #home-page .content-box .splash-box .hero-box {
      width: 100%; }
      #home-page .content-box .splash-box .hero-box .hero-image {
        width: 100%;
        height: 600px;
        object-fit: cover; }
        @media (max-width: 719px) {
          #home-page .content-box .splash-box .hero-box .hero-image {
            height: 300px; } }
      #home-page .content-box .splash-box .hero-box .arrows {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0; }
        #home-page .content-box .splash-box .hero-box .arrows div {
          width: 50%;
          height: 100%;
          margin-left: 20px;
          margin-right: 20px;
          align-items: center;
          cursor: pointer; }
          #home-page .content-box .splash-box .hero-box .arrows div:hover img {
            opacity: 1.0; }
          #home-page .content-box .splash-box .hero-box .arrows div.left-arrow {
            justify-content: flex-start; }
          #home-page .content-box .splash-box .hero-box .arrows div.right-arrow {
            justify-content: flex-end; }
          #home-page .content-box .splash-box .hero-box .arrows div img {
            height: 50px;
            width: 50px;
            opacity: 0.5; }

/* File _header.scss */
.standard-header {
  /* for large (desktop) screens, limit absolute width of content */
  /* for smaller screens, leave 10% margins */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1em; }
  @media (min-width: 1200px) {
    .standard-header {
      max-width: 960px;
      width: 960px; } }
  @media (max-width: 1199px) {
    .standard-header {
      max-width: 80vw;
      width: 80vw; } }
  @media (min-width: 720px) {
    .standard-header {
      flex-direction: row; } }
  @media (max-width: 719px) {
    .standard-header {
      flex-direction: column; } }
  .standard-header .logo-text {
    height: 6em;
    margin-top: 1em;
    margin-bottom: 1em; }
  .standard-header .nav-box {
    width: 320px;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 1.5em; }
    .standard-header .nav-box a {
      color: black;
      padding-bottom: 5px;
      padding-top: 5px;
      /* invisible border */
      border-bottom: solid rgba(0, 0, 0, 0) 2px; }
      .standard-header .nav-box a.my-page {
        /* black-border */
        border-bottom: solid black 2px; }

/* File _projects.scss */
/* ?? maybe factor out portions used for multiple pages */
#projects-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #projects-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #projects-page .description-grid {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */
    margin-left: 15px;
    margin-right: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (min-width: 1200px) {
      #projects-page .description-grid {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #projects-page .description-grid {
        max-width: 80vw;
        width: 80vw; } }
    @media (max-width: 719px) {
      #projects-page .description-grid {
        grid-template-columns: 1fr; } }
    #projects-page .description-grid > div {
      align-items: center;
      justify-content: center;
      padding-top: 1em;
      padding-bottom: 1em;
      border-bottom: solid grey 1px; }
      #projects-page .description-grid > div:last-child, #projects-page .description-grid > div:nth-last-child(2) {
        border-bottom: none; }
      @media (max-width: 719px) {
        #projects-page .description-grid > div {
          padding-top: 0.5em;
          padding-bottom: 0.5em; }
          #projects-page .description-grid > div img {
            margin-top: 0;
            margin-bottom: 0.5em; }
          #projects-page .description-grid > div:nth-child(odd) {
            border-bottom: none; } }
    #projects-page .description-grid a:first-child {
      font-weight: bold; }
    #projects-page .description-grid img {
      margin-top: 0.5em;
      width: 70%;
      object-fit: cover;
      /* center in anchor, since anchor fills grid cell */
      display: block;
      margin-left: auto;
      margin-right: auto; }
    #projects-page .description-grid .youtube-video {
      position: relative;
      width: 70%;
      height: 0;
      padding-bottom: 52.5%;
      margin-top: 0;
      margin-bottom: 0.5em;
      /* center in grid cell */
      display: block;
      margin-left: auto;
      margin-right: auto; }
      #projects-page .description-grid .youtube-video iframe {
        width: 100%;
        height: 100%;
        position: absolute; }

/* File _about.scss */
/* ?? maybe factor out (used for projects page also) */
#about-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #about-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #about-page .description-grid {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */
    margin-left: 15px;
    margin-right: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (min-width: 1200px) {
      #about-page .description-grid {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #about-page .description-grid {
        max-width: 80vw;
        width: 80vw; } }
    @media (max-width: 719px) {
      #about-page .description-grid {
        grid-template-columns: 1fr; } }
    #about-page .description-grid div {
      align-items: center; }
    #about-page .description-grid img {
      margin-top: 5em;
      max-width: 70%; }
      @media (max-width: 719px) {
        #about-page .description-grid img {
          margin-top: 0;
          margin-bottom: 3em; } }

/* File _contact.scss */
#contact-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #contact-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #contact-page .send-message-button {
    margin-left: 100px;
    margin-right: 100px; }

/* File _tarhtd.scss */
/* ?? maybe factor out portions used for multiple pages */
#tarhtd-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh;
  margin-left: 15px;
  margin-right: 15px;
  /* ?? CSS for printing needs refinement. */ }
  #tarhtd-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  @media print {
    #tarhtd-page .youtube-video {
      display: none; }
    #tarhtd-page div.vbox {
      display: block; }
    #tarhtd-page section:nth-of-type(n+2) {
      break-inside: avoid; } }
  #tarhtd-page section {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */ }
    @media (min-width: 1200px) {
      #tarhtd-page section {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #tarhtd-page section {
        max-width: 80vw;
        width: 80vw; } }
    #tarhtd-page section.commentary-section {
      /* compensate for negative heading margin */
      margin-top: 5em;
      column-count: 2;
      column-gap: 7%; }
      #tarhtd-page section.commentary-section > h1 {
        /* compensate for heading to line up 2 text columns */
        margin-top: -2.2em; }
      @media print {
        #tarhtd-page section.commentary-section {
          break-inside: auto;
          break-before: page;
          column-count: initial; } }
      @media (max-width: 719px) {
        #tarhtd-page section.commentary-section {
          column-count: 1; } }
    #tarhtd-page section > h1, #tarhtd-page section > p {
      max-width: 470px; }
    #tarhtd-page section > p, #tarhtd-page section > ul {
      font-size: 1.3em;
      line-height: 1.6em; }
    #tarhtd-page section .youtube-video {
      position: relative;
      float: right;
      /* For big displays, this effectively produces 2 columns. */
      /* For intermediate displays, this lets text wrap around image. */
      max-width: 425px;
      width: 50%;
      height: 0;
      padding-bottom: 37.5%;
      margin-top: 0.5em;
      margin-left: 15px;
      margin-bottom: 15px;
      /* Set maximum width and height for large displays. */
      /* For narrow displays, use a simple single column. */ }
      @media (min-width: 850px) {
        #tarhtd-page section .youtube-video {
          width: 425px;
          padding-bottom: 318.75px; } }
      @media (max-width: 719px) {
        #tarhtd-page section .youtube-video {
          float: none;
          margin-top: 0;
          margin-left: 0;
          /* width must be small enough not to activate max-width. */
          width: 75%;
          padding-bottom: 56.25%; } }
      #tarhtd-page section .youtube-video iframe {
        width: 100%;
        height: 100%;
        position: absolute; }

/* File _play.scss */
/* ?? maybe factor out portions used for multiple pages */
#play-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #play-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #play-page .description-grid {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */
    margin-left: 15px;
    margin-right: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr; }
    @media (min-width: 1200px) {
      #play-page .description-grid {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #play-page .description-grid {
        max-width: 80vw;
        width: 80vw; } }
    @media (max-width: 719px) {
      #play-page .description-grid {
        grid-template-columns: 1fr; } }
    #play-page .description-grid > div {
      align-items: center;
      justify-content: center;
      padding-top: 1em;
      padding-bottom: 2em; }
      #play-page .description-grid > div.sim-button a {
        font-size: 1.3em;
        border: solid 2px;
        padding: 0.2em;
        border-radius: 0.5em; }
      @media (max-width: 719px) {
        #play-page .description-grid > div {
          padding-top: 0.5em;
          padding-bottom: 0.5em; }
          #play-page .description-grid > div:nth-child(2n) {
            padding-bottom: 2em; }
          #play-page .description-grid > div img {
            margin-top: 0;
            margin-bottom: 0.5em; } }

/* File _beetlebots.scss */
/* ?? maybe factor out portions used for multiple pages */
#beetlebots-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh; }
  #beetlebots-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #beetlebots-page .print-contact {
    display: none; }
  @media print {
    #beetlebots-page .standard-header {
      margin-left: auto;
      margin-right: auto; }
    #beetlebots-page .standard-header .nav-box, #beetlebots-page .standard-footer.vbox {
      display: none; }
    #beetlebots-page.vbox, #beetlebots-page div.vbox {
      display: block;
      margin-left: auto;
      margin-right: auto; }
    #beetlebots-page section:nth-of-type(n+2) {
      break-inside: avoid; }
    #beetlebots-page .screen-contact {
      display: none; }
    #beetlebots-page .print-contact {
      display: block; } }
  #beetlebots-page .content-box {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */
    margin-left: 15px;
    margin-right: 15px; }
    @media (min-width: 1200px) {
      #beetlebots-page .content-box {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #beetlebots-page .content-box {
        max-width: 80vw;
        width: 80vw; } }
    #beetlebots-page .content-box article {
      font-size: 1.3em;
      max-width: 70ch; }
      #beetlebots-page .content-box article header {
        text-align: center; }
        #beetlebots-page .content-box article header h1 {
          margin-block-start: 0.2em;
          margin-block-end: 0em;
          /* Safari */
          -webkit-margin-before: 0.2em;
          -webkit-margin-after: 0em; }
        #beetlebots-page .content-box article header p {
          margin-block-start: 0.2em;
          margin-block-end: 0em;
          /* Safari */
          -webkit-margin-before: 0.2em;
          -webkit-margin-after: 0em;
          max-width: 35ch;
          font-size: 1.3em;
          font-weight: normal;
          font-style: italic;
          margin-left: auto;
          margin-right: auto; }
      #beetlebots-page .content-box article section {
        /* ?? TODO: factor out common elements */ }
        #beetlebots-page .content-box article section h1 {
          margin-block-start: 1.3em;
          margin-block-end: 0.7em;
          /* Safari */
          -webkit-margin-before: 1.3em;
          -webkit-margin-after: 0.7em; }
        #beetlebots-page .content-box article section .display {
          text-align: center; }
        #beetlebots-page .content-box article section img {
          width: 45%;
          max-width: 300px; }
          @media (max-width: 719px) {
            #beetlebots-page .content-box article section img {
              width: 90%; } }
        #beetlebots-page .content-box article section .youtube-video {
          position: relative;
          width: 60%;
          height: 0;
          padding-bottom: 45%;
          margin-top: 0;
          margin-bottom: 0.5em;
          /* center in column */
          display: block;
          margin-left: auto;
          margin-right: auto; }
          #beetlebots-page .content-box article section .youtube-video .print-link {
            display: none; }
          @media print {
            #beetlebots-page .content-box article section .youtube-video {
              display: inline;
              padding-bottom: 1.5em; }
              #beetlebots-page .content-box article section .youtube-video iframe {
                display: none; }
              #beetlebots-page .content-box article section .youtube-video .print-link {
                display: inline-block;
                width: 100%;
                text-align: center; } }
          @media (max-width: 719px) {
            #beetlebots-page .content-box article section .youtube-video {
              /* width must be small enough not to interact with inherent size. */
              width: 90%;
              padding-bottom: 67.5%; } }
          #beetlebots-page .content-box article section .youtube-video iframe {
            width: 100%;
            height: 100%;
            position: absolute; }

/* File _dancer-board.scss */
/* ?? maybe factor out portions used for multiple pages */
#dancer-board-page {
  width: 100%;
  align-items: center;
  /* ?? 100% (of body) does not work on Safari */
  min-height: 100vh;
  margin-left: 15px;
  margin-right: 15px; }
  #dancer-board-page .content-box {
    width: 100%;
    align-items: center;
    flex-grow: 0.95; }
  #dancer-board-page section {
    /* for large (desktop) screens, limit absolute width of content */
    /* for smaller screens, leave 10% margins */
    margin-bottom: 3em; }
    @media (min-width: 1200px) {
      #dancer-board-page section {
        max-width: 960px;
        width: 960px; } }
    @media (max-width: 1199px) {
      #dancer-board-page section {
        max-width: 80vw;
        width: 80vw; } }
    #dancer-board-page section > h1, #dancer-board-page section > p {
      max-width: 470px; }
    #dancer-board-page section > p, #dancer-board-page section > ul {
      font-size: 1.3em;
      line-height: 1.6em; }
    #dancer-board-page section img {
      display: block;
      float: right;
      /* For big displays, this effectively produces 2 columns. */
      /* For intermediate displays, this lets text wrap around image. */
      max-width: 425px;
      width: 20%;
      margin-top: 0.5em;
      margin-left: 1em;
      margin-right: 20%;
      /* For narrow displays, use a simple single column. */ }
      @media (max-width: 719px) {
        #dancer-board-page section img {
          float: none;
          margin-top: 0;
          margin-left: 0;
          width: 60%; } }

/*# sourceMappingURL=style.css.map */