body {
    margin: 0;
    background: black;
    overflow: hidden;
}

canvas {
    display: block;
    margin: auto;
    background: #000;
    border: 4px solid #fff;           
    border-radius: 10px;              
    box-shadow: 0 0 20px cyan;        
}

#ui {
    position: absolute;
    color: white;
    font-family: Arial, sans-serif;
    left: 10px;
    top: 10px;
}

@font-face {
    font-family: 'spacebit';
    src: url('./Assets/SPACEBIT.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

gametitle {
    font-size: 70px;
    margin-bottom: 10px;
    text-align: center;
    align-content: center;
    justify-content: center;
    color: white;
    font-family: 'spacebit';
}
h1 {
    font-size: 70px;
    margin-bottom: 10px;
    text-align: center;
    align-content: center;
    justify-content: center;
    color: white;
    font-family: 'spacebit';
}

tutorial {
    font-size: 36px;
    margin-bottom: 10px;
    color :white;
    text-align: center;
    font-family: 'spacebit';
    justify-content: center;
    text-align: center;
    
    
}
.gameoverui{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;      
    transform: translate(-50%, -50%); 
    background: rgba(0,0,0,0.9); 
    border: 4px solid cyan; 
    padding: 40px;
    text-align: center; 
    color: white;
    font-family: 'spacebit', sans-serif; 
    z-index: 100;

}
.center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'spacebit', sans-serif;
    text-align: center;
    width: 100%; 
}


.top {
    top: 5%;
}


.bottom {
    bottom: 5%;

}