@media screen and (min-width: 1474px) and (max-width: 1729px) {
  .quote {
    font-size: 6rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 58vw;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1318px) and (max-width: 1473px) {
  .quote {
    font-size: 6rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 60vw;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1170px) and (max-width: 1317px) {
  .quote {
    font-size: 6rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 67vw;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1169px) {
  .quote {
    font-size: 6rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 74vw;
    justify-content: space-between;
  }
  .transform {
    z-index: -1;
    width: 40em;
    height: 23em;
    border: solid 6px #d10a00;
    -webkit-animation: spin 54s ease-out 0s infinite alternate;
            animation: spin 54s ease-out 0s infinite alternate;
  }
}
@media screen and (min-width: 955px) and (max-width: 1023px) {
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 33em;
    height: 18em;
    border: solid 6px #d10a00;
    -webkit-animation: spin 54s ease-out 0s infinite alternate;
            animation: spin 54s ease-out 0s infinite alternate;
  }
  .quote {
    font-size: 6rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 75vw;
    justify-content: space-between;
  }
  section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
}
@media screen and (min-width: 768px) and (max-width: 954px) {
  /* Tablet */
  .intro {
    width: 40%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-name: imgSize;
            animation-name: imgSize;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    z-index: 1;
  }
  body::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    -webkit-animation-name: backUp;
            animation-name: backUp;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    z-index: 0;
    pointer-events: none;
  }
  @-webkit-keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .intro img {
    width: 100%;
  }
  @-webkit-keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  @keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 32em;
    height: 18em;
    border: solid 6px #d10a00;
    -webkit-animation: spin 54s ease-out 0s infinite alternate;
            animation: spin 54s ease-out 0s infinite alternate;
  }
  @-webkit-keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  .quote {
    font-size: 5rem;
    position: absolute;
    color: #fff;
    opacity: 0.7;
    display: flex;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 77vw;
    justify-content: space-between;
  }
  /*/////////////////////////////////////////////*/
  aside {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
  aside button {
    background-color: #4d0000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 20px;
    border: none;
  }
  aside button.active {
    background-color: #eb0c00;
    transform: scale(1.4);
    transition: 0.4s ease-in-out;
  }
  body {
    margin: 0;
  }
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .main-contents {
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
  @-webkit-keyframes glitch {
    0% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    1% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    2% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    3% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    4% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    5% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    6% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    7% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    8% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    9% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    10% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    11% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    12% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    13% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    14% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    15% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    16% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    17% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    18% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    19% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    20% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    21% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    22% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    23% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    24% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    25% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    26% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    27% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    28% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    29% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    30% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    31% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    32% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    33% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    34% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    35% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    36% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    37% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    38% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    39% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    40% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    41% {
      text-shadow: 50px 0 0 blue, -50px 0 0 lime;
    }
    42% {
      text-shadow: 0 0 0 blue, 0 0 0 lime;
    }
    43% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    44% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    45% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    46% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    47% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    48% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    49% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    50% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    51% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    52% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    53% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    54% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    55% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    56% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    57% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    58% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    59% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    60% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    61% {
      text-shadow: 30px 0 0 red, -30px 0 0 lime;
    }
    62% {
      text-shadow: 0 0 0 red, 0 0 0 lime;
    }
    63% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    64% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    65% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    66% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    67% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    68% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    69% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    70% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    71% {
      text-shadow: 70px 0 0 red, -70px 0 0 blue;
    }
    72% {
      text-shadow: 0 0 0 red, 0 0 0 blue;
    }
    73% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    74% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    75% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    76% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    77% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    78% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    79% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    80% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    81% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    82% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    83% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    84% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    85% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    86% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    87% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    88% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    89% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    90% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    91% {
      text-shadow: 60px 0 0 lime, -60px 0 0 blue;
    }
    92% {
      text-shadow: 0 0 0 lime, 0 0 0 blue;
    }
    92% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    93% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    94% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    95% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    96% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    97% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    98% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    99% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    100% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
  }
  @keyframes glitch {
    0% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    1% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    2% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    3% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    4% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    5% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    6% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    7% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    8% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    9% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    10% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    11% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    12% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    13% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    14% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    15% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    16% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    17% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    18% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    19% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    20% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    21% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    22% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    23% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    24% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    25% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    26% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    27% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    28% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    29% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    30% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    31% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    32% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    33% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    34% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    35% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    36% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    37% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    38% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    39% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    40% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    41% {
      text-shadow: 50px 0 0 blue, -50px 0 0 lime;
    }
    42% {
      text-shadow: 0 0 0 blue, 0 0 0 lime;
    }
    43% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    44% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    45% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    46% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    47% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    48% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    49% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    50% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    51% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    52% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    53% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    54% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    55% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    56% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    57% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    58% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    59% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    60% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    61% {
      text-shadow: 30px 0 0 red, -30px 0 0 lime;
    }
    62% {
      text-shadow: 0 0 0 red, 0 0 0 lime;
    }
    63% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    64% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    65% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    66% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
    }
    67% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    68% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    69% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    70% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    71% {
      text-shadow: 70px 0 0 red, -70px 0 0 blue;
    }
    72% {
      text-shadow: 0 0 0 red, 0 0 0 blue;
    }
    73% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    74% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    75% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    76% {
      text-shadow: 1px 0 0 red, -1px 0 0 blue;
    }
    77% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    78% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    79% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    80% {
      text-shadow: -1px 0 0 red, 1px 0 0 blue;
    }
    81% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    82% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    83% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    84% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    85% {
      text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
    }
    86% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    87% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    88% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    89% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    90% {
      text-shadow: -1px 0 0 red, 1px 0 0 lime;
    }
    91% {
      text-shadow: 60px 0 0 lime, -60px 0 0 blue;
    }
    92% {
      text-shadow: 0 0 0 lime, 0 0 0 blue;
    }
    92% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    93% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    94% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    95% {
      text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
    }
    96% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    97% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    98% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    99% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
    100% {
      text-shadow: -1px 0 0 blue, 1px 0 0 lime;
    }
  }
}
@media screen and (min-width: 650px) and (max-width: 767px) {
  /* Mobile */
  main {
    width: 100%;
    height: 100vh;
  }
  .intro {
    width: 40%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-name: imgSize;
            animation-name: imgSize;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    z-index: 1;
  }
  body::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    -webkit-animation-name: backUp;
            animation-name: backUp;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    z-index: 0;
    pointer-events: none;
  }
  @-webkit-keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .intro img {
    width: 100%;
  }
  @-webkit-keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  @keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 33em;
    height: 16em;
    border: solid 6px #d10a00;
  }
  @-webkit-keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  .quote {
    display: none;
  }
  /*/////////////////////////////////////////////*/
  aside {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
  aside button {
    background-color: #4d0000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 20px;
    border: none;
  }
  aside button.active {
    background-color: #eb0c00;
    transform: scale(1.4);
    transition: 0.4s ease-in-out;
  }
  body {
    margin: 0;
  }
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .main-contents {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
}
@media screen and (min-width: 551px) and (max-width: 649px) {
  main {
    width: 100%;
    height: 100vh;
  }
  .intro {
    width: 40%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-name: imgSize;
            animation-name: imgSize;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    z-index: 1;
  }
  body::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    -webkit-animation-name: backUp;
            animation-name: backUp;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    z-index: 0;
    pointer-events: none;
  }
  @-webkit-keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .intro img {
    width: 100%;
  }
  @-webkit-keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  @keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 28em;
    height: 16em;
    border: solid 6px #d10a00;
  }
  @-webkit-keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  .quote {
    display: none;
  }
  /*/////////////////////////////////////////////*/
  aside {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
  aside button {
    background-color: #4d0000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 20px;
    border: none;
  }
  aside button.active {
    background-color: #eb0c00;
    transform: scale(1.4);
    transition: 0.4s ease-in-out;
  }
  body {
    margin: 0;
  }
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .main-contents {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
}
@media screen and (min-width: 450px) and (max-width: 550px) {
  main {
    width: 100%;
    height: 100vh;
  }
  .intro {
    width: 40%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation-name: imgSize;
            animation-name: imgSize;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    z-index: 1;
  }
  body::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    -webkit-animation-name: backUp;
            animation-name: backUp;
    -webkit-animation-duration: 1.4s;
            animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    z-index: 0;
    pointer-events: none;
  }
  @-webkit-keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes backUp {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .intro img {
    width: 100%;
  }
  @-webkit-keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  @keyframes imgSize {
    0% {
      transform: translate(-50%, -50%) scale(0.1);
      left: 50%;
      top: 50%;
      opacity: 0;
    }
    35% {
      transform: translate(-50%, -50%) scale(0.3);
      left: 50%;
      top: 50%;
      opacity: 0.5;
    }
    40% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -50%) scale(1);
      left: 50%;
      top: 50%;
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(0.05);
      left: 3.7rem;
      top: 3.15rem;
    }
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 22em;
    height: 16em;
    border: solid 4px #d10a00;
  }
  @-webkit-keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-3600deg);
    }
  }
  .quote {
    display: none;
  }
  /*/////////////////////////////////////////////*/
  aside {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
  }
  aside button {
    background-color: #4d0000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 20px;
    border: none;
  }
  aside button.active {
    background-color: #eb0c00;
    transform: scale(1.4);
    transition: 0.4s ease-in-out;
  }
  body {
    margin: 0;
  }
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .main-contents {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
}
@media screen and (min-width: 415px) and (max-width: 449px) {
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    line-height: 2.5em;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 18em;
    height: 36em;
    border: solid 4px #d10a00;
  }
  aside button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 15px 0;
    border: none;
    background-color: rgba(255, 0, 0, 0.3);
  }
  .quote {
    display: none;
  }
  .main-contents {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
  .main-text {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: 1s;
  }
  section {
    line-height: 2.5em;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.15rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.005em;
    -webkit-animation: glitch 2s steps(100) infinite;
            animation: glitch 2s steps(100) infinite;
  }
  .square {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 65em;
    z-index: -1;
  }
  .transform {
    z-index: -1;
    width: 18em;
    height: 25em;
    border: solid 4px #d10a00;
  }
  aside button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 15px 0;
    border: none;
    background-color: rgba(255, 0, 0, 0.3);
  }
  .quote {
    display: none;
  }
  .main-contents {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    overflow: hidden;
  }
  .main-contents img {
    height: 100%;
  }
}/*# sourceMappingURL=index.media.css.map */