body{
  font-family: 'Spectral', serif;
	background-color: #F2F2F3;
  color: #343031;
	padding: 2rem;
  display: flex;
  flex-direction: column;
}

h1{
  padding: 0.5rem;
  font-size: 5rem;
  margin: 1rem 0;
  font-family: 'Labrada', serif;
  font-weight: 200;
  font-style: italic;
}

h1 a:hover, h1 a:active, h1 a:focus{
  font-style: normal;
  text-decoration: none;
  font-family: 'Labrada', serif;
}

blockquote{
  font-style: italic;
}

ul{
	list-style: none;
	padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li{
  padding: 0.5rem;
  max-width: 20rem;
}

a, a:visited{
	text-decoration: none;
  color: #343031;
  text-decoration: underline;
}

a:hover, a:active, a:focus{
  text-decoration: underline;
  color: #343031;
}

.buttonLink{
  padding: 1rem 1.8rem 1.1rem 1.8rem;
  display: inline-block;
  background-color: #CFC9C5;
  border: 2px solid #CFC9C5;
  text-decoration: none;
}

.buttonLink:hover, .buttonLink:active, .buttonLink:focus{
  text-decoration: none;
  border: 2px solid #343031;
}

nav a{
  text-decoration: none;
}

nav ul a{
  padding: 1rem 1.8rem 1.1rem 1.8rem;
  display: inline-block;
  background-color: #CFC9C5;
  border: 2px solid #CFC9C5;
}

nav ul a:hover, nav ul a:active, nav ul a:focus{
  text-decoration: none;
  border: 2px solid #343031;
}

.active , .active:visited{
  background-color: #D8B547;
  border: 2px solid #D8B547;
  font-style: italic;
}

.active:hover, .active:active, .active:focus{
  text-decoration: none;
  border: 2px solid #343031;
  font-style: italic;
}

main {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

article{
  padding: 1rem 0.5rem;
  max-width: 40rem;
}

h2{
  font-weight: 100;
  font-size: 2rem;
  margin-bottom: 0;
}

h3{
  font-weight: 100;
  font-size: 1.4rem;
  font-style: italic;
  padding-top: 1rem;
  margin-bottom: 0;
}

p{
  margin-top: 0;
}

article > ul{
  list-style: square inside;
  padding: 0;
  display: inline-block;
  width: 100%
}

article li{
  padding: 0.2rem 0;
  max-width: 100%;
}

img{
  width: 100%;
  margin: 1rem 1rem 0 0;
}

/* Media Queries */

@media (max-width:48rem){
  body{
    flex-wrap: wrap;
  }
  header{
    width: 100%;
  }
  article{
    padding: 0.5rem;
  }
  h1{
    font-size: 3rem;
  }
  img{
    width: 100%
  }
}

@media (max-width:35rem){
	body {
    flex-direction: column;
    padding: 0.4rem;
  }
  nav ul{
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
  article{
    padding: 0.5rem;
  }
  h1{
    font-size: 2.5rem;
  }
  h2{
    font-size: 1.5rem;
  }
  h3{
    font-size: 1.2rem;
  }
  img{
    width: 100%
  }
}