@charset "UTF-8";
/* CSS Document */

/* Evocata blue: background:#3266B2; */
* {
  box-sizing: border-box;
}

body  {
  background: #3266B2;
  margin: 0; 
  padding: 1% 0 0 0;
  font-family:"Sorts Mill Goudy", Garamond, serif;
  text-align: center; 
  font-size: 16px;
}

.hide {display: none;}
.smaller {font-size: 80%;}

.logo {
padding: 0 2em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background:#3266B2;
}
#evologo img{
max-width: 60%;
min-width: 40%;
height: auto;
}
#mast img{
  max-width: 80%;
  min-width: 70%;
  height: auto;
  }
#goethetext {
width: 100%;
height: auto;
max-width: 24em;
color:#FEBBBB;
text-align: left;
padding-left: 3em;
}
#goethe {font-size: 80%;}


/*navbar*/
.topnav {
	background: #1AF; 
	width: 100%;
	height: 1.5em;
        text-decoration: none;
  	margin-top: 0em;
  	display: flex;
  	align-items: center;
 }
.topnav li {
display: inline;
padding: 0 1em;

}
.topnav ul li a:link {
	color:#445; 
	text-decoration:none;
	}
.topnav ul li a:hover {
	color:red; 
	text-decoration:underline; 
	}
.topnav ul li a:visited {
	color:#555; 
	text-decoration:underline;
}
@media(max-width: 500px){
body {font-size: 125%;}
.topnav{
  height: auto;
  font-size: 24px; 
}
.topnav li{
  display: inline-block;
  line-height: 250%;
  }
}

/*content wrapper*/
main { 
background: black;
margin: 0 auto;
width: 100%;
max-width: 100%;
height: auto;
padding-top: 2em;
padding-bottom:5%;	
	}
main.supplement { 
background: #3266B2;
}
h1, h2, h3 {
	font-family:"Times New Roman", Times, serif;
	margin: 1.25em 0 1em 0;
	color:#FB0;
	text-align:center;
	}
/*Feature*/
#comic img {
	max-width: 100%;
	width: 100%;
	height: auto;
	}
#comic h2 {font-size: 250%;}
#comic h3 {
  font-size: 150%;
  margin-bottom: 2em;
}
#comic img {margin-top: -1em;}
#episodenav {
margin: 1em 0 1em 1em;
font-size:140%;
color: #FB0;
}
#episodenav a:link {
color:#1AF;
text-decoration: none;
}
#episodenav a:hover {color: #FB0;
text-decoration: none;
}
#comic .eplink img {
  width: 90px;
  height: auto;
}

/*Blog*/
#blog {
	background: #113;
	color: #aac;
	margin:50px auto 0 auto;
	border:inset;
	width: 100%;
	height: auto;
	max-width:740px;
	padding:2em;
	text-align: left;
	font-size: 1.5rem;
	}
#blog p {
  font-family: Tahoma;
  line-height: 1.6;
  }
#blog h3 {text-align: center;}
#blog blockquote {
  line-height: 1.4;
  font-size: 95%;
  width: 80%;
  display: block;
  margin: 0 auto;
   }
  #blog blockquote.verse {
    margin-left: 15em;
   }
   
.alert {
  background-color: #ddd;
  color: red;
  font-size: 120%;
  padding: 3px;
 }
.standardbutton {
  font-size: 110%;
  width: 80%;
  margin: 0.8em auto 0.6em auto;
}
 .footnote {
   margin-top: 1em;
   font-size: smaller;
   line-height: 1.4;   
 }
.footnote a:link, a:visited {
  color: #ddf;
  text-decoration: underline;
}
.footnote a:hover {
  color: red;
  text-decoration: underline;
}
/*episode navigation*/
.eplink a {text-decoration: none;}
#prevepimg {padding-right: 7px;}
/*footer*/
footer {
color:#ED1419;
margin:0 auto 0 auto; 
font-size: 14px;
}
footer a:link {
color:#ED1419;
}
footer a:hover {
color:#FB0;
}

/*phone adjustmens*/
@media only screen and (max-width: 480px) {
  #blog blockquote.verse {
    margin-left: 3em;
   }
}