* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #aaa;
  width: 100vw;
  min-height: 100vh; 
  overflow-x: hidden;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1vw;
  line-height: 1.2vw;
  font-weight: normal;
  font-variant: inherit;
  font-style: normal;
  color: rgb(100, 50, 25);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

header {
  width: 100vw;
  height: 11vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1,
p {
  margin: 5px;
}

h1 {
  color: #eee;;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
  margin-bottom: 10px;
}

p {
  color: #000;
}

a {
  color: rgb(100, 50, 25);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
}

#game {
  width: 90vw;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

main {
  width: 84vh;
  height: 84vh;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:  "area0  area1  area2  area3  area4  area5"
                        "area6  area7  area8  area9  area10 area11"
                        "area12 area13 area14 area15 area16 area17"
                        "area18 area19 area20 area21 area22 area23"
                        "area24 area25 area26 area27 area28 area29"
                        "area30 area31 area32 area33 area34 area35";
  gap: 0.4vh;
  padding: 0.4vh;
  background-color: #333;
  align-content: stretch;
  border-radius: 10px;
}

main > .my-divs {
  font-size: 2em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

main > #id1 {
  background-color: #c00;
}
main > #id2 {
  background-color: #0c0;
}
main > #id3 {
  background-color: #00c;
}
main > #id4 {
  background-color: #c70;
}
main > #id5 {
  background-color: #cc0;
}
main > #id6 {
  background-color: #c0c;
}

footer {
  height: 16vh;
  width: 84vh;
  font-size: 1rem;
  height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#resultBox {
  padding: 25px;
  display: none;
  width: 50vh;
  height: 50vh;
  position: fixed;
  z-index: 10;
  bottom: 25vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #c00;
  color: #eee;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: 10px;
}

button {
  width: 50px;
  margin-top: 25px;
}

@media (orientation: portrait) {
  main {
    width: 84vw;
    height: 84vw;
  }
  resultBox {
    width: 50vw;
    height: 50vw;
  }
}