body {
	max-width: 65vw;
	padding-left: 26.5vw;
	padding-right: 13vw;
	background-image: url("images/maxresdefault.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

/* fonts */

@font-face {
    font-family: VCR;
    src: url("fonts/VCR_OSD_MONO_1.001.ttf");
}

@font-face {
    font-family: Alien;
    src: url("fonts/SFAlienEncounters.ttf");
}

@font-face {
    font-family: Streamster;
    src: url("fonts/Streamster.ttf");
}

@font-face {
    font-family: Fox;
    src: url("fonts/FoxCavalier-WyzrE.ttf");
}

@font-face {
    font-family: Sticky;
    src: url("fonts/Sticky_Pops.otf");
}

/* header */

header {
	background-color: transparent;
	border-radius: 15px 15px 15px 15px;
}

header h1 {font: calc(18px + 0.8vw) 'VCR';
padding: 1% 0 1% 3.5%;
text-align: left;
margin: 0;
background-image: url("images/h1.jpg");
background-color: #ff8eb7;
background-size: contain;
background-position:right;
background-repeat: no-repeat;
color: white;}

h1#h1 {
	border-radius: 15px 15px 0px 0px;
}

/* nav */

li.nav {display: inline;
text-decoration: none;
padding: 0 0.5%;
margin: 0 auto;
font: calc(18px + 0.3vw) Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
box-sizing: border-box;}

ul.nav {list-style-type: none;
margin: 0;
padding: 1% 0 1% 3%;
overflow: hidden;
background-color: #FFAFCC;}

.nav a {text-decoration: none;}

.nav {margin-bottom: 1%;}

#nav {z-index: 1;
left: 0;
right: 0;}

.sticky {
  position: fixed;
  top: 0;
  max-width: 65vw;
  padding-left: 26.5vw;
  padding-right: 13vw;
  margin: 0 8px;
}

/* footer */

footer {clear: both;
width: 30%;
text-align: center;
margin: auto;}

/* home page stuff */

#cover {padding-top: 5%;
margin: auto;}

.cover {padding-top: 5%;
margin: auto;}

#main-content {clear: both;
overflow: hidden;
background-color: #FDDBF3;
background-image: url("images/bg.png"), url("images/bg.jpg");
background-repeat: no-repeat;
background-size: 65%, cover;
background-attachment: fixed;
background-position: top, center;
flex: 1;
padding: 5% 5% 5% 20%;
margin: auto;
border-radius: 0px 0px 15px 15px;}

.sticky2 {
	border-radius: 0 !important;
}

span.background {
margin: auto;
display: block;
max-width: 100vw;
overflow: auto;
padding: 3%;
background-color: white;
border-radius: 15px 15px 15px 15px;}


/* general */

p {font: calc(14px + 0.3vw) 'Roboto Slab', serif;
color: #3E0F25;}

p {font: calc(14px + 0.3vw) 'Roboto Slab', serif;
color: #3E0F25;}

dl {font: calc(14px + 0.3vw) Overlock;}

ol {font: calc(14px + 0.3vw) 'Roboto Slab', serif;
color: #3E0F25;}

ul {font: calc(14px + 0.3vw) 'Roboto Slab', serif;
color: #3E0F25;}

h1 {font: calc(24px + 1.3vw) 'Fox';
margin: 3% 0;
text-align: center;
color: #FF7EAC;}

h2 {font: calc(20px + 1vw) 'VCR';
margin: 1% 0;
text-align: center;
color: #D5648C;}

h3 {font: calc(12px + 1vw) 'Roboto Slab';
margin: 1% 0;
text-align: center;
color: #D5648C;}

.caption {text-align: center;
font: calc(12px + 0.3vw) 'Roboto Slab', serif;
margin: 1% 0 0 0 ;
color: #873159}

/* links */

a {color: #390143;}

a:visited {color: #980EB0;}

a:hover {color: #926EDD;}

a:active {color: #794CAA;}

/* responsive */

@media screen and (max-width: 1000px){
	#main-content {
	background-image: url("images/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	padding: 5% 5% 5% 5%;}
	
	body {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;}
	
	.sticky {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;}
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}