main {
  width: fit-content;
  margin: auto;
  max-width: 100%;
}

main > article > section {
  position: relative;
  width: 550px;
}

main > article > section > p {
  padding-right: 40px;
}

main > article > section > label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

main > article > section > label > input {
  width: 3vw;
  height: 3vw;
  position: absolute;
  top: -50%;
  transition: translateY(-27%);
  margin-left: 20px;
  animation-name: checkboxReset;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

main > article > section > label > input:checked {
  appearance: none;
  outline: none;
  animation-name: checkbox;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

main > article > section > label > input:checked::after{
  content: '!';
  font-size: 180%;
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
}

main > article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
  margin-bottom: 15vh;
}

.spoiler{
  display: none;
}

@keyframes warningBanner {
  0% {transform: translateY(0);}
  100% {transform: translateY(11vh);}
}

@keyframes checkbox {
  0% {appearance: none;}
  20%{border-radius: 0;}
  80% {border-radius: 50%;}
  100%{background-color: red; transform: rotateZ(1440deg); border-radius: 50%;}
}

@keyframes checkboxReset {
  0% {appearance: none; background-color: red; border-radius: 50%}
  80% {border-radius: 0;}
  100%{background-color: #ffffff; transform: rotateZ(-1440deg);}
}

@media only screen and (max-width: 1400px) {
  main > article {
    grid-template-columns: 1fr;
  }

  .warning-head {
    margin-bottom: 8vh;
  }
}


@media only screen and (max-width: 600px) {
  iframe{
    max-width: 100vw;
  }


  .spoiler > p {
    max-width: 100vw;
  }

  main > article > section > p {
    max-width: 100vw;
  }

  main > article > section > h1 {
    max-width: 100vw;
  }

  main > article > section{
    max-width: 100vw;
  }

  .warning-head{
    margin-bottom: 18vh;
  }
}