html {
  touch-action: manipulation;
}
video {
  width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#controls {
  position: absolute;
  top: -48px;
  right: 24px;
}

#credits {
  position: absolute;
  top: -48px;
  right: 24px;
  border: 1px solid #cacaca;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 0.6em 1.8em;
  z-index: 2;
  display: none;
  width: 240px;
  font-size: 14px;
}

.peek-a-pooh-container, .share-button-container {
display: flex;
justify-content: center;
flex-direction: row;
}

.peek-a-pooh {
  width: 100px;
}

h2 {
  font-size: 30px;
  line-height: 28px;
  font-weight: 400;
}

a {
  color: #49afff;
}

img {
  width: 280px;
}

body, button, input {
  font-family: 'Ubuntu Mono', monospace;
  font-size: 16px;
  color: #282828;
}

body {
  font-size: 16px;
  line-height: 24px;
  color: #282828;
  background-color: rgb(169, 169, 217);
  margin: 0;
  padding: 0;
  position: relative;
}

#body-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 64px;
  margin-bottom: 40px;
}

#quiz-container {
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  z-index: 1;
}
#quiz {
  border: 1px solid #cacaca;
  border-radius: 5px;
  background-color: #ffffff;
  width: 280px;
  padding: 1.4em 1.8em;
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
  z-index: 3;
}

#counter {
  color: #fff;
}

#name-field {
  width: 270px;
}

.question-text {
  margin-bottom: 36px;
}

.choice-label-style {
  color: #959faa;
  font-style: italic;
}

.instruction-text {
  background-color: #d0eaff;
  font-style: italic;
}

.sender-name {
  word-break: break-word;
}

.emojis-container {
  margin-top: 12px;
}

.end-emojis {
  text-align: center;
}

/* selection styling */
.select-row, .compare-row-neutral, .compare-row-correct, .compare-row-incorrect {
  display: inline-block;
  margin-top: 2px;
  margin-bottom: 2px;
  background: #fff;
  border: 1.6px solid #E8E8E8;
  margin-right: 6px!important;
  border-radius: 5px;
  cursor: pointer;
  padding: 6px;
  width: 284px;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
}

.compare-row-neutral, .compare-row-correct, .compare-row-incorrect {
  box-sizing: border-box;
}

.compare-row-correct {
  background-color:#d0eaff;
}

.compare-row-correct:hover {
  border: 1.6px solid #49afff;
}

.compare-row-incorrect {
  background-color:#ffcccc;
}
.compare-row-incorrect:hover {
  border: 1.6px solid #ca1515;
}

.compare-question-unit {
  margin-bottom: 60px;
}
.correct, .music-on, #final-score {
  color: #49afff;
}

.incorrect {
  color: #ca1515;
}

.select-row:hover,#start-button:hover, #next-button:hover, #enter-name-next-button:hover, #restart-button:hover, #music-button:hover, #credits-button:hover {
  border: 1.6px solid #49afff;
  cursor: pointer;
}

.selected-style {
  border: 1.6px solid #49afff;
}

#header-parent {
  width: 298px;
  display: flex;
  justify-content: space-between;
}

#outside-quiz {
  margin-top: 16px;
  margin-bottom: 36px;
  float: right;
}

#copy-tray {
  display: flex;
  align-items: center;
}

#link-to-copy {
  font-size: 12px !important;
  height: 28px;
  background-color: #efefef;
  border: 1px solid #787878;
  width: 280px;
}

#scorecard {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}

.scorecard-column {
  width: 140px;
}

#start-button, #next-button, #enter-name-next-button, #restart-button, #music-button, #credits-button {
  padding: 8px 20px;
  border: 1.6px solid #E8E8E8;
  background-color: #fff;
  border-radius: 5px;
}

.material-symbols-outlined {
  vertical-align: top;
}

#music-button {
  padding: 8px 10px;
  }

#music-button span {
  font-size: 16px;
}

#counter, #quiz-start, #quiz-start-sent-link, #enter-name, #quiz-play, #quiz-end-copy, #quiz-end-results, #quiz-end-make-your-own,
#enter-name-next-button, #next-button, #restart-button, #share-link-button {
  display: none;
}

#share-link-button, #share-results-button {

  background-color: #4ea568;
  border: 1.6px solid #E8E8E8;
  color: #ffffff;
  padding: 16px 2px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 22px;
  margin-top: 20px;
}

#share-link-button {
  width: 290px;
}

#share-results-button {
  width: 280px;
  margin-left: -8px;
  margin-bottom: 20px;
}

/* animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInSubtle {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideFadeInFromRight {
	0% {
    transform: translateX(-1%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-zero, .fade-one, .fade-two, .fade-three, .fade-four {
	animation: 0.6s ease-out 0s 1 slideFadeInFromRight;
	animation-fill-mode: both;
}

.fade-static-zero, .fade-static-one, .fade-static-two, .fade-static-three, .fade-static-four {
  animation: 0.6s ease-out 0s 1 fadeIn;
  animation-fill-mode: both;
}

.fade-static-subtle-zero, .fade-static-subtle-one, .fade-static-subtle-two, .fade-static-subtle-three, .fade-static-subtle-four {
  animation: 1s ease-out 0s 1 fadeInSubtle;
  animation-fill-mode: both;
}

.fade-one, .fade-static-one {
	animation-delay: 0.2s;
}

.fade-two, .fade-static-two {
	animation-delay: 0.4s;
}

.fade-three, .fade-static-three {
	animation-delay: 0.6s;
}

.fade-four, .fade-static-four {
	animation-delay: 0.8s;
}