html {
    height:100%;
  }
  
  body {
    margin:0;
  }
  
  .bg {
    animation:slide 5s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, rgb(0, 0, 0) 50%, #51f 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:8s;
  }
  
  .bg3 {
    animation-duration:7s;
  }

  .title {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 40px;
    letter-spacing: 2px;
    word-spacing: 3.2px;
    color: #dffbff;
    font-weight: 400;
    text-decoration: bold solid rgb(68, 68, 68);
    text-align:center;
  }

  button {
    font-family: "Lucida Console", Monaco, monospace;
    text-decoration: none;
    color: #5f5480;
    background-color:rgba(218, 195, 255, 0.925);
    border-radius:.5em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    left: 50%;
    top: 50%;
    box-sizing:border-box;
    padding: 7vmin;
    position:fixed;
    text-align:center;
    font-size: 25px;
    transition: all .35s;
    outline: none;
    border: none;
    margin: auto;
  }

  button:hover{
    color: rgb(255, 255, 255);
    background-color:rgba(74, 202, 132, 0.925);
    box-shadow:0 0 .35em rgba(0,0,0,.5);
  }
  
  h1 {
    font-family:monospace;
  }
  
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }