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

body {
    background-color: azure;
    }
    
/*****************
HOMEPAGE
*****************/

#image-area {
    width: 100vw;
    z-index: 1;
    position: absolute;
    align-content: center;
}

#viet {
    min-width: 100%;
    min-height: 100%;
}

#sky {
    width: 100vw;
    height: 100vw;
    position: absolute;
    z-index: 1;
}
@keyframes animatedBackground {
	from { background-position: 9000% 0; }
	to { background-position: 0 0; }
}

  	header ul {
		position: absolute;
		right: 5vw;
		list-style-type: none;
	}
	header li a {
		text-decoration: none;
		color: #999;
		font-size: 1vw;
	}
	header img {
		position: fixed;
		left: 1.5vw;
		top: 1.5vw;
		height: auto;
		width: 10vw;
	}
header h1, header ul, nav ul, header p, .breadcrumb, section p, h1, ul.products li, form, footer {
		font-family: 'Andale Mono', monospace;
		z-index: 10;
	}
header h1, header p {
        position: fixed;
        left: 1vw;
        width: 100%;
        z-index: 10;
}

header h1 {

        top: 0;
        height: 7vw;
		font-size: 3.5vw;
}

header p {
    top: 5vw;
    color: black;
    font-size: 1.3vw
}


	nav {
		position: fixed;
		top: 10vw;
        z-index: 15;
	}
	nav ul {
		list-style-type: none;
		font-size: 2.5vw;
		padding: 1vw;
		}
	nav li {
		padding: 0 0 1vw 0;
		}
	nav li a {
		text-decoration: none;
		/*color: #999;*/
		color: #575877;
		}
	nav li.on a {
		color: rgba(94, 154, 219, 1);
	}
	nav li a:hover {
		/*color: rgba(150, 200, 235, 1);*/
		color: rgba(175, 205, 240, 1);
		}


/*
	section {
		position: absolute;
		left: 10vw;
		margin: 0;
		padding: 2vw;
	}
	section img {
		width: 50vw;
		height: auto;
		z-index: 3;
		border: solid darkgray 1px;
	}
*/


/****************************************************
	  ABOUT
**************************************************/

#about {
	position: absolute;
	top: 10vw;
    left: 20vw;
    right: 25vw;
	}

#about p {
	display: inline;
	max-width: 90vw;
    font-size: 0.9em;
	}	  

#about img {
	position: relative;
	width: 15vw;
	height: auto;
	padding: 0 1vw 0 0;
    float: left;
	}

.backEndorse {
    position: fixed;
    left: 20vw;
    top: -5vw;
}
/*section {
	display: block;
	position: relative;
    margin: 2vw 25vw 1vw 11vw;
}
*/


/*
	p.cart {
		text-align: right;
		margin: 0;
	}
	ul.products li {
		display: inline-block;
		list-style: none;
		padding: 1vw;
		float: left;
	}
	ul.products li img {
		width: 13vw;
	}
	ul.products li p {
		width: 14.3vw;
		text-align: center;
		font-size: 0.9em;
	}
	.products img {
		width: 10vw;
		padding: 1.5vw;
	}
	/*form {
		width: 30vw;
		margin: 10vw auto;
	}
	form input[type="submit"] {
		text-align: center;
		position: relative;
	}
	.breadcrumb {
		font-size: 1em;
		font-weight: normal;
	}
	.issue-details {
		width: 40vw;
		float: right;
		padding: 1.5vw;
		font-size: 0.8em;
	}
	.issue-details h1 .price {
		padding-right: 3vw;
		font-size: 1em;
	}

    ol.tumblr_posts {
        list-style-type: none;
    
    }*/
	/****************************************************
		  CONTACT
	**************************************************/
	#contact {
		position: fixed;
		top: 15vw;
		left: 20vw;
		}
	#contact h1 {
		position: relative;
		width: 20vw;
		font-size: 1.75em;
		}

	footer {
/*		position: fixed;
		top: 55vw;
		z-index: -1;*/
        position: fixed;
        top: 95vh;
		font-size: 0.7em;
		color: #999;
	}

@media screen and (min-width: 1610px) {
    @keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 9000% 0; }
    }
}

@media screen and (max-width: 1290px) {
    #animate-area {height: 100vw;}
    @keyframes animatedBackground {
        from { background-position: 500% 0; }
	    to { background-position: 0 0; }
    }
}

@media screen and (max-width: 800px) {
    #animate-area {height: 175vw; margin-left: 0;}
    #still-area {left: -5vw;}
    header h1 {font-size: 1.1em;}
    header p {font-size: 0.7em;}
    #about p {font-size: 0.6em;}
}

@media screen and (max-device-width: 800px) {
    nav ul {font-size: 3.5vw;}
    footer {top: 75vw; font-size: smaller;}
}