Game lags after editing CSS

HTML-CSS
#1

Hey,

We are working on a school assignment, where we are programming a game alá Mario. While changing the CSS-code, the game has started to lag - and we can’t figure out how to fix it. It was after we changed the position on the .game class selector (to make it full screen) the issue started. Any ideas why it lags? (not slow, but almost like the screen is jumping while we play).

CSS-code


body {
    padding: 0;
    margin: 0;
    background: url("https://cdn.pixabay.com/photo/2015/06/08/15/28/underwater-802092_1280.jpg"); 
    background-size: 100%; 
}

.background{ 
    border-spacing: 0;          
}

.lava{
    background: url("https://images.pexels.com/photos/2547565/pexels-photo-2547565.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); 
    background-size: 100%; 
}

/* Her er banen. */

.wall{ 
    background: url("https://d31sxl6qgne2yj.cloudfront.net/wordpress/wp-content/uploads/20190102094847/Minecraft-Sand-Block.jpg");      
    background-size: 100%;
    position: relative;
        
}

.actor  {
    position: absolute;
}


.coin   {
    background: rgb(241, 229, 89); 
}

.player {
    background-image: url("https://freepngimg.com/download/cute/29816-1-cute-turtle.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.lost .player {
    background-color: rgba(160, 64, 64, 0.7);
}

.won .player {
    box-shadow: -4px -7px 8px white, 4px -7px 8px white;
 }

 .game {
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    margin-bottom: auto;
    float: none;

  }

#wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.button {
    padding: 30px 50px;
    background: lightblue;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    border: none;
    border-bottom: 5px solid lightblue;
    border-radius: 5px;
    transition: 0.1s all ease;
}

.button:hover {
    border-bottom: 10px solid lightblue;
    cursor: pointer;
    margin-top: -5px;
}

.button:active {
    border-bottom: 2px solid lightblue;
    background: lightblue;
    margin-top: 3px;
    outline: none;
}
  
.paragraph {
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 40px;
    letter-spacing: 1px;
    color: white;
}

.text-center {
    text-align: center;
}
#2

What exactly is lagging? https://codepen.io/jenovs/full/VwjPKwV

#3

I had the same problem, but with the Flappy Bird game

#4

I would say everything on the screen “jumps”. The wall, turtle etc. If you jump on the space-key, it lays off for a second then start again. We have the issue already at level one in our code, but I see by the link you opened, the issue starts at level 4.

#5