/* Add body styling for flexbox centering */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Ocean Rush Slant", serif;
  /* font-size: 72px; */
}

/* Game container styling */
.titleScreenContainer {
  width: 100vw;
  /* height: 100vh; */
  /* background-color: #f0f0f0; */
  /* border: 2px solid #333; */
  display: flex;
  flex-direction: column;
}

/* Title screen styling */
.titleScreenRows {
  height: 12.5vh;
  width: 100%;
  /*border-bottom: 1px solid #ccc;*/
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 8vh; /* This will inherit to button */
}

#row5 {
  background-color: #00ccff;
}
#row4 {
  background-color: #00a3ff;
}
#row3 {
  background-color: #007aff;
}
#row2 {
  background-color: #0052ff;
}
#row1 {
  background-color: #0000ff;
}
#row0 {
  background-color: #0700c4;
}

/* Button styling */
.titleScreenButton {
  width: 50vw;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit; /* Explicitly inherit from body */
  font-size: inherit; /* Inherit font size from body */
  color: inherit; /* Inherit color from body */
  background-color: darkblue;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.titleScreenButton:hover {
  background-color: lightblue;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}

#startButton {
}

#makeLevelsButton {
}

#uploadLevelsButton {
}

#exitButton {
}

/* Footer styling */
/* footer {
  text-align: center;
  background-color: #333;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
} */