html {
  box-sizing: border-box
}
*,
:after,
:before {
  box-sizing: inherit
}
html {
  font-size: 62.5%
}
body {
  padding: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  font-family: sans-serif;
  font-size: 1.8rem
}
main {
  padding: 0 24px
}
body {
  background: #1a062b;
  background: linear-gradient(to right,#1a062b 0,#5f1b43 20%,#c15d38 50%,#5f1b43 80%,#1a062b 100%);
  position: relative
}
main {
  height: 100vh;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center
}
#backgroundvid {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0
}
@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
  #backgroundvid {
    display: none
  }
}
header {
  -webkit-transform: translateY(.5em);
  transform: translateY(.5em);
  z-index: 3;
  pointer-events: none;
  padding-top: 2em;
  position: fixed
}
header::after,
header::before {
  font-size: 7em;
  content: '';
  width: 2em;
  height: 4em;
  background: radial-gradient(rgba(255,129,0,.8) 0,rgba(255,129,0,0) 50%);
  position: absolute;
  top: -.7em;
  left: .3em;
  z-index: -1;
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  pointer-events: none;
  opacity: .6;
  mix-blend-mode: overlay
}
header::after {
  height: 6em;
  width: 3em;
  top: -2.16em;
  left: -1.17em;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  background: radial-gradient(rgba(255,0,162,.5) 0,rgba(255,0,162,0) 50%)
}
header h1 {
  font-family: Audiowide,sans-serif;
  display: inline-block;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 .5em rgba(255,255,255,.9),1px 0 2px #0085b9,-1px 0 2px #0085b9,0 1px 2px #0085b9,0 -1px 2px #0085b9;
  z-index: 20;
  position: relative;
  font-size: 7em
}
@media (max-width:700px) {
  header h1 {
    font-size: 16vw
  }
}
@media not all and (min-resolution:0.001dpcm) {
  @supports (-webkit-appearance:none) {
    header h1 {
      text-shadow: 0 0 .5em rgba(255,255,255,.5);
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: #0085b9
    }
  }
}
@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
  header h1 {
    background: 0 0;
    color: #bae2ff
  }
}
header h1::after,
header h1::before {
  content: '';
  width: 1em;
  height: 1em;
  background: radial-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.07) 25%,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,0) 61%);
  position: absolute;
  top: .2em;
  left: -.03em;
  pointer-events: none
}
header h1::after {
  width: 6em;
  height: 6em;
  top: -.4em;
  left: -1.79em;
  opacity: .3
}
#pauseplay {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 30px;
  z-index: 100;
  color: #fffeab;
  -webkit-filter: drop-shadow(1px 1px 0 #000);
  filter: drop-shadow(1px 1px 0 #000);
  opacity: .4;
  cursor: pointer
}
#pauseplay:hover {
  opacity: 1
}
@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
  #pauseplay {
    display: none
  }
}