@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

* {
  font-family: "Open Sans", sans-serif;
}

body {
  background: #3d3b30;
}

main {
  color: #e9edde;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  #modes {
    display: flex;
    align-items: center;
    gap: 1em;
    div {
      display: flex;
      align-items: center;
      gap: 0.5em;
      font-weight: 700;
    }
  }
}

header > div {
  display: flex;
  flex-direction: column;
  gap: 1em;

}

#grid-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  > button {
    background: gray;
    box-shadow: gray 0px 0px 3px;
  }
  > button:hover {
    background: rgb(102, 102, 102);
    box-shadow: rgb(102, 102, 102) 0px 0px 6px;
  }
}

#grid-container {
  background: #e9edde;
  width: 40vw;
  aspect-ratio: 1/1;
  display: grid;
  div {
    border: 1px solid #3d3b30;
  }
}

button {
  background: #5c80bc;
  color: #f5f5ed;
  padding: 4px 8px;
  width: fit-content;
  height: fit-content;
  border: 1px black;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: #5c80bc 0px 0px 3px;
  border-radius: 4px;
  transition: all 0.3s ease-out;
}

button:hover {
  background: #5c7fbccc;
  box-shadow: #5c7fbccc 0px 0px 6px;
  scale: 1.05;
}