/*font*/
  @font-face {
    font-family: 'pixelsans';
    src: url('./fonts/pixelsans/PixelifySans-Regular.ttf') format('embedded-opentype'), /* Internet Explorer */
        url('./fonts/pixelsans/PixelifySans-Regular.ttf') format('woff2'),             /* Super Modern Browsers */
        url('./fonts/pixelsans/PixelifySans-Regular.ttf') format('woff'),              /* Pretty Modern Browsers */
        url('./fonts/pixelsans/PixelifySans-Regular.ttf') format('truetype'),          /* Safari, Android, iOS */
        url('./fonts/pixelsans/PixelifySans-Regular.ttf') format('svg');               /* Legacy iOS */
  }
  
  body {
    font-family: 'pixelsans', sans-serif;
    font-size: 22px;
    height: 100%;
    overflow: hidden;
    color: #FFF;
    background-image: url('img/background.gif');
  }
  .wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .game-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .main {
    width: 800px;
    font-size: 0.9rem;
    height: 600px;
    /*background: url('');*/
    animation: scroll-background 5s linear infinite;
    position: relative;
    z-index: -2;
  }
  
  @keyframes scroll-background {
    from {
      background-position-y: 0px;
    }
    to {
      background-position-y: 256px;
    }
  }
  
  .wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .main .laser {
    position: absolute;
    margin-left: -2.5px;
    height: 25px;
    /* default z-index is 0*/
    z-index: -1;
  }
  
  .main .enemy{
    position: absolute;
  }
  
  .main .enemyLaser {
    position: absolute;
    margin-left: -2.5px;
    height: 20px;
    /* default z-index is 0*/
    z-index: -1;
  }

  .win  {
    display: none;
    position: absolute;
    background: #fcfafa;
    color: #000;
    padding: 20px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: pop-in 1s;
  }

  .loose  {
    display: none;
    position: absolute;
    background: #fcfafa;
    color: #000;
    padding: 20px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: pop-in 1s;
  }

  .btn {
    padding: 6px 18px;
    border: none;
    outline: none;
    color: #FFF;
    background-color: #ed7205;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    z-index: 0;
    border-radius: 8px;
  }
  
  .btn:hover{
    background-color: transparent;
    color: #ed7205;
    transition: color .3s ease;
    transition: background-color .3s ease;
  }

  
  /* center element */
  .center-element {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    gap: 4px;
    padding: 4px;
  }