body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2d7516;
    margin: 0px;
  }

  canvas {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    border: none;
  }
#container {
user-select: none;
position: absolute;
max-width: 56.25vh;
width:100%;
height: 100%;
margin: auto;
left:0;
right:0;
}
#pauseButton {
position: absolute;
right: 0;
width: 64px;
padding: 12px;
display: none;
z-index: 5;
}
#modal_o {
display: none;
}

#modal_bg {
z-index: 7;
position:absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0000009f;
}

#modal_c {
z-index: 10;
font-family: 'Poppins', sans-serif;
font-weight: 700;
position:absolute; left: 25%; width:50%; top: 35%; height:30%; background: #000251; border: 2px solid #6f7ff7;
display: flex; flex-direction: column; justify-content: space-between;
text-align: center;
border-radius: 8px;
color: #f2f2f2;
}

#modal_c p {
padding: 32px;
font-size: 14px;
font-family: 'DM Sans', sans-serif;
font-weight: 500;
}

#button_c {
display:flex;
}

.m_button {
border-radius: 999px; padding: 8px; margin: 12px;
}
#restart {
background: #6f7ff77f;
width: 64px;
}
#resume {
background: #6f7ff7;
flex: 1 1;
}
#resume img {
margin: auto;
display: block;
}