html, body{
  margin:0;
  padding:0;
}
html {
background: url(emily-campbell-327238-unsplash.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.wrapper {
width:100%;
max-width:820px;
background:rgba(250,250,250,0.85);
margin:0 auto;
overflow:hidden;
padding:2% 4% 0;
box-shadow: 0px 0px 40px 50px rgba(255,255,255,0.7);
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.05);
box-sizing: border-box;
}

@media only screen and (min-width: 1900px) {
  .wrapper {
    padding:2% 2% 0;
  }
}


h1, h2 {
font-family: 'Amatic SC', cursive;
text-align: center;
color:rgba(0,0,0,0.7);
font-size:50px;
letter-spacing: 1px;
margin-bottom:20px;
margin-top: 0;
}

h2 {
font-size:36px;
}

.nav, .footer {
  margin:50px 0;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding:5px 0;
  border-color: rgba(0,0,0,0.1);
}
.footer {
  margin:80px 0 20px;
}

.footer p{
  /* text-align: center; */
  font-size: 14px;
  margin-bottom: 0;
}

.nav a {
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

p, a, li {
font-family: 'Fira Sans', sans-serif;
}

li {
display: inline-block;
margin:5px 10px;
}

/* @media only screen and (max-width: 750px) {
    li {
      margin: 5px 10px;
    }
} */

a {
color:rgba(0,0,0,0.45);
transition: color 0.25s;
}

a:hover, a.selected {
color:#f9ce4f;
text-shadow: 0 0 4px rgba(249,206,79,0.3);
}

.selected:hover {
cursor: default;
}

ul {
margin:0;
padding:0;
text-align: center;
}

p {
/*max-width: 600px;*/
margin:0 auto 20px;
color:rgba(0,0,0,0.8);
font-size:18px;
line-height: 1.4;
}

.extra-margin-top {
  margin-top:40px;
}

.resource-box {
    background: rgba(190,200,255,0.25);
    border-radius: 2px;
    padding: 3%;
    margin-bottom: 20px;
    /* line-height: 2em; */
    /* box-shadow: 1px 2px 2px 1px rgba(0,0,0,0.05); */
}

.resource-box li {
    margin: 15px 0;
    display: block;
    text-align: left;
    font-size: 18px;
    border-bottom: dashed 1px rgba(0,0,0,0.1);
    padding-bottom: 10px;
    line-height: 1.4;
}

.resource-box li:first-child {
  margin-top:0;
  padding-top: 0;
}

.resource-box li:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom: 0;
}

.large {
  font-size:21px;
}

hr{
/* max-width: 600px; */
margin:60px auto;
border-color:rgba(0,0,0,0.1);
border-width: 1px;
}

audio {
width:600px;
margin:20px auto;
display: block;
}

.header{
margin-bottom:60px;
}

.jacket-thumbnail {
  float:right;
  margin-bottom:20px;
}

@media only screen and (max-width: 500px) {
  .jacket-thumbnail {
    float:none;
    margin-left:auto;
    margin-right:auto;
    display: block;
  }
}