style.css

/* main style sheet for page */

  .background {
    /* background: #262228; /* 'evening' */
    /* background-color: #8FC33A; /* 'grass' */
    background-color: #E9E7DA; /* 'daisy' */
  }

  /* styling links via a class (and pseudos) rather than globally by selecting the a tag (cf. BEM) */
  .link {
    color: gold;
    text-decoration: none;
  }

  .link:hover {
    text-decoration: underline;
  }

  .link:visited {
    color: black;
  }

  .nav-box {
    height: 50px;
    padding: 1em 0;
  }

  .sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
  }

  .nav {
    opacity: 0.8;
    position: fixed;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    background-color: gold;
    padding: 10px;
    height: 50px;
    width: 100%;
    left:0;
    top: 0;
    z-index: 100;
  }

  .nav__link {
    text-decoration: none; /* remove underlining of nav links */
    color: black;
    font-variant: small-caps;
    font-size: 1.75em; /* NB. 1em * 16 gives font-size in pixels, so 1.75em = 28px */
    font-weight: bold;
    font-family: 'Nova Mono', Courier, monospace; /* use Courier (or failing that generic monospace) if GFont's 'Nova Mono' not supported */
  }

  .portfolio {
    opacity: 0.8;
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    height: auto;
    width: 50px;
    padding: 10px;
    top: 80%;
    transform: translateY(-50%); /* correct for accurate placement */
    right:0;
    z-index: 100;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .portfolio__link {
    font-size: 3em;
    color: gold;
    padding: 5px;
  }

  .main {
    display: grid; /* using grid to separate text from image */
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "text image";
    grid-column-gap: 5em;
    margin: 5% 2em 1em; /* main should be outside any landscape screen on page load */
    padding: 2em 2em;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #AF473C; /* 'chilli' */
  }

  .main__text {
    grid-area: "text";
  }

  .main__heading {
    color: white;
    font-family: 'Bungee', Helvetica, sans-serif;
  }

  .main__para {
    color: white;
    font-size: 1.5em;
    font-family: 'GlacialIndifferenceRegular', Verdana, sans-serif;
  }

  .main__list {
    list-style-type: decimal-leading-zero;
    color: white;
    font-size: 1.5em;
    font-family: 'GlacialIndifferenceRegular', Verdana, sans-serif;
  }

  .main__img-box {
    position: relative;
    grid-area: "image";
    display: flex;
    flex: column nowrap;
    align-items: center;
    justify-content: center;
  }

  .main__img {
    height: 100%;
    max-width: 100%;
    border-radius: 5%;
    object-fit: cover;
  }

  .main__button-box {
    display: flex;
    justify-content: space-between;
    padding: 1.5em 0;
  }

  .main__button {
    font-family: 'Bungee', Helvetica, sans-serif;
    font-size: 1.5em;
    color: black;
    background: gold;
    border-radius: 10px;
    padding: 1em 0.5em;
  }

  .main__button:hover {
    background-color: black;
    color: gold;
  }

  .article {
    margin: 2em 2em; /* main should be outside any landscape screen on page load */
    padding: 1em 2em;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #0375B4; /* 'starry night' */
  }

  .article__heading {
    color: white;
    font-family: 'Bungee', Helvetica, sans-serif;
  }

  .article__para {
    color: white;
    font-size: 1.5em;
    font-family: 'GlacialIndifferenceRegular', Verdana, sans-serif;
  }

  .footer-box {
    margin-top: 8em;
    position: relative;
  }

  .footer {
    position: absolute;
    display: flex;
    flex: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: rgb(0,0,0,0.3);
    padding: 5px 0;
    height: 50px;
    bottom: 0;
    left: -10px;
    right: -10px;
  }

  .footer__para {
    font-size: 1.5em;
    font-style: bold;
    font-family: 'Nova Mono', Courier, monospace;
    padding: 0 2em;
  }