/*   ---   Default Layout Settings   ---   */

* {
  font-family: Tahoma, Verdana, sans-serif;
  text-decoration: none;
  box-sizing: border-box;
}

:root {
  /*   ---   Webpage Colours   ---   Webpage Colours   ---   */
  --primary-background-color: #a5e2ff; /* #93d5f4*/
  --secondary-background-color: #c6d2d2;
  --background-navbar-color: #2f4f4f;
  --background-hover-color: #5f6a51;
  --link-border-color: #1f3026;
  --border-hover-color: #6ec391;
  --text-color: #4b350a; /* #362911 */
  --text-ref-color: #454545;
  --text-title-color: #255b35;
  --text-active-color: #fdcc78;
  --text-link-color: #f1ebd9;
  --text-navbar-color: #2c5050;
  --text-quote-color: #7b440c;
  --text-webheading-color: #421bc2bb;
  --text-navMenu-color: #ffdd93;
  --text-navLink-color: #dbf0fa;
}

html {
	font-size: 100%; /* option - font-size: 62.5% */
}

body {
	font-size: 1rem; /* option - font-size: 1.5rem */
	line-height: 1.2;
  background-color: var(--primary-background-color);
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

  /*   ---   Typography   ---   Typography   ---   */

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  text-align: center;
  color: var(--text-color);
	margin: 2rem 0 1rem;
}

h1 {
	font-size: 3.815rem;
}

h2 {
  font-size: 3.052rem;
}

h3 {
  font-size: 2.441rem;
}

h4 {
  font-size: 1.953rem;
}

h5  {
	font-size: 1.536rem;
}
 
h6  {
	font-size: 1.25rem;
}

hr {
  color: var(--text-color);
}

/*   ---   MEDIA QUERY    ---      ---   MEDIA QUERY    ---      ---   MEDIA QUERY    ---   */

@media screen and (min-width: 980px) {
  .column-2 hr {
    display: none;
  }
}

/*   ---   MEDIA QUERY    ---      ---   MEDIA QUERY    ---      ---   MEDIA QUERY    ---   */
        
@media screen and (max-width: 980px) {
  
h1, h2, h3, h4, h5, h6 {
  margin: 2rem 0 1rem;
 }

 h1 {
   font-size: 3rem;
 }
 
 h2 {
   font-size: 2.241rem;
 }
 
 h3 {
   font-size: 1.953rem;
 }
 
 h4  {
   font-size: 1.536rem;
 }
  
 h5  {
   font-size: 1.25rem;
 }
}

.column-2 hr {
  color: var(--text-color);
}

/*   ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---   */
        
@media screen and (max-width: 790px) {

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.953rem;
  }

  h3  {
    font-size: 1.536rem;
  }
  
  h5  {
    font-size: 1.25rem;
}
}

/*   ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---      ---   MEDIA QUERY   ---   */

@media screen and (max-width: 620px) {
    
  h1 {
    font-size: 1.7rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3  {
    font-size: 1.4rem;
  }
  
  h4  {
    font-size: 1.2rem;
  }
   
  h5  {
    font-size: 1.1rem;
  }
}