style.css

/*
  CSS File
*/

/*
 VARIABLES
*/
:root {
  /* Core colours */
  /* https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557 */
  --colour-amaranth: #e63946;
  --colour-peppermint: #f1faee;
  --colour-aquaisland: #a8dadc;
  --colour-wedgewood: #457b9d;
  --colour-cello: #1d3557;

  /* Header configuration */
  --header-heading-colour: var(--colour-peppermint);

  /* Body configuration */
  --body-default-colour: var(--colour-cello);
  --body-background-colour: var(--colour-peppermint);
}

/*
  PAGE / BODY
*/
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--body-default-colour);
  background-color: var(--body-background-colour);
}

main {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

/*
  Screen reader text utility class
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}