html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
}

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

body {
  background-color: rgb(0, 0, 0);
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro-screen {
  display: flex;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("StarfieldStart.png");
  background-size: cover;
  border: 20px;
}

#title {
  color: rgb(176, 181, 186);
  background: linear-gradient(to top, rgba(184, 172, 172, 0.4), transparent);
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  padding: 20px;
  border: 20px;
  text-align: center;
}

#intro-text {
  color: rgb(255, 255, 255);
  background: linear-gradient(to top, rgba(184, 172, 172, 0.3), transparent);
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.screen {
  margin: 0;
  width: 1000px;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  border: 20px;
}
#instruction {
  color: rgb(245, 245, 245);
  background: linear-gradient(to top, rgba(184, 172, 172, 0.3), transparent);
  font-size: 19px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 0;
}

#start {
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  /*background-color: rgb(13, 143, 130);*/
  background: linear-gradient(to top, rgba(31, 139, 103, 0.9), transparent);
  margin: 80px;
  top: 60%;
  border: none;
  box-shadow: 0px 0px 2px 2px rgb(56, 18, 106);
  padding: 10px;
}

#winning-screen {
  display: flex;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("endGame5.jpeg");
  background-size: cover;
  border: 20px;
  border-block: white;
  -webkit-text-stroke: 1px black;
}

#nirvana {
  color: rgb(245, 250, 255);
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  padding: 20px;
  border: 20px;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

#impressive {
  color: rgb(255, 255, 255);
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  padding: 20px;
  border: 20px;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

#congratulation {
  color: rgb(255, 255, 255);
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  padding: 20px;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

#play-again {
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(13, 143, 130);
  border: solid;
  margin: 80px;
  top: 60%;
  border: none;
  box-shadow: 0px 0px 2px 2px rgb(56, 18, 106);
  padding: 10px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

#game-over-screen {
  display: flex;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("endGame4.jpeg");
  background-size: cover;
  border: 20px;
  text-align: center;
}

#game-over {
  color: rgb(253, 238, 238);
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  padding: 10px;
  text-align: center;
}

#restart {
  border-radius: 10px;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(13, 143, 130);
  margin: 80px;
  top: 60%;
  border: none;
  box-shadow: 0px 0px 2px 2px rgb(56, 18, 106);
  padding: 10px;
}

#endGame {
  color: rgb(255, 255, 255);
  font-size: 35px;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  justify-content: center;
  padding: 20px;
  text-align: center;
}