:root {
  --vh: 1vh;
  --header-height: 3.75rem;
  --main-height: calc( calc(var(--vh, 1vh) * 100) - 100px); }
  @media (max-width: 640px) {
    :root {
      --header-height: 3rem;
      --main-height: calc( calc(var(--vh, 1vh) * 100) - 88px); } }

.feedback, input[type="radio"] + label,
input[type="checkbox"] + label {
  border-radius: 0.6rem;
  padding: 1rem; }

/*-----TYPOGRAPHY-----*/
/*-----LAYOUT-----*/
#slide-3 {
  padding-bottom: 6rem; }

.limelight-player {
  margin: 2rem 0; }
  .limelight-player + a {
    display: block; }

.block-8 {
  padding-left: 1rem; }

legend,
form > p > label {
  font-weight: bold;
  font-size: 1.2rem;
  margin-block: 1rem; }

.feedback {
  background-color: #e2e2e2; }
  .feedback h3 {
    margin-top: 0; }
    .feedback h3::before {
      content: "";
      width: 42px;
      height: 42px;
      background-image: url("svg/check.svg");
      display: inline-block;
      vertical-align: middle;
      margin-right: 1ch; }
    .feedback h3.wrong::before {
      background-image: url("svg/x.svg"); }

#name-form {
  width: Min(600px, 100%);
  margin: 1rem auto;
  background-color: #e2e2e2;
  border-radius: 0 0 0.6rem 0.6rem; }
  #name-form p {
    background-color: #050505;
    color: #fefefe;
    padding: 0.8rem;
    text-align: center;
    margin: 0; }
  #name-form input[type="text"] {
    width: 100%; }

.form-content {
  padding: 1rem; }
  .form-content > *:not(:last-child) {
    display: block;
    margin-block: 0.5em; }

.answer {
  border: solid 1px #050505;
  padding: 0.5em;
  margin-block: 1em; }

/*-----INPUT-----*/
input[type="radio"],
input[type="checkbox"] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; }

.submit,
.print {
  color: #fefefe;
  background-color: #999999;
  padding: 0.5em 1em;
  border-radius: 2rem;
  font-weight: bold;
  text-transform: uppercase; }
  .submit:enabled,
  .print:enabled {
    color: #fefefe;
    background-color: #c8102e;
    transition: background-color 600ms ease; }
    .submit:enabled:hover,
    .print:enabled:hover {
      background-color: #050505; }

.btn-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-block: 1rem; }

input[type="radio"] + label,
input[type="checkbox"] + label {
  display: block;
  background-color: #fff5cc;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 400ms ease;
  display: -ms-flexbox;
  display: flex;
  gap: 1ch;
  -ms-flex-align: center;
  align-items: center; }
  input[type="radio"] + label::before,
  input[type="checkbox"] + label::before {
    content: "";
    background-image: url("svg/radio_button_unchecked.svg");
    width: 22px;
    height: 22px; }

input[type="radio"]:hover + label,
input[type="checkbox"]:hover + label {
  background-color: #ffcc00; }

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  color: #fefefe;
  background-color: #050505; }
  input[type="radio"]:checked + label::before,
  input[type="checkbox"]:checked + label::before {
    background-image: url("svg/radio_button_checked.svg");
    filter: invert(100%); }

input[type="checkbox"] + label::before {
  background-image: url("svg/check_box_unchecked.svg"); }

input[type="checkbox"]:checked + label::before {
  background-image: url("svg/check_box_checked.svg"); }

textarea {
  width: 100%;
  min-height: 10rem;
  resize: none; }

.next {
  position: relative;
  left: calc(100% - 8rem);
  height: 3rem;
  width: 8rem;
  padding-left: 50px;
  text-align: left;
  background-image: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkxJREFUeNrsWU1LAkEYHpcueYrqFkKGYdDFU0FdVqhDh+zjUtDBDLyUCUJUN7Vbv0L8B94L3H+QEB0sqEC6qXjz2oyMsbjuzPuOu63WPjAI+zHzzLvP+8w7IyE+fPjwHAGnO3x5/4zRnxnTpc7q0mJtrEhzkknadNpigkcZcYO28qiTCIxAlpHMc7JYMPJFSt74FdKULPv0Jdr2HfjSFdpSlHzHNdJcCtUBzY4KRjiOkYyGIHzqAmHC+6vy/p2LtEsRVo54AKjhD5cJm4mHZRqfAnRUghJut5qk3WxZri+EQmQ6GIRKhY13oBxpbmtVKOHC7c3Qe8vRKLm8usZEPC6yQ1ki5qGjDItwH2/1OlYmeSX34MmnE2+g8/HRkU56XBclVUjrHpPWVUjHPCaNk4dIT7bJ9ipOtq9GQ7WCBPu00JeNxwfyXHtCOcT9XaFnfWZEoitkZzch822lxcWCbrerYmOWd9Y2NpV0o6m8xKKzrjjgT5ZtbSv3oQlqACFOUme95VkFjOzh0TG0FoGRhta2Wbo0Y4mz59mEIbDjoUn2dEKwIogRBxZDPcJZeA1SU9E0aP8GJc7upy8y4AmKxheRLmM+efo8I53Y7Nw8RkllNGmuJ/BuOUI92E6rbEJI7RuivJJZXhHrCjuJPYvLRAYWFQCKyj7NC/EK1sOZB/cJK3hxRXYeMpF7ROmKyDuIQxYch3bj0nFAyzhPipyLxFm/Oeii9rdPmEwRD2OTU5R0XMOoU9T/cWpqI5nJOJ+WTMLVfwJ8+PAxBvgWYADCoMrm4MiKnQAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center left;
  font-weight: bold;
  margin-top: 1rem; }
  .next:hover {
    animation: arrow-bob 0.75s ease-in-out alternate infinite; }
  .next:disabled {
    pointer-events: none;
    opacity: 0; }

/*-----ANIMATION-----*/
@keyframes arrow-bob {
  from {
    background-position: 0 -5px; }
  to {
    background-position: 0 5px; } }