/*
  STYLE GUIDE STYLING 
  Default styling for the style guide 
*/
body {
  font-family: sans-serif;
  padding: 2rem;
}

section:not([id]) {
  margin: 1em 0;
  padding: 0.5em 0;
  border-top: 1px solid #333;
}

section h3 {
  margin-bottom: 0;
}

section p {
  margin-top: 0;
}

section code {
  background-color: #EEE;
  padding: 0.5em 0.75em;
}


/* 
  INTERACTIVE ELEMENTS -------------------
*/

/* Styling for the navigation button */
.button-nav {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #012F23;
  border-radius: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  font-family: 'PT Serif', serif;
  font-size: 20px;
  width: 100px;
  text-align: center;
}

.button-nav:hover, .button-nav:focus {
  background-color: #9CA56A;
}

.txtLink {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

.button-submit {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #405441;
  border-radius: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  font-family: 'PT Serif', serif;
  font-size: 15px;
}

.button-reset {
  display: inline-block;
  padding: 0.5em 0.75em;
  color: #FFF;
  background-color: #9CA56A;
  border-radius: 0.25em;
  text-decoration: none;
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  font-family: 'PT Serif', serif;
  font-size: 15px;
}

.textInput {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

/* 
  TEXT ELEMENTS -------------------
*/
.logo {
  font-family: 'Fredericka the Great', cursive;
  font-size: 40px;
}

.header1 {
  font-family: 'PT Serif', serif;
  font-size: 30px;
}

.header2 {
  font-family: 'PT Serif', serif;
  font-size: 25px;
}

.header3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
}

.pgph {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

.list1 {
  list-style-type: square;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}

.list2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
}



/* 
  COMBINED ELEMENTS -------------------
*/
.swatch1, .swatch2, .swatch3, .swatch4, .swatch5 {
  display: inline-block;
  padding: 0.5em 0.75em;
  border-radius: 0.25em;
  width: 90px;
  height:30px;
}

.swatch1 {
  background-color: #012F23;
}
.swatch2 {
  background-color: #405441;
}
.swatch3 {
  background-color: #9CA56A;
}
.swatch4 {
  background-color: #B7B786;
}
.swatch5 {
  background-color: #E6E5B4;
}