App.css

/* ---------- Header Section ---------- */

/* Center and pad header container.  */
.headerContainer {
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
}

/* Style the page header. */
h1 {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
  color: rgb(16, 141, 160);
}

/* Center and style <p> elements in headerSection. */
.headerSection p {
  width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: #6a6a6aef;
}

/* ---------- Game Section ---------- */
/* Pad and align game container. */
.gameContainer {
  text-align: center;
  padding-bottom: 5%;
}

/* Align and  style doorsContainer and start/restart button.  */
.doorsContainer {
  display:flex;
  padding: 0px;
  margin: 0px;
  justify-content: center;
}

.startGameButton {
  margin-left: 10px;
}

button {
  cursor: pointer;
  height: 55px;
  width: 120px;
  background-color: rgb(17, 169, 136);
  border: 3px solid rgb(30, 150, 124);
  border-radius: 5px;
  font-size: large;
  font-weight: bolder;
  color: white;
  outline: none;
  margin-top: 20px;
}

/* Set door 'frames' height, width and margins. */
.door{
  height: 450px;
  width: 300px;
  margin: 30px;
}

/* Set door images height, width and margins. */
.doorImage{
  height: 450px;
  width: 300px;
  margin: 30px;
}

/* ---------- Footer Section ---------- */

/* Center and pad footer container.  */
.footerContainer {
  padding-top: 2%;
  padding-bottom: 5%;
  text-align: center;
}

/* Set colour and top padding for footer paragraph.  */
.footerSection p {
  color: #6a6a6aef;
  padding-top: 5%;
}

/* Set colour and hover colour for footer links and remove underline.  */
.footerSection a {
  color:  rgb(16, 141, 160);
  padding-top: 5%;
  text-decoration: none;
}

.footerSection a:hover {
  color:  rgb(30, 150, 124);
  padding-top: 5%;
}