*{
    margin:0;
}
body{
    /*background: #a4a4a5;*/
    background: black;
}
#canvas{
    width: 1200px;
    height: 800px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    /*background: rgb(207, 207, 207);*/
    background: black;
    background-image: url("../img/wallpaper.jpg");
    
}
#menu{
    background: none;
    font-size:80px;
    color:yellow;
    font-family: 'Audiowide', cursive;
    font-weight:800;
    width:400px;
    height:600px;
    position:absolute;
    top:50%;
    left:35%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    z-index: 3;
}
#title{
    text-align:center;
    color: yellow;
    margin-top: 5px;
    margin-bottom: 50px;
}
.button{
    width: 300px;
    height: 80px;
    padding-top: 10px;
    margin-left: 50px;
    border-radius: 10px;
    background: white;
    color: black;
    font-weight: 500;
    text-align:center;
    font-size: 50px;
    margin-bottom: 50px;
}
.button:hover{
    background: yellow;
    color: black;
    cursor:pointer;
}
.swal-title{
    font-family: 'Audiowide', cursive;
    font-size: 40px;
}
.swal-text{
    font-family: 'Audiowide', cursive;
    font-size: 20px;
}
/*source: https://freefrontend.com/css-animated-backgrounds/*/
@keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(5000px, 0px, 0px);
      }
  }
  @-webkit-keyframes move-background {
    from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(5000px, 0px, 0px);
      }
  }
  
  @-moz-keyframes move-background {    
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(5000px, 0px, 0px);
      }
  }
  
      @-webkit-keyframes move-background {
      from {
          -webkit-transform: translate3d(0px, 0px, 0px);
      }
      to { 
          -webkit-transform: translate3d(1000px, 0px, 0px);
      }
  }
  
  .background-container{
      position: fixed;
      top: 0;
      left:0;
      bottom: 0;
      right: 0;
  }
  
  .stars {
   background: black url(../img/stars.png) repeat;
   position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
        z-index: 0;
  }
  
  .twinkling{
      width:10000px;
      height: 100%;
      background: transparent url("../img/twinkling.png") repeat;
      background-size: 1000px 1000px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      
      -moz-animation:move-background 70s linear infinite;
    -ms-animation:move-background 70s linear infinite;
    -o-animation:move-background 70s linear infinite;
    -webkit-animation:move-background 70s linear infinite;
    animation:move-background 70s linear infinite;
      
  }
  
  .clouds{
      width:10000px;
      height: 100%;
      background: transparent url("../img/clouds.png") repeat;
      background-size: 1000px 1000px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
  
     -moz-animation:move-background 150s linear infinite;
    -ms-animation:move-background 150s linear infinite;
    -o-animation:move-background 150s linear infinite;
    -webkit-animation:move-background 150s linear infinite;
    animation:move-background 150s linear infinite;
  }
  #moonImg{
    height: 70vh;
    width:70vh;
    position: absolute;
    z-index: 3;
    right: 20px;
  }
  .menuWrapper{
      width:100%;
      height:100%;
  }
  /**/