* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {font: normal 100% 'Lusitana', serif; background-color: #ffe;}

.page {
  display: flex;
  flex-wrap: wrap;
  padding: 0 1vw;
	background-color: #fff;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
  margin: 0 auto;
}

.section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topnav { 
  background-color: #333;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 1rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  letter-spacing: 0.1em;}
.header {}
}
h1 {font-size: 5vw;}
.hero {width: 100%; max-width: 600px;}
.title {border-bottom: 1px solid #333;
border-top: 1px solid #333; margin-top: 0.5
rem; padding-top: 0.5rem;}
.footer{font-size: 1.1rem; padding-bottom: 2vw; border-top: 1px solid #333; padding-top: 3vw;}
.socials{font-size:1.1rem; height: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.linkout{font-size: 1.1rem; width:100%; margin-top: 0.5rem; margin-bottom:0.5rem; height: 20%; background: linear-gradient(to right, #eee, #fff, #eee); padding: 0.5em; border-radius: 1em;}
a{text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  color: #039;}

/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
      }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
      }
.linkout{width: 50%;}
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  body {
    background-color: #B2D6FF; /* Blue */
  }
.page {width: 960px;}
.header {height: 600px;}
.episode {width: 75%;}
.socials {width: 25%;}
h1{font-size: 3rem;}
.linkout{width:100%; margin-left: 0.2em;}
}