body {
  background: #000;
}

#CANVAS {
  position: fixed;
  z-index: -2147483648;
  width: 100vw;
  height: 100vh;
}

#CANVAS:-moz-full-screen {
  width: 100%;
  height: 100%;
}

#CANVAS:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

#CANVAS:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

#CANVAS:fullscreen {
  width: 100%;
  height: 100%;
}

#presetSelect {
  max-width: 300px;
}

#presetCycleLength {
  width: 50px;
}

#NOISE {
  position: fixed;
  z-index: -2147483648;
  width: 100vw;
  height: 100vh;
  background-image: url(data:image/png;base64,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);
  background-repeat: repeat;
  backdrop-filter: invert(100%);
}

#CANVAS.invrtd {
  backdrop-filter: invert(100%);
}

.ui.button {
  transition: all 0.25s ease-out;
  backdrop-filter: blur(10px);
}

section {
  background: white !important;
}

.ui.secondary.inverted.pointing.menu {
  border: none;
}

.hidden.menu {
  display: none;
}

.masthead.segment {
  min-height: 700px;
  padding: 1em 0em;
}

.masthead .logo.item img {
  margin-right: 1em;
}

.masthead .ui.menu .ui.button {
  margin-left: 0.5em;
}

.masthead h1.ui.header {
  margin-top: 3em;
  margin-bottom: 0em;
  font-size: 4em;
  font-weight: normal;
}

.masthead h2 {
  font-size: 1.7em;
  font-weight: normal;
}

.ui.vertical.stripe {
  padding: 8em 0em;
}

.ui.vertical.stripe h3 {
  font-size: 2em;
}

.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
  margin-top: 3em;
}

.ui.vertical.stripe .floated.image {
  clear: both;
}

.ui.vertical.stripe p {
  font-size: 1.33em;
}

.ui.vertical.stripe .horizontal.divider {
  margin: 3em 0em;
}

.quote.stripe.segment {
  padding: 0em;
}

.quote.stripe.segment .grid .column {
  padding-top: 5em;
  padding-bottom: 5em;
}

.footer.segment {
  padding: 5em 0em;
}

.secondary.pointing.menu .toc.item {
  display: none;
}

@media only screen and (max-width: 700px) {
  .ui.fixed.menu {
    display: none !important;
  }
  .secondary.pointing.menu .item,
  .secondary.pointing.menu .menu {
    display: none;
  }
  .secondary.pointing.menu .toc.item {
    display: block;
  }
  .masthead.segment {
    min-height: 350px;
  }
  .masthead h1.ui.header {
    font-size: 2em;
    margin-top: 1.5em;
  }
  .masthead h2 {
    margin-top: 0.5em;
    font-size: 1.5em;
  }
}
.ui.dimmer {
  backdrop-filter: blur(5px);
}

#M3387483 {
  background-color: transparent;
  background-image: url("https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png"), url("https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png");
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 14%;
  border-radius: 5px;
  overflow: hidden;
  backdrop-filter: invert(95%);
}

#M3387483 > .content {
  background-color: #FFF;
}

#M3387483 > .actions, #M3387483 > .header {
  background-color: transparent; /* background-color: rgba(255, 255, 255, 0.65); */
}

.audio-player {
  position: absolute;
  top: 64%;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
  opacity: 0.9;
  left: calc(50% - 50px);
  /* transform: translateX(-50%);*/
  /* transform: translateY(-50%);*/
  transition: all 0.2s ease-in-out;
}

.audio-player:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.audio-player-controls {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
}

.audio-player-button {
  height: 50px;
}

.audio-player-back-ring-center {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 86px;
  height: 86px;
  background-color: white;
  border-radius: 43px;
  box-shadow: #000 0px 0px 5px, #F0F 0px 0px 10px, #F0F 0px 0px 15px, #f754e1 0px 0px 75px, -2px 2px 0px #f754e1;
}

/* src: https://codepen.io/acupoftee/pen/WNbBxXq */
.logo-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* font-family: 'Pixel Calculon', sans-serif; */
  font-family: "Nonfiction", sans-serif;
  font-style: italic;
}

.glitch {
  text-shadow: #000 0px 0px 5px, #F0F 0px 0px 10px, #F0F 0px 0px 15px, #f754e1 0px 0px 75px, -2px 2px 0px #f754e1, -4px 4px 0px #f754e1, -6px 6px 0px #f754e1;
}

.glitch, .glow {
  position: relative;
  opacity: 0.9;
  color: #FFF;
  font-size: 9vw;
  animation: glitch 5s 5s infinite;
  line-height: normal !important;
}

.glitch::before, .glow::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -2px;
  text-shadow: -5px 0 magenta;
  animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}

.glitch::after, .glow::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 2px;
  text-shadow: -5px 0 lightgreen;
  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}

@keyframes glitch {
  1% {
    transform: rotateX(10deg) skewX(90deg);
  }
  2% {
    transform: rotateX(0deg) skewX(0deg);
  }
}
@keyframes noise-1 {
  3.3333333333% {
    clip-path: inset(74px 0 3px 0);
  }
  6.6666666667% {
    clip-path: inset(3px 0 97px 0);
  }
  10% {
    clip-path: inset(21px 0 38px 0);
  }
  13.3333333333% {
    clip-path: inset(79px 0 14px 0);
  }
  16.6666666667% {
    clip-path: inset(93px 0 6px 0);
  }
  20% {
    clip-path: inset(75px 0 11px 0);
  }
  23.3333333333% {
    clip-path: inset(61px 0 5px 0);
  }
  26.6666666667% {
    clip-path: inset(69px 0 12px 0);
  }
  30% {
    clip-path: inset(51px 0 29px 0);
  }
  33.3333333333% {
    clip-path: inset(9px 0 41px 0);
  }
  36.6666666667% {
    clip-path: inset(59px 0 4px 0);
  }
  40% {
    clip-path: inset(58px 0 33px 0);
  }
  43.3333333333% {
    clip-path: inset(79px 0 20px 0);
  }
  46.6666666667% {
    clip-path: inset(52px 0 24px 0);
  }
  50% {
    clip-path: inset(68px 0 1px 0);
  }
  53.3333333333% {
    clip-path: inset(80px 0 13px 0);
  }
  56.6666666667% {
    clip-path: inset(71px 0 18px 0);
  }
  60% {
    clip-path: inset(29px 0 2px 0);
  }
  63.3333333333% {
    clip-path: inset(43px 0 25px 0);
  }
  66.6666666667% {
    clip-path: inset(8px 0 84px 0);
  }
  70% {
    clip-path: inset(17px 0 57px 0);
  }
  73.3333333333% {
    clip-path: inset(86px 0 13px 0);
  }
  76.6666666667% {
    clip-path: inset(77px 0 20px 0);
  }
  80% {
    clip-path: inset(9px 0 56px 0);
  }
  83.3333333333% {
    clip-path: inset(31px 0 43px 0);
  }
  86.6666666667% {
    clip-path: inset(76px 0 21px 0);
  }
  90% {
    clip-path: inset(79px 0 19px 0);
  }
  93.3333333333% {
    clip-path: inset(38px 0 46px 0);
  }
  96.6666666667% {
    clip-path: inset(18px 0 29px 0);
  }
  100% {
    clip-path: inset(30px 0 16px 0);
  }
}
@keyframes noise-2 {
  0% {
    clip-path: inset(65px 0 7px 0);
  }
  3.3333333333% {
    clip-path: inset(100px 0 1px 0);
  }
  6.6666666667% {
    clip-path: inset(7px 0 88px 0);
  }
  10% {
    clip-path: inset(84px 0 6px 0);
  }
  13.3333333333% {
    clip-path: inset(15px 0 8px 0);
  }
  16.6666666667% {
    clip-path: inset(53px 0 29px 0);
  }
  20% {
    clip-path: inset(96px 0 3px 0);
  }
  23.3333333333% {
    clip-path: inset(82px 0 15px 0);
  }
  26.6666666667% {
    clip-path: inset(27px 0 12px 0);
  }
  30% {
    clip-path: inset(60px 0 19px 0);
  }
  33.3333333333% {
    clip-path: inset(43px 0 49px 0);
  }
  36.6666666667% {
    clip-path: inset(85px 0 8px 0);
  }
  40% {
    clip-path: inset(86px 0 15px 0);
  }
  43.3333333333% {
    clip-path: inset(65px 0 36px 0);
  }
  46.6666666667% {
    clip-path: inset(8px 0 36px 0);
  }
  50% {
    clip-path: inset(39px 0 23px 0);
  }
  53.3333333333% {
    clip-path: inset(92px 0 3px 0);
  }
  56.6666666667% {
    clip-path: inset(57px 0 9px 0);
  }
  60% {
    clip-path: inset(86px 0 11px 0);
  }
  63.3333333333% {
    clip-path: inset(14px 0 1px 0);
  }
  66.6666666667% {
    clip-path: inset(16px 0 80px 0);
  }
  70% {
    clip-path: inset(57px 0 30px 0);
  }
  73.3333333333% {
    clip-path: inset(87px 0 9px 0);
  }
  76.6666666667% {
    clip-path: inset(75px 0 12px 0);
  }
  80% {
    clip-path: inset(67px 0 8px 0);
  }
  83.3333333333% {
    clip-path: inset(61px 0 8px 0);
  }
  86.6666666667% {
    clip-path: inset(22px 0 28px 0);
  }
  90% {
    clip-path: inset(15px 0 23px 0);
  }
  93.3333333333% {
    clip-path: inset(51px 0 41px 0);
  }
  96.6666666667% {
    clip-path: inset(9px 0 12px 0);
  }
  100% {
    clip-path: inset(29px 0 71px 0);
  }
}
.glow {
  position: absolute;
  top: 0;
  text-shadow: 0 0 1000px #dfbfbf;
  color: transparent;
}

.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 0.8vw;
  color: rgba(165, 141, 141, 0.4);
  text-transform: uppercase;
  letter-spacing: 1em;
  text-align: center;
  position: absolute;
  left: 17%;
  animation: glitch-2 5s 5.02s infinite;
}

@keyframes glitch-2 {
  1% {
    transform: rotateX(10deg) skewX(70deg);
  }
  2% {
    transform: rotateX(0deg) skewX(0deg);
  }
}
#SCANLINES {
  overflow: hidden;
  mix-blend-mode: difference;
}

#SCANLINES::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
}

#SCANLINES.accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 0.5%, transparent 1%);
}

#SCANLINES.accent.variations::before {
  aspect-ratio: 1;
  background-blend-mode: exclusion, normal;
}

#SCANLINES.accent.variations.a::before {
  background: repeating-radial-gradient(closest-corner at 1% 21%, rgba(255, 0, 255, 0.5), rgba(0, 255, 255, 0.5), #000 1.7%);
}

#SCANLINES.accent.variations.b::before {
  background: repeating-radial-gradient(closest-corner at 51% 51%, #fff, #fff, rgb(0, 255, 0) 10%);
}

#SCANLINES.accent.variations.c::before {
  background: repeating-radial-gradient(closest-corner at 21% 21%, #fff, rgba(0, 0, 255, 0.5), rgb(3, 0, 255) 20%);
}

#SCANLINES.accent.variations.d::before {
  background: repeating-radial-gradient(closest-corner at 61% 21%, #fff, rgba(0, 255, 0, 0.5), rgb(3, 0, 255) 20%);
}

#SCANLINES.accent.variations.e::before {
  background: repeating-radial-gradient(closest-corner at 91% 51%, #fff, rgba(255, 255, 1, 0.5), rgb(55, 255, 255) 20%);
}

/* https://codepen.io/mirai1337/pen/mMegOZ */
.wrapper {
  position: absolute;
  z-index: -2147483648;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  animation-name: bodyLight;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}

.triangle {
  scale: 2.7;
  margin: auto;
  border-style: solid;
  border-width: 0 125px 216.5px 125px;
  border-color: transparent transparent #F2F2F0 transparent;
  animation-name: triangleMove2;
  animation-duration: 0.01s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}
.triangle:after {
  position: absolute;
  top: 11.5px;
  left: -115px;
  width: 0;
  height: 0;
  display: block;
  content: "";
  border-style: solid;
  border-width: 0 115px 199.2px 115px;
  border-color: transparent transparent #000 transparent;
}
.triangle-wrap {
  position: relative;
  margin: auto;
  width: 250px;
  height: 217px;
}
.triangle--main {
  position: relative;
  z-index: 10;
}
.triangle--1 {
  position: absolute !important;
  top: 0;
  left: 0;
  border-color: transparent transparent cyan transparent;
  animation-name: triangleMove;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  animation-delay: 0.5s;
}
.triangle--2 {
  top: 0;
  left: 0;
  position: absolute !important;
  border-color: transparent transparent yellow transparent;
  animation-name: triangleMove;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  animation-delay: 0.3s;
}
.triangle--3 {
  top: 0;
  left: 0;
  position: absolute !important;
  border-color: transparent transparent magenta transparent;
  animation-name: triangleMove;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  animation-delay: 0.7s;
}
.triangle__text {
  color: #FFF;
  opacity: 0.9;
  position: absolute;
  z-index: 10;
  top: 75%;
  left: -100px;
  right: -100px;
  text-align: center;
  font-family: "Pixel Calculon", sans-serif;
  font-style: italic;
  font-size: 4vw;
  font-weight: 700;
  letter-spacing: 4px;
  animation: glitch 5s 5s infinite;
  text-shadow: #000 0px 0px 5px, #F0F 0px 0px 10px, #F0F 0px 0px 15px, #f754e1 0px 0px 75px, -1px 0px 0px #f754e1, 0px 1px 0px #f754e1, -2px 2px 0px #f754e1;
}
.triangle__text::before {
  content: attr(data-text);
  position: absolute;
  left: -1px;
  right: 0;
  text-shadow: -5px 0 magenta;
  animation: noise-1 4s linear infinite alternate-reverse, glitch 3s 5.05s infinite;
}
.triangle__text::after {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  right: 0;
  text-shadow: -5px 0 lightgreen;
  animation: noise-2 2s linear infinite alternate-reverse, glitch 3s 7s infinite;
}

@keyframes triangleMove {
  10% {
    transform: translateX(3px);
    filter: blur(1px);
  }
  20% {
    transform: translateY(-3px);
  }
  30% {
    transform: translateX(3px) skew(0deg);
  }
  40% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  60% {
    transform: translateY(3px);
    filter: blur(2px);
  }
  70% {
    transform: translateX(1px);
  }
  80% {
    transform: translateY(-5px);
    filter: blur(1px);
  }
  90% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateY(-2px);
  }
}
@keyframes triangleMove2 {
  10% {
    transform: translateX(1px);
  }
  20% {
    transform: translateY(-1px);
  }
  30% {
    transform: translateX(1px) skew(0deg);
  }
  40% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateX(1px);
  }
  60% {
    transform: translateY(-1px);
  }
  70% {
    transform: translateX(1px);
  }
  80% {
    transform: translateY(-1px);
  }
  90% {
    transform: translateX(0);
  }
  100% {
    transform: translateY(-1px);
  }
}
@keyframes textAnim {
  10% {
    transform: scale(1.2) skew(180deg);
  }
  11% {
    transform: scale(1) skew(180deg);
  }
  70% {
    transform: scale(1) skew(-300deg);
  }
  99% {
    transform: scale(1) skew(200deg);
  }
  100% {
    transform: scale(1) skew(-200deg);
  }
}

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