body {
	background-image: url(img/comics_header.png);
	background-size: 100%;
	background-attachment: fixed;
	overflow-x: hidden;
	position: relative;
}

/* FONT */

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

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

H1 {
	font-family: "Cooper", serif;
	color: white;
	font-size: 9vw;
	text-align: center;
	padding-top: 45px;
	text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

	H1 {
	font-family: "Cooper", serif;
	color: white;
	font-size: 9vw;
	padding-top: 45px;
	text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

}

H2 {
	font-family: "Futura", sans-serif;
	color: black;
	font-size: 12pt;
	font-weight: 100;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

H2 {
	font-family: "Futura", sans-serif;
	color: black;
	font-size: 10pt;
	font-weight: 100;
	}
}

H5 {
	font-family: "Futura", sans-serif;
	color: gray;
	font-size: 10pt;
	padding-bottom: 10px;
	text-align: center;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

H5 {
	font-family: "Futura", sans-serif;
	color: gray;
	font-size: 8pt;
	padding-bottom: 10px;
	text-align: center;
	}
}

H6 {
	color: white;
}

a {

    text-decoration: none;
}

/* NAV */

ul {
    list-style-type: none;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    position: fixed;
    z-index: 5;
}

li a{
	font-family: "Futura", sans-serif;
	float: right;
    display: inline;
    color: #000;
    padding: 18px 18px 8px 16px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

li a{
	font-family: "Futura", sans-serif;
	float: right;
    display: inline;
    color: #000;
    padding: 18px 10px 3px 7px;
	}
}

#HeaderArea {
	position: relative;
    vertical-align: middle;
	margin: 0 auto;
	width: 100%;
	height: 50vh;
}


#TextBox {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 75vw;
}

#Content {
	background: white;
	width: 102%;
	left: -1%;
	position: relative;
}

/* GALLERY */

.gallery {
	position: relative;
	width: 75%;
	margin-bottom: 100px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
}

.gallery div {
}

.gallery img {
	width: 30%;
	padding: 1.5%;
	margin: -2px;
}

.gallery img:hover {
	opacity: 0.5;
}

#About {
	width: 75%;
	padding-top: -50px;
	margin: auto;
	text-align: justify;
}

#ProfileBox {
	width: 100%;
}

#About img {
	width: 30%;
	display:block;
}

#ProfileText {
	padding-top: 50px;
}

#contactBar{
	position: relative;
	text-align: center;
	width: 50%;
	min-width: 210px;
	margin-left: auto;
	margin-right: auto;
 	padding-top: 50px;
	z-index: 100;
	font-size: 25px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

#contactBar a{
	padding: 0%;
}
}

#contactBar a{
	padding: 2%;
}

#Box {
	position: relative;
	width: 110%;
 	left: -5%;
 	padding-top: 50px;
 	text-align: center;
 }

 #Floater {
 	width: 100%;
 	height: 100px;
 }