:root {
  --red: #f71111;
  --blue: #1a2f59;
}

html {
  box-sizing: border-box;
  font-family: 'Libre Caslon Text', serif;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
}

.font-stash {
  font-family: 'Libre Caslon Text', serif;
  font-family: 'Montserrat', sans-serif;
}

/* for the fancy RADIO BUTTONS! */
input[type='radio'] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  border: unset;
  /* Adjusts the position of the checkboxes on the text baseline */
  vertical-align: -6px;
  /* Set here so that Windows' High-Contrast Mode can override */
  background-color: red;
  margin-bottom: 0.3rem;
}

input[type='radio']::before {
  display: block;
  content: ' ';
  width: 1em;
  height: 1em;
  background-color: black;
  font-size: 1em;
  transform: translate(1px, 1px) scale(0);
  transform-origin: center;
  transition: all 0.3s ease-in;
  padding: 1px 0 0 1px;
  visibility: hidden;
}

input[type='radio']:checked::before {
  transform: translate(0, 0) scale(1);
  transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
  visibility: visible;
}

.round-btn,
.round-btn::before {
  border-radius: 50%;
}

/* for text areas */
.textbox {
  resize: none;
  width: 100%;
  margin-left: 3px;
  border: unset;
  background-color: var(--red);
}

.textbox-label {
  margin-top: 7px;
  padding-left: 4px;
  display: block;
  font-size: 8px;
}

.textbox-userinfo {
  resize: none;
  border: unset;
  flex: none;
  width: 52.5%;
  vertical-align: middle;
}

.textbox-label-userinfo {
  font-size: 10px;
  display: inline-block;
  width: 45%;
  font-family: 'Montserrat', sans-serif;
  flex: none;
}

.personal-info {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.question {
  background-color: rgb(238, 246, 247);
  padding: 10px;
  border-radius: 5px;
  width: 85%;
  max-width: 750px;
  margin: 20px auto;
}

.nav {
  background-color: var(--blue);
  color: white;
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  padding: 5px 10px;
  border: unset;
  box-shadow: 3px 2px 2px white;
}

.nav--back {
  position: absolute;
  bottom: 4%;
  left: 7%;
}

.nav--proceed {
  position: absolute;
  bottom: 4%;
  right: 7%;
}

.nav-splash--proceed {
  position: absolute;
  bottom: 15%;
  right: 7%;
}

.step5-img {
  width: 80%;
  margin: 0 auto;
}
.step5-img--bret {
  width: 100%;
  margin: 0 auto;
}

.step5-cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: -14%;
}

.lol-center {
  margin-top: -5%;
}

/* for opening view */
.splash {
  background-color: var(--blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
  position: relative;
}

.access-text {
  color: white;
  font-size: 0.35rem;
  margin-top: 2rem;
  text-align: center;
}

.icon-container {
  display: flex;
  justify-content: center;
}

.sound-icon {
  width: 8%;
  height: 8%;
}

#start {
  box-shadow: white;
}

.seal-container {
  border: 1px solid yellow;
}

.logo-start {
  width: 55%;
}

/* -------------------------- for views with headings that say TRUTH */
.truth {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
  position: relative;
  background-color: white;
}

.truth-banner {
  position: relative;
  /* padding: 3% 0 2% 28%; */
  width: 100%;
  color: white;
}

.logo-banner {
  position: absolute;
  width: 25%;
  top: 25%;
  left: 2%;
  z-index: 10;
}

.camo-circle {
  position: absolute;
  width: 33%;
  height: 33vw;
  top: 10%;
  border-radius: 50%;
  left: 2%;
  border: 3px solid var(--red);
  background-image: url(../assets/camo.png);
  background-size: contain;
  z-index: 0;
}

.truth-banner-text {
  background-color: var(--red);
  position: relative;
  z-index: 5;
  padding-left: 28%;
}

.truth-banner-text p:nth-child(1) {
  margin-top: 0;
  padding-top: 7%;
  margin-bottom: 1%;
  padding-right: 10%;
}

.truth-banner-text p:nth-child(2) {
  font-size: 1.5rem;
  margin-top: 1%;
  padding-bottom: 3%;
}

.truth form {
  margin-top: 15%;
  border: 2px solid var(--blue);
  outline: 1px solid var(--blue);
  outline-offset: 3px;
  width: 80%;
  height: 19.42rem;
  padding: 10px;
  padding-top: 0;
  position: relative;
}

.userinfo {
  background-color: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
  color: white;
}

.userinfo-ask {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.userinfo-ask span {
  color: yellow;
}

.userinfo-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: unset;
  outline: unset;
  outline-offset: 0;
  padding: 0;
  width: 100%;
}

.disclaimer {
  text-align: center;
  font-size: 8px;
  margin: 1rem;
}

.disclaimer p {
  margin: 0.25rem;
}

.disclaimer p:nth-child(1) {
  color: yellow;
}

.userinfo-logo {
  width: 35%;
  margin-top: 10%;
}

.truth-quest-1 {
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

.truth-quest-2 {
  font-size: 1rem;
  /* font-weight: 400; */
  /* margin-top: 0; */
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#youtube {
  position: absolute;
  top: 25%;
  width: 90%;
  overflow: hidden;
}

#tiktok {
  display: flex;
  justify-content: center;
  width: 38.5%;
  height: 11.1rem;
  margin: 0 auto;
  overflow: hidden;
}

.hideVid {
  display: none;
}

.showVid {
  display: flex;
}

.ever {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
  position: relative;
  background-color: white;
}

.personal-truth-info {
  margin-top: 11%;
  border: unset;
  border: 1px solid var(--red);
  outline: unset;
  width: 80%;
  height: 24.7rem;
  padding: 10px;
  padding-top: 0;
  position: relative;
}

.personal-truth-quest {
  font-size: 1rem;
  /* font-weight: 400; */
  /* margin-top: 0; */
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 0.8rem;
}

.speak-truth {
  color: var(--red);
  font-style: italic;
  text-align: center;
  font-size: 0.8rem;
}

.question-truth {
  color: white;
  background-color: black;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 0.6rem;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.question-personal-truth {
  color: white;
  background-color: black;
  font-family: 'Montserrat', sans-serif;
  /* font-weight: 400; */
  text-align: center;
  font-size: 0.6rem;
  padding: 6px 10px;
  margin-bottom: 5px;
}

.personal-truth {
  font-family: 'Libre Caslon Text', serif;
  margin-top: 0;
  font-weight: 700;
}

.radio-answer-center {
  padding-bottom: 20%;
  text-align: center;
}

.radio-answer-center span {
  display: inline-block;
  margin: 0 3%;
  font-size: 0.8rem;
  /* font-weight: 700; */
}

.radio-answer-column-step-1 {
  /* waiting to move/size questions */
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  padding: 0 4.5% 20% 4.5%;
}

.radio-answer-column-personal {
  /* waiting to move/size questions */
  font-family: 'LibreLibre Caslon Text', serif;
  font-size: 12px;
  padding: 0 4.5% 14.25% 4.5%;
}

.answer-column-userinfo {
  font-family: 'LibreLibre Caslon Text', serif;
  font-size: 12px;
  padding: 3% 4% 1% 4%;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.small-truth {
  font-family: 'Libre Caslon Text', serif;
  font-size: 7px;
  font-style: italic;
}

.small-red-truth {
  font-family: 'Libre Caslon Text', serif;
  font-size: 7px;
  font-style: italic;
  color: var(--red);
  text-align: right;
  margin-top: -4px;
}

.spice {
  color: var(--red);
}

.mayo {
  color: white;
}

.fake {
  font-weight: 700;
  font-family: 'Libre Caslon Text', serif;
}

.lean {
  font-style: italic;
}

.aside-truth {
  font-family: 'Libre Caslon Text', serif;
  font-size: 6px;
  font-style: italic;
  font-weight: 400;
  width: 88%;
  margin-top: 16px;
  text-align: center;
}

.binary-truth-holder {
  display: flex;
  vertical-align: middle;
  padding: 3% 5%;
  border: 1px solid lightgray;
}

.binary-truth-question {
  padding: 3% 5%;
  border: 1px solid lightgray;
}

.binary-truth-letter {
  flex: none;
  width: 5%;
}

.binary-truth-telltale {
  flex: none;
  width: 65%;
}

.binary-truth-response {
  display: flex;
  flex: none;
  width: 17%;
}

.authentication {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
}

.bipocnithity {
  background-color: var(--red);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
  font-family: 'Libre Caslon Text', serif;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
}

#bipoc-heading {
  font-size: 0.75rem;
  font-weight: 400;
  color: white;
  width: 90%;
  text-align: center;
}

.bipoc-text {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  color: black;
}

.rebellion {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
  font-family: 'Libre Caslon Text', serif;
  background-color: white;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
}

.rebellion-text {
  font-size: 0.65rem;
  font-weight: 400;
  width: 80%;
}

.first-word {
  display: inline-block;
  padding-bottom: 5px;
  vertical-align: top;
}

.rebellion-text p {
  text-align: right;
  margin-top: 20%;
  opacity: 0;
  animation: show-author 2s 14s forwards;
}

.rebellion-fade-1 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 75%;
  opacity: 0;
  animation: slow-show1 7s steps(100, end) 1s forwards;
}

.rebellion-fade-2 {
  overflow: hidden;
  white-space: nowrap;
  animation: slow-show2 7s steps(100, end) 8s forwards;
  width: 80%;
  opacity: 0;
}

@keyframes slow-show1 {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 75%;
    opacity: 1;
  }
}
@keyframes slow-show2 {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes show-author {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.rebellion-sentence-proceed {
  opacity: 0;
  animation: rebellion-fade-in 1s 17s forwards;
  box-shadow: 3px 2px 2px var(--red);
}

@keyframes rebellion-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* for closing view */
.end {
  background-color: var(--blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  max-width: 750px;
  max-height: 750px;
  margin: 0 auto;
}

.logo-end {
  width: 75%;
  max-width: 25.52rem;
}

.end-text {
  width: 90%;
  text-align: center;
}

.thanks {
  font-size: 0.45rem;
  color: white;
}

#thanks {
  padding-top: 15px;
}

.woc {
  color: yellow;
  font-size: 0.6rem;
}

.hide {
  display: none;
}

.show {
  display: flex;
}

.words {
  display: inline;
}

.words-gone {
  display: none;
}

@media screen and (min-height: 500px) and (min-width: 459px) {
  .truth form,
  .personal-truth-info {
    width: 22.95rem;
  }

  .camo-circle {
    width: 10.33rem;
    height: 10.33rem;
  }

  .logo-banner {
    width: 7.83rem;
  }

  .rebellion-text {
    font-size: 1rem;
  }

  #bipoc-heading {
    font-size: 1rem;
  }

  .bipoc-text {
    font-size: 1.1rem;
  }
}

@media screen and (min-height: 700px) and (min-width: 400px) {
  .truth,
  .splash {
    max-height: 100vh;
  }

  .nav-splash--proceed {
    bottom: 20%;
  }

  .rebellion-text {
    font-size: 0.75rem;
  }

  #youtube {
    top: 21%;
  }

  #bipoc-heading {
    font-size: 0.85rem;
  }

  .bipoc-text {
    font-size: 0.9rem;
  }
}

@media screen and (min-height: 500px) and (min-width: 650px) {
  .access-text {
    font-size: 0.45rem;
  }

  .camo-circle {
    width: 25.25%;
    height: 25.25vw;
    top: 11%;
  }

  .logo-banner {
    width: 20%;
  }

  .rebellion-text {
    font-size: 1.15rem;
  }

  .thanks {
    font-size: 0.65rem;
  }

  #thanks {
    padding-top: 20px;
  }

  .woc {
    font-size: 0.8rem;
  }

  #youtube {
    top: 36%;
  }

  #bipoc-heading {
    font-size: 1.25rem;
  }

  .bipoc-text {
    font-size: 1.35rem;
  }
}

@media screen and (min-width: 750px) {
  .access-text {
    font-size: 0.45rem;
  }

  body {
    background-color: rgb(240, 240, 240);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--blue);
  }

  .truth,
  .ever {
    background-color: white;
    height: 750px;
    width: 750px;
  }

  .truth-banner-text p:nth-child(1) {
    font-size: 1.5rem;
  }

  .truth-banner-text p:nth-child(2) {
    font-size: 2rem;
  }

  .camo-circle {
    width: 12.06rem;
    height: 12.06rem;
  }

  .rebellion-text {
    font-size: 1.35rem;
  }

  .thanks {
    font-size: 0.85rem;
  }

  #thanks {
    padding-top: 25px;
  }

  .woc {
    font-size: 1rem;
  }

  #youtube {
    top: 34%;
  }

  #bipoc-heading {
    font-size: 1.5rem;
  }

  .bipoc-text {
    font-size: 1.6rem;
  }
}