* {
   --main-color: #7d8ca7;
   --end-color: rgba(175,137,108,1);
   --dark: #212A32;
   --medium: #999;
   --medium-light: #eee;
   --light: #fff;
   --highlight: #d02b30;
   --trim: #199e5b;
   --brand-color: #d02b30;
   --border-color: rgba(0,0,0,.3);
   --border-style: solid;
   --border-width: 1.5px;
   --weight: bold;
	--sans: 'Didact Gothic', sans-serif;
	--serif: 'PT Serif', serif;
	--shadow:0 3px 3px rgba(0,0,0,.1);
	--transition: 1s;
	box-sizing: border-box;
	   -webkit-appearance: none;
	
}
	
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	padding: 20px;
	height: 100vh;
}
	
body { 
  margin: 0;
  line-height: 1.5rem;
  font-family: var(--sans);
  color: var(--light);
  background: var(--dark);
  -webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
   word-wrap: break-word;
   text-rendering: optimizeLegibility;
}  
  
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important}}

  @font-face {
      font-family: "DidactGothic-Regular";
     	   src: url("https://encyclosphere.org/fonts/DidactGothic-Regular.woff2") format("woff2"),
     	   url("https://encyclosphere.org/fonts/DidactGothic-Regular.ttf") format("ttf"),
     	   url("https://encyclosphere.org/fonts/DidactGothic-Regular.otf") format("truetype");
     	   font-style: normal;
     	   font-weight: 400;
  }
  
  @font-face {
      font-family: "PTSerif-Bold";
     	   src: url("https://encyclosphere.org/fonts/PTSerif-Bold.woff2") format("woff2"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Bold.ttf") format("ttf"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Bold.otf") format("truetype");
     	   font-style: normal;
     	   font-weight: 700;
  }
  
  @font-face {
      font-family: "PTSerif-BoldItalic";
     	   src: url("https://encyclosphere.org/fonts/PTSerif-BoldItalic.woff2") format("woff2"),
     	   url("https://encyclosphere.org/fonts/PTSerif-BoldItalic.ttf") format("ttf"),
     	   url("https://encyclosphere.org/fonts/PTSerif-BoldItalic.otf") format("truetype");
     	   font-style: normal;
     	   font-weight: 400;
  }
  
  @font-face {
      font-family: "PTSerif-Italic";
     	   src: url("https://encyclosphere.org/fonts/PTSerif-Italic.woff2") format("woff2"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Italic.ttf") format("ttf"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Italic.otf") format("truetype");
     	   font-style: normal;
     	   font-weight: 400;
  }
  
  @font-face {
      font-family: "PTSerif-Regular";
     	   src: url("https://encyclosphere.org/fonts/PTSerif-Regular.woff2") format("woff2"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Regular.ttf") format("ttf"),
     	   url("https://encyclosphere.org/fonts/PTSerif-Regular.otf") format("truetype");
     	   font-style: normal;
     	   font-weight: 400;
  }
  
  .quote, .quote-author { font-size: 1.4rem}
  
.submit-input {
	padding: 8px 10px;
  	width: 200px;
  	font-size: 1rem;
  	margin-top: 5px;
  	margin-bottom: 10px;
  	border: 1px solid #222;
}
  
.btn {
	padding: 11px;
	width: 150px;
	height: 34px;
	background: var(--highlight);
	color: var(--light);
  	border: 1px solid var(--highlight);
  	font-weight: bold;
  	padding-bottom: 35px;
  	margin-top: 10px;
} 
  
*, ul, li { margin:0; padding:0; list-style: none} 
  p { margin-bottom:20px}
  a { text-decoration:none; color: var(--highlight)}
  a:hover { transition: var(--transition)}
  
h1, h2, h3, h4, h5, h6 { font-family: var(--serif)}

h1 {
 	font-size: 2.3rem;
 	margin-top: 40px;
 	margin-bottom: 20px;
 	line-height: 1em;
 }
 
.main {
	max-width: 650px;
	position: relative;
	z-index: 999;
	margin: 5% auto;
}
textarea {
	width: 100%;
}
form input {
	padding: 10px;
	font-size: 1.2rem;
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid #333;
}
.logo { margin-bottom: 20px}

#page-footer {
	font-size: .8rem;
	opacity: .7;
	position:absolute;
	bottom: 10px;
	left: 40px;
}  
 
.logo img { 
  width: 100%; 
  height: auto;
  max-width: 80px;
  background: #fff;
  border-radius: 50%;
}


@media all and (max-width: 775px) {
 h1 {
 	font-size: 1.8rem;
 }
	
}