@font-face {
    font-family: "MachineStd-Medium";
    src: url(fonts/MachineStd-Medium.otf);
}

@font-face {
    font-family: "Space_invaders";
    src: url('fonts/space_invaders.ttf') format('truetype');
    src: url('fonts/space_invaders.eot') format('embedded-opentype');
    src: url('fonts/space_invaders.woff') format('woff');
}



html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: auto;
   /* background: url(images/background.jpg); */
    background-color: black;
    background-size: cover;
    font-family: "Space_invaders";
}

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

canvas {
    border: 5px solid rgb(54, 53, 53);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.814);
   /* width: 60%; */
    object-fit: contain;
    margin: 20px auto;
    display: block;
}

#commandes {
    display: flex;
    justify-content: center;
    gap: 50px;
    color: white;
}

#gameOver {
    display: none;
    font-size: 4rem;
    position: absolute;
    top: 30%;
    color: #f02c0a;
}

#left, #shoot, #right {
    padding: 2% 15% 0 15%;

    border: 5px solid rgb(54, 53, 53);
    cursor:crosshair;
    background-color: #636362;
    user-select: none;
    
}
#left:hover, #shoot:hover, #right:hover {
    background-color: green;
}
#left:active, #shoot:active, #right:active {
    background-color: rgb(2, 95, 2);
}


.title-menu {
    font-family: "MachineStd-Medium";
    display: flex;
    justify-content: center;
}

.title-name .step1 {
    margin-top: 1.5rem;
    font-size: 75px;
    display: block;
    text-align: center;

    color: #f02c0a;
    transform: rotateX(-20deg);

}

.title-name .step2 {
    margin-top: -11.3rem;
    font-size: 76px;
    display: block;
    text-align: center;

    color: #fbe748;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    transform: rotateX(-20deg);

}