/* img{
  width: 100%;
} */
* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
  src: local('Major Mono Display Regular'), local('MajorMonoDisplay-Regular'), url(./lib/fonts/MajorMonoDisplay-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  padding: 0;
  margin: 0;
  font-family: monospace;
  min-height: 100vh;
  position: relative;
  padding-bottom: 90px;
}

header {
  background-color: #5cd65c;
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
}

h1 {
  font-size: 20px;
}

button {
  border: none;
}

.puzzle {
  width: 100%;
}

#canvas {
  border: 5px solid black;
  background-size: 100%;
  width: 100%;
}

#startBtn {
  background-color: #5cd65c;
  font-size: 18px;
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
}

.difficulty {
  align-items: center;
}

.difficulty button {
  font-size: 16px;
  background-color: #419941;
}

.moves span {
  font-size: 18px;
}

#solveBtn {
  background-color: #245524;
  color: white;
  font-size: 16px;
  font-family: 'Major Mono Display';
  font-style: normal;
  font-weight: 400;
}

footer {
  background-color: #0E220E;
  color: #fff;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}