#wipe {
  position: absolute;
  z-index: 122;
  width: 120%;
  height: 140%;
  left: 0;
  top: 0;
  filter: blur(40px);
  background: #ffffff;
  transform: translate(-10%, -20%);
}

#wipe[dir=circle] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  background-image: url(../i/circle.svg);
  animation: circle 2s ease-in-out 0.5s forwards;
  width: 100%;
  height: 160%;
  transform: translate(0%, -20%) scale(1.2);
}

@keyframes circle {
  0% {
    transform: translate(0%, -20%) scale(1.2);
  }
  100% {
    transform: translate(0%, -20%) scale(60);
  }
}
#wipe[dir=down] {
  animation: wipe-down 1.2s ease-in-out 0.2s forwards;
}

@keyframes wipe-down {
  0% {
    top: 0;
  }
  100% {
    top: 140%;
  }
}
#wipe[dir=up] {
  animation: wipe-up 1.2s ease-in-out 0.2s forwards;
}

@keyframes wipe-up {
  0% {
    top: 0;
  }
  100% {
    top: -140%;
  }
}
#karaoke-decor {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
#karaoke-decor img {
  position: absolute;
}
#karaoke-decor [mary] {
  border-radius: 400px;
  filter: blur(1x);
  box-shadow: 0 0 15px cyan, 0 0 15px cyan, 0 0 45px cyan;
  display: none;
}
#karaoke-decor [tree] {
  right: -20px;
  bottom: -40px;
  transform: scale(1.2);
}
#karaoke-decor [sparkle] {
  bottom: -120px;
  left: -80px;
  max-width: 350px;
}
#karaoke-decor [heart-doily] {
  width: 130%;
  height: 120%;
  transform: translate(-10%, -10%);
  background-image: url(../i/heart-doily.gif);
}
#karaoke-decor [fish] {
  width: 130%;
  height: 120%;
  transform: translate(-10%, -10%);
  background-image: url(../i/fish-tile.gif);
}
#karaoke-decor [naruto] {
  width: 130%;
  height: 120%;
  transform: translate(-10%, -10%);
  background-image: url(../i/naruto.gif);
}
#karaoke-decor [lily] {
  width: 130%;
  height: 120%;
  transform: translate(-10%, -10%);
  background-image: url(../i/lily-pattern.gif);
  background-size: 30%;
}
#karaoke-decor [border] {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-size: fill;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
}
#karaoke-decor [border] img {
  width: 100vw;
  height: 100vh;
}

.fire::after {
  position: absolute;
  content: " ";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-image: url(../i/fire.gif);
}

.grayscale {
  filter: grayscale(100%) brightness(0.8) !important;
}

.bright-xs {
  filter: brightness(1.05) contrast(0.8);
}

.bright-m {
  filter: brightness(1.3) contrast(0.8);
}

.bright-l {
  filter: brightness(1.5) contrast(0.7);
}

.bright-xl {
  filter: brightness(2) contrast(0.7);
}

.bright-xxl {
  filter: brightness(2.5) contrast(0.7);
}

.zoomLarge {
  transform: scale(3);
}

.grayscale-blur-small {
  filter: grayscale(100%) brightness(0.8) blur(4px);
}

.grayscale-blur-med {
  filter: grayscale(100%) brightness(0.8) blur(6px);
}

.zoom-verysmall {
  animation: zoom-verysmall 1.75s 0.5s forwards;
}

.zoom-small {
  transform: scale(1.15);
  animation: zoom-small 1.75s 0.4s forwards;
}

.zoom-med {
  transform: scale(1.3);
  animation: zoom-med 2.25s 0.2s forwards;
}

.zoom-l {
  transform: scale(1.9);
  animation: zoom-l 2.25s 0.2s forwards;
}

@keyframes zoom-verysmall {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes zoom-small {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.3);
  }
}
@keyframes zoom-med {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1.55);
  }
}
@keyframes zoom-l {
  0% {
    transform: scale(1.9);
  }
  100% {
    transform: scale(2.3);
  }
}
.zoomOut-s {
  transform: scale(1.2);
  animation: zoomOut-s 1.75s 0.5s forwards;
}

.zoomOut-m {
  transform: scale(1.5);
  animation: zoomOut-m 1.75s 0.5s forwards;
}

@keyframes zoomOut-s {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes zoomOut-m {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.2);
  }
}
.blurInOut-xsmall {
  filter: blur(1px);
  animation: blurInOut-xsmall 2s infinite ease-in-out;
}

.blurInOut-verysmall {
  animation: blurInOut-verysmall 2.25s infinite ease-in-out;
}

.blurInOut-small {
  animation: blurInOut-small 2.25s infinite ease-in-out;
}

.blurOut-small {
  filter: blur(8px);
  animation: blurOut-small 1.75s 0.4s forwards;
}

@keyframes blurOut-small {
  0% {
    filter: blur(8px);
  }
  100% {
    filter: blur(1px);
  }
}
.blurSmall {
  filter: blur(4px);
}

.blur-med {
  filter: blur(8px);
}

@keyframes blurInOut-xsmall {
  0% {
    filter: blur(1px);
  }
  25% {
    filter: blur(3px);
  }
  50% {
    filter: blur(2px);
  }
  75% {
    filter: blur(4px);
  }
  100% {
    filter: blur(1px);
  }
}
@keyframes blurInOut-verysmall {
  0% {
    filter: blur(3px);
  }
  25% {
    filter: blur(6px);
  }
  50% {
    filter: blur(7px);
  }
  75% {
    filter: blur(2px);
  }
  100% {
    filter: blur(3px);
  }
}
@keyframes blurInOut-small {
  0% {
    filter: blur(4px);
  }
  25% {
    filter: blur(8px);
  }
  50% {
    filter: blur(12px);
  }
  75% {
    filter: blur(3px);
  }
  100% {
    filter: blur(5.5px);
  }
}
.shake {
  animation: shake 2s ease-in-out infinite;
}

.smallShake {
  animation: smallShake 1.5s infinite;
}

.shake-small {
  animation: smallShake 1.8s infinite ease-in-out;
}

.shake-m {
  animation: shake-m 1.8s infinite ease-in-out;
}

@keyframes shake {
  0%, 100% {
    margin-left: 0;
    margin-top: 0;
  }
  10% {
    margin-left: -1px;
    margin-top: -1px;
  }
  20% {
    margin-left: 1px;
    margin-top: 1px;
  }
  30% {
    margin-left: -2px;
    margin-top: -2px;
  }
  40% {
    margin-left: 2px;
    margin-top: 2px;
  }
  50% {
    margin-left: -3px;
    margin-top: -3px;
  }
  60% {
    margin-left: 3px;
    margin-top: 3px;
  }
  70% {
    margin-left: -2px;
    margin-top: -2px;
  }
  80% {
    margin-left: 2px;
    margin-top: 2px;
  }
  90% {
    margin-left: -1px;
    margin-top: -1px;
  }
}
@keyframes smallShake {
  0% {
    margin-left: 0;
    margin-top: 0;
  }
  6.67% {
    margin-left: 0.5px;
    margin-top: 0.5px;
  }
  13.33% {
    margin-left: 1px;
    margin-top: 1px;
  }
  20% {
    margin-left: 0.5px;
    margin-top: -0.5px;
  }
  26.67% {
    margin-left: 0;
    margin-top: -1px;
  }
  33.33% {
    margin-left: -0.5px;
    margin-top: -0.5px;
  }
  40% {
    margin-left: -1px;
    margin-top: 0;
  }
  46.67% {
    margin-left: -0.5px;
    margin-top: 0.5px;
  }
  53.33% {
    margin-left: 0;
    margin-top: 1px;
  }
  60% {
    margin-left: 0.5px;
    margin-top: 0.5px;
  }
  66.67% {
    margin-left: 1px;
    margin-top: 0;
  }
  73.33% {
    margin-left: 0.5px;
    margin-top: -0.5px;
  }
  80% {
    margin-left: 0;
    margin-top: -1px;
  }
  86.67% {
    margin-left: -0.5px;
    margin-top: -0.5px;
  }
  93.33% {
    margin-left: -1px;
    margin-top: 0;
  }
}

/*# sourceMappingURL=effects.css.map */