body{
   margin: 0;
   background-image: url(./img/start/Background.png);
   background-size: cover;
   font-family: 'Neucha', cursive;
}
.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}
.d-none{
    display: none;
}

.canvas{
    /*background-color: black;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(163, 160, 160);  */
    display: block;
}

.loader {
    z-index: 2;
    top: calc(50% - 84px); /* Center vertically and then move up by 25px */
    left: calc(50% - 54px);
    transform: translate(-50%, -50%); 
    position:absolute;
    border: 10px solid #f3f3f3; /* Light grey background */
    border-top: 10px solid #3498db; /* Blue color */
    border-radius: 50%; /* Circular shape */
    width: 70px; /* Size of the loader */
    height: 70px; /* Size of the loader */
    animation: spin 1s linear infinite; /* Animation */
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loader-background{
    background-color: #3498db;
  }
  



.game-container{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    
}

.button-description{
   margin-top: 25px;
   display: flex; 
}

.start-game{
    background-color: rgb(209, 159, 21);
    font-family: 'Neucha', cursive;
    font-size: 24px;
    padding: 8px;
    border-radius: 8px;;
    cursor: pointer;
}
.button-text{
    padding: 8px;
    font-size:larger;
}

.start-screen-img{
    z-index: 1;
    position: absolute;
    height: 480px;
    width: 100%;

}

.control-arrows{
    width: 30px;
    height: 30px;
    margin-right: 15px;
}
.mob-button-bar{
    display: none;
}

#btn-fire{
    margin-right: 50px;
}

.restart-buttons{
    z-index: 2;
    top: 20px;
    left: 30px;
    position:absolute

}


/* smartphone */
@media only screen and (max-width: 720px) {
    canvas {
        width: 100%;
    }

    .button-description{
        display: none;
     }

     .mob-button-bar{
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    bottom: 30px;
    position:absolute
    
}

     body{
        background-image: none;
     }

     .start-screen-img{
        z-index: 1;
        position: absolute;
        height: 100%;
        
    }

     .frame{
        height: 100vh;
        width: 100vw;
        
    }

    canvas{
        width: 100vw;
    
    }
    
}

/* smartphone */
@media only screen and (max-height: 480px) {
    canvas {
        height: 100vh;
    }
    .button-description{
        display: none;
     }

     .mob-button-bar{
        z-index: 2;
        width: 100%;
        display: flex;
        justify-content: space-between;
        bottom: 10px;
        position:absolute
      
    }

    .start-screen-img{
        z-index: 1;
        position: absolute;
        height: 100vh;
        width: 100%;
    }

     body{
        background-image: none;
     }
     canvas{
        width: 100vw;
    
    }

     .frame{
        height: 100vh;
        width: 100%
        
    }
}   


/*
@media(orientation: portrait) and (max-width: 720px){
    canvas {
        width: 100vw;
    }

    body{
        margin: 0;
        background-image: none
     }
     .button-description{
        display: none; 
     }



    /* .gameButtons {
        display: block;
    } 
}




@media(orientation: landscape) and (max-height: 480px){
    canvas {
        height: 100vh;
    }
    body{
        margin: 0;
        background-image: none
     }
     .button-description{
        display: none; 
     }
} */