@font-face {
    font-family: "Press Start 2P";
    src: url("/assets/PressStart2P-Regular.ttf");
  }
body{
    background-color: #000;
}

#game{
    font-family: "Press Start 2P";
    margin-top: 1%;
    background-color: rgb(0, 1, 16, 0);
    border: rgb(255, 255, 255) 6px solid;

}

.breakoutGame{
    display: inline-block;

    height: 900px;
    width: 812px;
    position: relative;
    left: 30%;
}

.containerLevelSelector{
    width: 812px;
    margin-top: 1%;
    display: flex;
    flex-wrap: wrap;
}

.zero{
    margin-bottom: 1%;
    margin-right: 82px; /* 82px d'espace, a appliquer sur les box de numéro pair*/
    display: inline-block;
    width: 350px;
    height: 69px;
    background-image: url("assets/level0.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;

}

.one{
    margin-bottom: 1%;
    display: inline-block;
    width: 350px;
    height: 69px;
    background-image: url("assets/level1.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;
}

.two{
    margin-bottom: 1%;
    margin-right: 82px;
    display: inline-block;
    width: 350px;
    height: 69px;
    background-image: url("assets/level2.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;
}

.three{
    margin-bottom: 1%;
    display: inline-block;
    width: 350px;
    height: 69px;
    background-image: url("assets/level3.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;
}

.four{
    margin-bottom: 1%;
    margin-right: 82px;
    display: inline-block;  
    width: 350px;
    height: 69px;
    background-image: url("assets/level4.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;
}

.five{
    margin-bottom: 1%;
    display: inline-block;
    width: 350px;
    height: 69px;
    background-image: url("assets/level5.png");
    background-size: cover;
    border: rgb(255, 255, 255) 6px solid;
}


.zero:hover{
    transform: scale(1.02);
}

.one:hover{
    transform: scale(1.02);
}

.two:hover{
    transform: scale(1.02);
}

.three:hover{
    transform: scale(1.02);
}

.four:hover{
    transform: scale(1.02);
}

.five:hover{
    transform: scale(1.02);
}



.bottomText{
    text-align: center;
    background-color: rgb(0, 1, 16, 0);
}