html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

.game-header {
  position: absolute;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  background: #3C5A6B;
  padding: 10px 30px;
  border-radius: 40px;
  font-weight: bold;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.432); 
}

.settings {
  position: absolute;
  left: 1166px;
  top: 20px;
  border: none;
  width: 81px;
  height: 81px;
  border-radius: 10px;
}

.settings-base {
  position: absolute; 
  left: 1161px; 
  top: 12px;
  background: #3C5A6B; 
  width: 90px; 
  height: 90px; 
  border-radius: 20px; 
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.432); 
}

.settings:hover {
  opacity: 0.5;
  transition: 0.1s ease-in-out;
}

.preview {
  position: absolute;
  left: 250px;
  top: 160px;
  width: 760px;
  height: 60%;
  background: rgb(0, 0, 0); 
  border-radius: 86px; 
  border-width: 10px;
  border-style: solid;
  border-color: #3C5A6B;
}

.play-button {
  position: absolute;
  margin: 285px 595px;
  border: none;
  background: #000000e3;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  cursor: pointer;
}

.play-button:hover {
  opacity: 0.9;
  transition: 0.1s ease-in-out;
}

.triangle{
  position: absolute;
  border-top: 0px solid;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid rgb(255, 255, 255);
  rotate: 90deg;
  width: 0px;
  height: 0px;
  cursor: pointer;
}

.triangle2{
  position: absolute;
  border-top: 0px solid;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid rgb(255, 255, 255);
  rotate: -90deg;
  width: 0px;
  height: 0px;
  cursor: pointer;
}

.text {
  position: absolute;
  color: #3C5A6B;
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  font-size: 35px;
  width: 930px;
  height: 400px;
  left: 35px;
}

.text-memory-game {
  color: #fff;
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  font-size: 35px;
}

.start {
  background: url(images/Start.png); 
  position: absolute; 
  width: 413px; 
  height: 124px; 
  margin: 380px 420px;
  cursor: pointer;
}

.start:hover {
  opacity: 0.9;
  transition: 0.1s ease-in-out;
}

.memory-option-buttons {
  background: #3C5A6B;
  color: white;
  border: none;
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  font-size: 40px;
  padding: 20px 50px;
  border-radius: 10px;
  box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.432); 
  cursor: pointer;
}

.memory-option-buttons:hover {
  opacity: 0.8;
  transition: 0.1s ease-in-out;
}

.memory-bricks {
  color: #3C5A6B;
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  font-size: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.math-input {
  font-family: "League Spartan", Arial, Helvetica, sans-serif;
  font-size: 40px;
  color: #3C5A6B;
  padding: 10px;
  border: none;
  border-radius: 10px;
}