:root {
	--header-height: 400px;
	--footer-height: 200px;
	--content-height: 800px;
	--common-width: 120px;
	--container-height: 1400px;
	--container-height: calc(var(--header-height) + var(--content-height)
						+ var(--footer-height));
	--container-width: 800px;
	/*color-scheme*/
	--salmon: #C05069;
	--dark-purple: #46365B;
	--yellow:#FFF48A;
	--blue: #8097CB;
	box-sizing:border-box;
}
*{
	margin:0px;
	padding:0px;
}
body{
	font-family: Monaco, monospace;
	background-color: black;
}
.container {

	position:relative;
	background-color: gray;
	top:0;
	bottom:0;
	left:0;
	right:0;
	height: var(--container-height);
	width: var(--container-width);
	margin:auto;
}

.header {
	/*POSITION*/
	position:absolute;
	height: var(--header-height);
	width:var(--container-width);
	margin:0;
	/*IMAGE*/
	background-image: url("./images/jGonzalez.jpg");
	background-position:center top;
	background-attachment: fixed;
	background-repeat: no-repeat;
    /*TEXT*/
    text-align: center;
	line-height: calc(var(--header-height));
    color: yellow;
    font-family: Monaco, monospace;
	font-size: 60px;
}

.left {
    position:absolute;
    left:0px;
	top: var(--header-height);
	color: white;
	/*background-color:var(--blue);*/
	width: var(--common-width);
    height: var(--content-height);
    background-color:var(--salmon);
}
.left ul {
	width: calc(var(--common-width));
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: left;
}

.left a {
	padding: 5px 5px;
	display: block;
	color:yellow;
	text-decoration: none;
	line-height: 25px;
}

.left a:hover {
	background-color: pink;
}

.active {
	background-color: var(--dark-purple);
}

.right{
    position:absolute;
    right: 0px;
	top: var(--header-height);
	color: white;
	/*background-color:var(--blue);*/
    width: var(--common-width);
    height:var(--content-height);
    background-color:var(--salmon);
}

.content{
	background-color: var(--blue);
    position:absolute;
    height: var(--content-height);
    left: var(--common-width);
	top: var(--header-height);
    right: var(--common-width);
	color: white;
}

.content ul {
	padding:0px 0px;
	margin:0px 0px;
	overflow:hidden;
	list-style-type: none;
	position:absolute;
}

.content li{
	float:left;
	display: inline;
}

.content a:hover{
	opacity: 0.5;
}

.product {
		color: yellow;
		width:100%;
		text-align: center;
}
.product img{
	position: relative;
	width:auto;
}
.product a{
	color:salmon;
}

.footer{
	position:absolute;
	height: var(--footer-height);
	width:var(--container-width);
	margin:0;
	padding:0;
    top: calc(var(--content-height) + var(--header-height));
	background-image: url(./images/end.jpg);
	background-color: var(--yellow);
	background-position: 90% bottom;
	background-repeat:no-repeat;
	background-size: 200px auto;
	color:black;
}

.footer p{
	margin:10px;
}