@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: aquamarine;
  background-image: url("./Pixel_Art_Background.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}
h1 {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}
.grid {
  background-color: white;
  display: flex;
  border: 2px solid black;
  flex-grow: 1;
}
.row {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.select {
  display: flex;
  justify-content: space-between;
  gap: 100px;
}
.col {
  flex-grow: 1;
  border: solid 1px rgba(0, 0, 0, 0.199);
  background-color: white;
  padding: 1px;
}
.container {
  display: flex;
  box-shadow: 0px 0px 9px 4px white;
  border-radius: 2px;
  width: 600px;
  height: 600px;
  margin-bottom: 15px;
}
.col:hover {
  background-color: #707070b6;
}
.ranger {
  display: flex;
  flex-direction: column;
  color: red;
  align-items: center;
}
.reset {
  background-color: transparent;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
  border: 2px solid grey;
}
.reset:hover {
  background-color: grey;
  cursor: pointer;
  transition: 0.3s ease;
}