h1, h2, h3, h4, h5, h6, .quote, .message, .header {
font-family: 'Lobster Two', cursive;
font-size: 5em;
}
p, .content, .author, .statement {
	font-family: 'Lato', sans-serif;
}
.author {
	float: right;
  padding-top:2%;
  padding-right:7.5%;
  font-size: 0.85em;
}
.statement, .author {
  font-style: italic;
}
.statement {
  font-size: 0.75em; 
}
/* Styling for Content */

.message, .author {
	color: #dda098;
}
#quoteDisplay {
  padding: 5%;
}
.fact {
	color:#dda098;
  width: 100%;
  text-align: center;
  font-family: 'Lobster Two', cursive;
  font-size: 3em;
}

.lyric {
  color: #dda098;
  width: 100%;
  text-align: center;
  font-family: 'Lobster Two', cursive;
  font-size: 2.5em;
}
.number {
  color:#fff;
}
.block-a {
  font-size: 1.25em !important;
}

.header {
  color:#5E5E5E !important;
  font-size: 5em !important;
}

/* CSS GRID STYLING */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 40px;
  font-family: 'Open Sans', 'sans-serif';
  color: #dda098;
  text-align: center;
  background: #fff url("pattern.jpg") no-repeat fixed center;
}

h1, p {
  margin: 0 0 1em 0;
}

.wrapper {
  max-width: 940px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

@media screen and (min-width: 600px) {

  /* no grid support? */
  .block-a, .block-b, .block-c {
    float: left;
    width: 19.1489%;
  }

  .content {
    float: right;
    width: 79.7872%;
  }

  .wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: minmax(150px, auto);
  }
  
  .header, .footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }
  
  .block-a {
    grid-column: 1;
    grid-row: 2;
  }
  
  .block-b {
    grid-column: 1;
    grid-row: 3;
  }
  
  .content {
    grid-column: 2;
    grid-row: 2 / 4;
  }

}

.wrapper > * {
  background-color: #5E5E5E;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  /* needed for the floated layout*/
  margin-bottom: 10px;
}
@media screen and (max-width: 599px) {
	.header, .footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }
  
  .block-a {
    grid-column: 1;
    grid-row: 2;
  }
  
  .block-b {
    grid-column: 1;
    grid-row: 3;
  }
  
  .content {
    grid-column: 1;
    grid-row: 4;
  }
  .footer {
	grid-column: 1;
    grid-row: 5;
  }
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

.block-b, .header {
  background: transparent;
}

.btn {
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 5px 20px;
  display: inline-block;
  margin: 5px 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Button 1 */
.btn-1 {
  border: 3px solid #fff;
  color: #fff;
  background: #dda098;
}

/* Button 1a */
.btn-1a:hover,
.btn-1a:active {
  color: #dda098;
  background: #fff;
  border: 3px solid #5D7F8F;
}
.btn-1a:active, .btn-1a::after {
  border: 3px solid #dda098;
}
.thiswebsite {
  padding-top: 2.5%;
}