#rules {
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  place-content: center;
  margin: auto;
  width: clamp(36ch, 400px, 600px);
  text-align: center;
  background: aliceblue; }

.wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          animation: wobble-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

@-webkit-keyframes wobble-hor-bottom {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0); }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px); }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px); }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

@keyframes wobble-hor-bottom {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0); }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px); }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px); }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px); }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px); }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px); }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0); } }

.jello-horizontal {
  -webkit-animation: jello-horizontal 1s 2s both;
          animation: jello-horizontal 1s 2s both; }

/* ----------------------------------------------
 * Generated by Animista on 2021-8-31 10:23:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

/* ----------------------------------------------
 * Generated by Animista on 2021-9-1 8:58:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; }

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

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

/* ----------------------------------------------
 * Generated by Animista on 2021-9-1 9:2:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * @animation flicker-in-1
 * ----------------------------------------
 */
.flicker-in-1 {
  -webkit-animation: flicker-in-1 1.2s 2s linear both;
  animation: flicker-in-1 1.2s 2s linear both; }

@-webkit-keyframes flicker-in-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 0; }
  10.1% {
    opacity: 1; }
  10.2% {
    opacity: 0; }
  20% {
    opacity: 0; }
  20.1% {
    opacity: 1; }
  20.6% {
    opacity: 0; }
  30% {
    opacity: 0; }
  30.1% {
    opacity: 1; }
  30.5% {
    opacity: 1; }
  30.6% {
    opacity: 0; }
  45% {
    opacity: 0; }
  45.1% {
    opacity: 1; }
  50% {
    opacity: 1; }
  55% {
    opacity: 1; }
  55.1% {
    opacity: 0; }
  57% {
    opacity: 0; }
  57.1% {
    opacity: 1; }
  60% {
    opacity: 1; }
  60.1% {
    opacity: 0; }
  65% {
    opacity: 0; }
  65.1% {
    opacity: 1; }
  75% {
    opacity: 1; }
  75.1% {
    opacity: 0; }
  77% {
    opacity: 0; }
  77.1% {
    opacity: 1; }
  85% {
    opacity: 1; }
  85.1% {
    opacity: 0; }
  86% {
    opacity: 0; }
  86.1% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes flicker-in-1 {
  0% {
    opacity: 0; }
  10% {
    opacity: 0; }
  10.1% {
    opacity: 1; }
  10.2% {
    opacity: 0; }
  20% {
    opacity: 0; }
  20.1% {
    opacity: 1; }
  20.6% {
    opacity: 0; }
  30% {
    opacity: 0; }
  30.1% {
    opacity: 1; }
  30.5% {
    opacity: 1; }
  30.6% {
    opacity: 0; }
  45% {
    opacity: 0; }
  45.1% {
    opacity: 1; }
  50% {
    opacity: 1; }
  55% {
    opacity: 1; }
  55.1% {
    opacity: 0; }
  57% {
    opacity: 0; }
  57.1% {
    opacity: 1; }
  60% {
    opacity: 1; }
  60.1% {
    opacity: 0; }
  65% {
    opacity: 0; }
  65.1% {
    opacity: 1; }
  75% {
    opacity: 1; }
  75.1% {
    opacity: 0; }
  77% {
    opacity: 0; }
  77.1% {
    opacity: 1; }
  85% {
    opacity: 1; }
  85.1% {
    opacity: 0; }
  86% {
    opacity: 0; }
  86.1% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.loading {
  -webkit-animation: loading 300ms 300ms linear both;
          animation: loading 300ms 300ms linear both; }

@-webkit-keyframes loading {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes loading {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.loading2 {
  -webkit-animation: loading 300ms 1200ms linear both;
          animation: loading 300ms 1200ms linear both; }

@-webkit-keyframes loading2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes loading2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.bounce-in-top {
  -webkit-animation: bounce-in-top 1.1s both;
  animation: bounce-in-top 1.1s both; }

:root {
  --LC: hsl(0deg 100% 50%);
  --RC: hsl(60deg 100% 50%);
  --TV-left: 0;
  --TV-top: 0;
  --Score-left: -100vw;
  --Score-top: -100vh;
  --ScoreBG-width: 0;
  --ScoreBG-height: 0;
  --TV-size: 100%;
  --Points-left: 0;
  --Points-width: 0;
  --Points-top: 0;
  --Points-width: 0;
  --Swatch-width: 0;
  --Swatch-height: 0; }

.hide {
  opacity: 0;
  pointer-events: none; }

.clear {
  -webkit-box-shadow: none !important;
          box-shadow: none !important; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  text-decoration: none;
  list-style: none; }
  * a,
  * a:visited {
    color: inherit; }

target {
  -webkit-tap-highlight-color: transparent; }

body {
  display: grid;
  height: 100vh;
  overflow: hidden;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url(./images/tvBurst.png), #00eefa;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  background-size: cover;
  -webkit-box-shadow: inset 0 -111px 50px 7px rgba(0,0,0,0.27843);
          box-shadow: inset 0 -111px 50px 7px rgba(0,0,0,0.27843); }

img#logo {
  position: fixed;
  left: calc(50vw - var(--Logo-left));
  width: clamp(10vw, 90vw, 590px);
  margin: auto;
  margin-top: 3vh;
  z-index: 6;
  cursor: pointer;
  -webkit-transition: -webkit-filter 333ms ease-in-out;
  transition: -webkit-filter 333ms ease-in-out;
  transition: filter 333ms ease-in-out;
  transition: filter 333ms ease-in-out, -webkit-filter 333ms ease-in-out; }
  img#logo:hover {
    -webkit-filter: drop-shadow(2px 4px 6px black);
            filter: drop-shadow(2px 4px 6px black); }

#header {
  position: fixed;
  display: grid;
  left: 0;
  top: -2em;
  width: 100vw;
  height: 0;
  background: rgba(51,51,51,0.81961);
  z-index: 5;
  overflow: hidden;
  -webkit-transition: height 333ms ease;
  transition: height 333ms ease; }
  #header .howto {
    text-align: center;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    grid-gap: 1em;
    gap: 1em;
    padding: clamp(1em, 2vw, 2vw);
    background: black url(./images/bgStripes.png);
    border-radius: 50%;
    height: clamp(300px, 100%, 400px);
    width: clamp(300px, 100%, 420px);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-size: contain;
    background-position: center; }
    #header .howto p {
      color: rgba(255,255,255,0.76863);
      font-weight: 600;
      text-shadow: 2px 2px black, 4px 4px 6px black;
      text-transform: uppercase; }
      #header .howto p span {
        font-weight: 800;
        color: white; }

.expand {
  height: 100vh !important;
  top: 0 !important; }

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 2em;
  background: #333;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 999; }

ul.footer-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-gap: 3em;
  gap: 3em; }
  ul.footer-list span {
    position: relative;
    font-size: 1em;
    -webkit-transition: -webkit-filter 333ms ease-in-out;
    transition: -webkit-filter 333ms ease-in-out;
    transition: filter 333ms ease-in-out;
    transition: filter 333ms ease-in-out, -webkit-filter 333ms ease-in-out; }
    ul.footer-list span:hover {
      -webkit-filter: drop-shadow(0px 1px 6px black);
              filter: drop-shadow(0px 1px 6px black); }

div#root {
  display: grid;
  grid-template-columns: minmax(0, 2em) 1fr minmax(0, 2em);
  grid-template-rows: 1fr; }

img#background {
  width: clamp(200px, 80vh, 100%);
  grid-row: 1;
  grid-column: 1/-1;
  margin: auto;
  z-index: 3;
  pointer-events: none; }

section.game {
  grid-row: 1;
  grid-column: 1/-1;
  z-index: 1;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  place-content: center;
  grid-template-columns: 10px 1fr 1fr 10px;
  grid-template-rows: 1fr;
  z-index: 2; }

#score {
  z-index: 3;
  grid-row: 1;
  grid-column: 1/-1;
  color: hsl(60deg 100% 50%);
  color: var(--RC);
  text-shadow: 0px 0px 0px black, 1px 1px white, 3px 3px black, 6px 4px black, 0px 1px 12px black, -1px -1px 0px white, 4px 4px 0px white, 5px 5px 0px white, 8px 6px 3px white;
  font-size: var(--Score-font-size);
  font-weight: 900;
  left: -100vw;
  left: var(--Score-left);
  top: -100vh;
  top: var(--Score-top);
  position: absolute; }
  #score:after {
    content: "";
    position: absolute;
    width: 0;
    width: var(--ScoreBG-width);
    height: 0;
    height: var(--ScoreBG-height);
    left: calc(0 * -0.38);
    left: calc(var(--ScoreBG-width) * -0.38);
    top: calc(0 * -0.38);
    top: calc(var(--ScoreBG-height) * -0.38);
    background: hsl(0deg 100% 50%);
    background: var(--LC);
    border-radius: 30%;
    z-index: -1; }

target {
  width: 0;
  width: var(--Swatch-width);
  height: 0;
  height: var(--Swatch-height);
  -ms-flex-item-align: center;
      align-self: center;
  pointer-events: all; }

.target_left {
  grid-column: 2;
  grid-row: 1;
  background: hsl(0deg 100% 50%);
  background: var(--LC);
  justify-self: flex-end;
  cursor: pointer;
  -webkit-transition: -webkit-box-shadow 333ms ease-in-out;
  transition: -webkit-box-shadow 333ms ease-in-out;
  transition: box-shadow 333ms ease-in-out;
  transition: box-shadow 333ms ease-in-out, -webkit-box-shadow 333ms ease-in-out; }
  .target_left:hover {
    -webkit-box-shadow: inset 0 0 20px 4px rgba(0,0,0,0.56863);
            box-shadow: inset 0 0 20px 4px rgba(0,0,0,0.56863); }
  .target_left * {
    margin: auto; }

.target_right {
  grid-column: 3;
  grid-row: 1;
  background: hsl(60deg 100% 50%);
  background: var(--RC);
  justify-self: flex-start; }
  .target_right * {
    margin: auto; }

#points {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  z-index: 0;
  z-index: 0;
  margin-top: 0;
  margin-top: var(--Points-top);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content; }
  #points p {
    text-shadow: 5px 5px rgba(255,255,255,0.5098), 10px 10px rgba(177,177,177,0.54902), 15px 15px 14px hsl(0deg 100% 50%), -5px -5px 14px hsl(60deg 100% 50%);
    text-shadow: 5px 5px rgba(255,255,255,0.5098), 10px 10px rgba(177,177,177,0.54902), 15px 15px 14px var(--LC), -5px -5px 14px var(--RC);
    color: #f6f5f2;
    background-blend-mode: hard-light;
    font-size: calc(100% / 8);
    font-size: calc(var(--TV-size) / 8);
    font-weight: 800; }