::-webkit-scrollbar {
  display: none;
}

button {
  width:100px;
  height:100px;
}
body {
    font-size: 20px;
    color: white;
    background: #121212;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

html {
  height:100%;
}

body {
  margin:0;
}

.bg {
  animation:slide 15s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #111 50%, #000 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:20s;
}


.content {
  background-color:rgba(1,1,1,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(1,1,1,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}
button {
  border-radius: 15px;
}

@font-face {
  font-family: SunnyspellsRegular-MV9ze;
  src: url("SunnyspellsRegular-MV9ze.otf") format("opentype");
}

@font-face {
  font-family: BalonkuRegular-la1w;
  src: url("BalonkuRegular-la1w.otf") format("opentype");
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

@media all and (min-width:0px) and (max-width: 800px) {
  button {
    width: 50px;
    height: 50px;
  }
}