* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  box-sizing: border-box;
  font-family: 'Roboto', 'helvetica', sans-serif;
}

html {
  scroll-behavior: smooth;
}

/*    Colour book    */

.magenta {
  background-color: #E00084;
  transition-duration: 1s;
}
.magenta:hover {
  background-color: #ff79c7;
  transition-duration: 1s;
}
.yellow {
  background-color: #f9f94d;
  transition-duration: 1s;
}
.yellow:hover {
  background-color: #ffa424;
  transition-duration: 1s;
}
.blue {
  background-color: #29c0f6;
  transition-duration: 1s;
}
.blue:hover {
  background-color: #00d2ba;
  transition-duration: 1s;
}
.black {
  background-color: #111111;
  transition-duration: 1s;
}
.black:hover {
  background-color: darkslategray;
  transition-duration: 1s;
}
.white {
  background-color: #ffffff;
  transition-duration: 1s;
}
.white:hover {
  background-color: #d1d1d1;
  transition-duration: 1s;
}

/*        MOBILE FIRST         */
/*     STYLING STARTS HERE     */

@media only screen and (min-width: 320px) {
  
  body {
    background-color: rgb(219, 219, 219);
  }

  hr {
    border: 1px solid black;
  }

  #hero-title {
    font-size: 0.8em;
    margin: 40px 0 5px 5px;
    display: inline-block;
  }

  .footer-title {
    font-size: 0.8em;
    font-weight: 600;
    margin: 5px 0 5px 5px;
    display: inline-block;
  }

  .main-headings {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    padding: 50px 0 10px 0;
    font-size: 3.6em;
  }

  .links {
    color: black;
    transition-duration: 0.4s;
  }

  .links:hover {
    color: darkslategray;
    transition-duration: 0.4s;
  }

  .link-style {
    font-family: 'Roboto' sans-serif;
    font-weight: 600;
    display: inline-block;
    padding-bottom: 15px;
  }

  .image-size {
    width: 100%;
    display: block;
  }

  .special-image {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .image-space {
    padding: 25px 0px;
  }

  .top-spacer {
    padding-top: 75px;
  }

  .title-bodycopy {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    padding: 30px 0 10px 0;
    font-size: 1.8em;
  }

  p, li {
    line-height: 1.6;
    font-size: 0.9em;
  }

  .inverse {
    color: white;
  }

  .page-wrapper {
    width: 96%;
    margin: 0 auto;
  }

  .typesetting {
    padding: 20px 5px 0px 5px;
  }

  .container {
    height: 350px;
    border:rgb(219, 219, 219) solid 5px;
  }

  .container-full {
    border:rgb(219, 219, 219) solid 5px;
    padding: 0 15px;
  }

  .bottom-spacing {
    padding-bottom: 75px;
  }

  .col {
    float: left;
    padding: 15px;
  }

  .row::after {
    display: block;
    clear: both;
    content: "";
  }

  .col-1-S {width: 8.33%;}
  .col-2-S {width: 16.66%;}
  .col-3-S {width: 25%;}
  .col-4-S {width: 33.33%;}
  .col-5-S {width: 41.66%;}
  .col-6-S {width: 50%;}
  .col-7-S {width: 58.33%;}
  .col-8-S {width: 66.66%;}
  .col-9-S {width: 75%;}
  .col-10-S {width: 83.33%;}
  .col-11-S {width: 91.66%;}
  .col-12-S {width: 100%;}


}

/*        TABLET & MEDIUM DEVICES         */
/*          STYLING STARTS HERE           */

@media only screen and (min-width: 768px) {
  
  .page-wrapper {
    width: 80%;
    margin: 0 auto;
  }

  .main-headings {
    padding: 20px 0 10px 0;
    font-size: 3em;
  }

  .container-full {
    border:rgb(219, 219, 219) solid 5px;
    padding: 0 40px;
  }

  #hero-title {
    margin: 100px 0 5px 5px;
  }
  
  .col-1-M {width: 8.33%;}
  .col-2-M {width: 16.66%;}
  .col-3-M {width: 25%;}
  .col-4-M {width: 33.33%;}
  .col-5-M {width: 41.66%;}
  .col-6-M {width: 50%;}
  .col-7-M {width: 58.33%;}
  .col-8-M {width: 66.66%;}
  .col-9-M {width: 75%;}
  .col-10-M {width: 83.33%;}
  .col-11-M {width: 91.66%;}
  .col-12-M {width: 100%;}
}

/*        DESKTOP & LARGER DEVICES         */
/*          STYLING STARTS HERE            */

@media only screen and (min-width: 1200px) {
  
  .page-wrapper {
    width: 60%;
  }

  .typesetting {
    padding: 20px 30px 0 30px;
  }

  .special-image {
    width: 100%;
    max-width: 70%;
    display: block;
    margin: 0 auto;
  }

  .col-1-L {width: 8.33%;}
  .col-2-L {width: 16.66%;}
  .col-3-L {width: 25%;}
  .col-4-L {width: 33.33%;}
  .col-5-L {width: 41.66%;}
  .col-6-L {width: 50%;}
  .col-7-L {width: 58.33%;}
  .col-8-L {width: 66.66%;}
  .col-9-L {width: 75%;}
  .col-10-L {width: 83.33%;}
  .col-11-L {width: 91.66%;}
  .col-12-L {width: 100%;}
}