body {
    height: 75%;
    overflow: hidden;
    background-color: rgb(50, 50, 50);
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 75%;
    margin-top: 20px;
}

.game-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: 600px; 
    height: 525px; 
    background: url(./img/mars.webp) no-repeat center center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.0);
    position: relative;
    z-index: -2;
}

.main .weapon {
    position: absolute;
    margin-left: -1.125px; 
    height: 18.75px; 
    z-index: -1;
}

.main .enemyWeapon {
    position: absolute;
    margin-left: -1.875px; 
    height: 14.75px; 
    z-index: -1;
}

.main .enemy {
    position: absolute;
}

#score-board {
    display: flex;
    justify-content: space-between;
    margin-top: 15px; 
}
  
#score-board span {
    flex: 1;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 12px; 
    font-weight: bold;
    color: #fff;
}

.game-controls {
    display: flex;
    flex-direction: column;
    margin-top: 15px; 
    margin-left: auto;
    margin-right: auto;
    width: 600px; 
}

.game-controls span {
    font-family: Arial, sans-serif;
    font-size: 12px; 
    color: #b0a9a9;
    margin-top: 7.5px; 
}
.lose {
    display: none;
    position: absolute;
    background: #d9534f; 
    color: white;
    padding: 10px 32.5px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 7.5px; 
    text-align: center;
    animation: pop-in 1s;
}
  
.win  {
    display: none;
    position: absolute;
    background: #5cb85c; 
    color: white;
    padding: 10px 32.5px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 7.5px; 
    text-align: center;
    animation: pop-in 1s;
}

footer {
    font-family: Arial, sans-serif;
    margin-top: 20px;
    text-align: center;
    font-size: 12px; 
    color: #b0a9a9;
}