index.css

/*
nasa blue: #0b3d91
nasa red: #fc3d21
*/

/*
primary:
  dhs blue: rgb(0, 51, 102);
  dhs gray: rgb(153, 153, 153);
  dhs dark gray: rgb(51, 51, 51);
  dhs white: rgb(255, 255, 255);
secondary:
  dhs red: rgb(204, 0 , 51);
  dhs light blue: rgb(0, 102, 153);
  dhs green: rgb(51, 153, 0);
*/
body {
  height: 100%;
  width: auto;
  color: white;
  background-color: #0b3d91;
  align-items: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.5em;
}

h1 {
  background-color: rgb(0, 51, 102);
  border-radius: 20px;
  margin: 0;
}

p {
  padding: 0 1em;
}

button {
  color: white;
  background-color: rgb(51, 153, 0);
  border-radius: 20px;
  font-size: 1em;
  font-weight: bold;
  padding: 0.5em;
  border: none;
}

a {
  color: rgb(204, 0 , 51);
}

#progContainer {
  background-color: rgb(153, 153, 153);
  height: 20px;
  position: relative;
  border-radius: 20px;
  padding: 5px;
  margin: 1em;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

#progress {
  display: block;
  height: 100%;
  width: 0;
  background-color: red;
  border-radius: 20px;
  box-shadow:
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

#prog-percent {
  visibility: hidden;
  height: 50%;
  margin-top: 1em;
  padding: 1em;
  background-color: rgb(0, 102, 153);
  border-radius: 20px;
}

#found-out {
  display: none;
  padding-bottom: 1em;
  margin: 1em auto;
  background-color: rgb(0, 102, 153);
  border-radius: 20px;
}

#found-out-intro {
  padding: 1em;
}

@media screen and (min-width: 900px) {
  body {
    background-color: black;
  }

  #progContainer {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  #prog-percent {
    max-width: 20%;
    margin-left: auto;
    margin-right: auto;
  }

  #found-out {
    max-width: 75%;
    padding: 2em;
  }
}