:root {
  --rw-color-light: #fff;
  --rw-color-grey: #efefef;
  --rw-color-dark: #333;
  --rw-color-dark-grey: #999;
  
  /* accessible bg on #FFF */
  --rw-color-response0: #87185e;
  --rw-color-response1: #c44601;
  --rw-color-response2: #026526;

  --rw-color-cta-bg: #333;
  --rw-color-cta-fg: #fff;
  --rw-color-cta-shadow: #333;

  --rw-space0: 0;
  --rw-space1: 7px;
  --rw-space2: 14px;
  --rw-space3: 21px;
  --rw-space4: 28px;

  --rw-font-default: Baskerville, Georgia, serif;
  --rw-font-system: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  /* from https://www.modularscale.com/?1&em&1.25 */
  --rw-font-size-0: 0.8rem;
  --rw-font-size-1: 1rem;
  --rw-font-size-2: 1.25rem;
  --rw-font-size-3: 1.563rem;
  --rw-font-size-4: 1.953rem;
  --rw-font-size-5: 2.441rem;
}

/*
 * adapted from https://codepen.io/chris22smith/pen/pGNVwZ
 */
html {
  background-color: var(--rw-color-light);
  background-image: linear-gradient(90deg, transparent 0%, #fff 7%, #fff 93%, transparent 100%), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVQoU2N89+7dfwYsQEhIiBEkzDgkFGDzAbIY2Cv4AACvrBgJjYNGfwAAAABJRU5ErkJggg==);
  height: 100vh;
  transition-property: 'background-color';
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

.bg-response0 { background-color: var(--rw-color-response0) !important; }
.bg-response1 { background-color: var(--rw-color-response1) !important; }
.bg-response2 { background-color: var(--rw-color-response2) !important; }

body {
  font-family: var(--rw-font-default);
  font-size: 20px;
  margin: 0;
}



.navbar {
  align-items: center;
  background-color: var(--rw-color-light);
  border-bottom: 1px solid var(--rw-color-dark-grey);
  display: flex;
  font-family: var(--rw-font-system);
  font-size: 16px;
  justify-content: space-between;
  letter-spacing: 0.05rem;
  padding: var(--rw-space1);
}

.navbar > a {
  color: var(--rw-color-dark) !important;
  font-weight: 700;
  letter-spacing: normal;
}

.navbar a ,
.nav-links a {
  color: var(--rw-color-dark-grey);
  padding: var(--rw-space1);
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline;
}
.nav-links a:hover {
  text-decoration: none;
}

.navbar input[type=checkbox] {
  display: none;
}

.navbar input[type=checkbox]:checked ~ .menu {
  display: block;
}

.menu_cta {
  display: block;
}

.menu {
  background-color: var(--rw-color-light);
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.menu li {
  padding: var(--rw-space1);
}
/* why? add extra padding to match li > a */
.menu li.current {
  padding-left: var(--rw-space2);
  padding-right: var(--rw-space2);
}

@media(max-width: 900px) {
  .menu {
    border-bottom: 1px solid var(--rw-color-dark-grey);
  }

  .menu li.current:before {
    color: var(--rw-color-response2);
    content: "✓ ";
  }
  .menu li.current a {
    padding-left: 0;
    text-decoration: underline;
  }
}

@media(min-width: 900px) {
  .navbar {
    justify-content: center;
    padding-bottom: 0;
  }

  .nav-links {
    margin-bottom: -1px;
    margin-top: 0;
  }

  .menu_cta {
    display: none;
    user-select: none;
  }

  .menu {
    background-color: transparent;
    display: flex;
    gap: 1em;
    position: static;
  }

  .menu li.current {
    border-radius: var(--rw-space1) var(--rw-space1) 0 0;
    border: 1px solid var(--rw-color-dark-grey);
    border-bottom-color: var(--rw-color-light);
  }

  .menu li:hover {
    display: inline-block;
    transition: 0.3s ease;
  }

  .menu li:not(.current):hover {
    background-color: var(--rw-color-dark);
    border-radius: var(--rw-space1) var(--rw-space1) 0 0;
    transition: 0.3s ease;
  }

  .menu li:not(.current):hover a {
    color: var(--rw-color-light);
  }

  .menu li {
    list-style: none;
    padding: var(--rw-space1);
  }
}



header {
  text-align: center;
}
header .title {
  margin-bottom: var(--rw-space0);
}
header .subtitle {
  margin: var(--rw-space4);
  font-style: italic;
}
@media(min-width: 768px) {
  header .subtitle {
    margin-top: var(--rw-space0);
  }
}

main {
  display: flex; 
  flex-direction: column;
  margin: var(--rw-space3) auto;
}
@media(min-width: 768px) {
  main {
    max-width: 50vw;
  }
}

.coming-soon {
  background-color: var(--rw-color-grey);
  color: var(--rw-color-dark);
  padding: var(--rw-space3);
  text-align: center;
}

#part1 {
  background-color: var(--rw-color-grey);
  color: var(--rw-color-dark);
  padding-bottom: var(--rw-space0);
  padding-left: var(--rw-space3);
  padding-right: var(--rw-space3);
  padding-top: var(--rw-space3);
}

.circle {
  border-radius: 50%;
  display: inline-block;
  font-family: Courier, monospace;
  font-weight: bold;
  margin-bottom: var(--rw-space1);
  margin-right: var(--rw-space1);
  padding: var(--rw-space1);
  text-align: center;
  width: var(--rw-space3);
}
.circle-dark {
  background-color: var(--rw-color-dark);
  color: var(--rw-color-light);
}
.circle-light {
  background-color: var(--rw-color-light);
  color: var(--rw-color-dark);
}

.tooltip {
  cursor: help;
}

.sample:link,
.sample:visited {
  color: var(--rw-color-dark);
}

#input {
  font-family: var(--rw-font-default);
  font-size: var(--rw-font-size-1);
  width: 100%;
}
#input:disabled {
  background-color: inherit;
  border-color: transparent;
  color: var(--rw-color-dark);
  resize: none;
}
#input:disabled::placeholder {
  /* why? hide placeholder if submitted with blank response */
  color: transparent;
}

.actions {
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--rw-space3) * -1);
  position: relative;
  z-index: 100;
}

.actions__button {
  background-color: var(--rw-color-cta-bg); 
  border-radius: var(--rw-space3);
  border-width: 0;
  box-shadow: 0px 3px 3px var(--rw-color-cta-shadow);
  color: var(--rw-color-cta-fg);
  cursor: pointer;
  display: inline-block;
  font-family: var(--rw-font-default);
  font-size: var(--rw-font-size-2);
  padding: var(--rw-space2) var(--rw-space4);
  text-decoration: none;
}
.actions__button:hover {
  box-shadow: 0px 6px 6px var(--rw-color-cta-bg);
  transform: translateY(-0.1em);
}
.actions__button:active {
  background-color: var(--rw-color-cta-fg); 
  color: var(--rw-color-cta-bg);
}
.actions__button:disabled {
  background-color: var(--rw-color-cta-fg); 
  color: var(--rw-color-cta-bg);
}
.actions__button-mt {
  margin-top: var(--rw-space2);
}

.hidden {
  display: none;
}
.fadeOut {
  height: 0;
  opacity: 0;
}
.fadeIn {
  height: 100%;
  opacity: 1.0;
}
.fadeOut, .fadeIn {
  transition-property: height, opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

#part2 {
  background-color: var(--rw-color-grey);
  color: var(--rw-color-light);
  padding: var(--rw-space3);
}

.fadeOut .interpretation-wrapper {
  display: none;
}

.fadeIn .interpretation-wrapper {
  align-items: baseline;
  display: flex;
  flex-direction: column;
}

details {
  margin-bottom: var(--rw-space1);
  margin-top: var(--rw-space1);
}

summary {
  border-bottom: 1px dashed;
  cursor: pointer;
  font-style: italic;
  width: fit-content;
}

/* why? if acceptance, hide FAQs only relevant for rejections */
.bg-response2 .faq-rejection {
  display: none;
}

.faq__answer {
  padding-left: var(--rw-space3);
}

.faq__answer a, 
.faq__answer a:link, 
.faq__answer a:visited {
  padding: var(--rw-space0) var(--rw-space2);
  white-space: nowrap;
}

.faq__answer li {
  margin-bottom: var(--rw-space2);
}

#output {
  display: block;
  flex-shrink: 0;
  font-size: var(--rw-font-size-5);
  margin-top: var(--rw-space2);
  text-shadow: 2px 2px 2px var(--rw-color-dark);
}

#shit {
  touch-action: manipulation;
}
.shit_step { 
  display: none;
}
.shit_step--current { 
  display: block;
}

footer {
  text-align: center;
}

footer hr {
  margin-top: var(--rw-space4);
  opacity: 0.1;
  width: 25%;
}

footer .small,
footer .small a, 
footer .small a:link, 
footer .small a:visited {
  color: var(--rw-color-dark);
  font-size: var(--rw-font-size-0);
}