CSS

* {

box-sizing: border-box;

}

body {

background-color: #0095dd;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-family: Arial, Helvetica, sans-serif;

min-height: 100vh;

margin: 0;

}

h1 {

font-size: 45px;

color: #fff;

}

canvas {

background: #f0f0f0;

display: block;

border-radius: 5px;

}

.btn {

cursor: pointer;

border: 0;

padding: 10px 20px;

background: #000;

color: #fff;

border-radius: 5px;

}

.btn:focus {

outline: 0;

}

.btn:hover {

background: #222;

}

.btn:active {

transform: scale(0.98);

}

.rules-btn {

position: absolute;

top: 30px;

left: 30px;

}

.rules {

position: absolute;

top: 0;

left: 0;

background: #333;

color: #fff;

min-height: 100vh;

width: 400px;

padding: 20px;

line-height: 1.5;

transform: translateX(-400px);

transition: transform 1s ease-in-out;

}

.rules.show {

transform: translateX(0);

}

.popup-container {

background-color: rgba(0, 0, 0, 0.3);

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

/* display: flex; */

display: none;

align-items: center;

justify-content: center;

}

.popup {

background: #2980b9;

border-radius: 5px;

box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);

padding: 20px;

text-align: center;

}

.popup button {

cursor: pointer;

background-color: #fff;

color: #2980b9;

border: 0;

margin-top: 20px;

padding: 12px 20px;

font-size: 16px;

}

.popup button:active {

transform: scale(0.98);

}

.popup button:focus {

outline: 0;

}