@charset "utf-8";


*{
    box-sizing:border-box;
}

body{
    color:white;
	background-color:#2E2E2E;
}

h1, h2{
    font-family:Niagara;
}

p, li{
    font-family:Soleil;
	line-height:1.5rem;
}


h1{
    font-size:3.5rem;
    padding:20px 0;
    margin:0;
}

h2{
    font-size:2.5rem;
    margin:0;
	padding:15px 0;
}

a:link, a:visited{
    text-decoration:none;
    color:#999999;
}

a:hover, a:active{
    color:white;
}

header{
	position:relative;
}

header img{
	width:100%;
}

header h1{
    text-align:center;
    background-color:rgba(39,21,9,0.80);
	width:100%;
	position:absolute;

}

header div{
    background-color:rgba(39,21,9,0.80);
    padding:30px;
    margin:30px 30px 0;
    border-radius:5px;
    height:500px;
	position:absolute;
	top:160px;
}


#mainCont article h2, #mainCont article p{
    margin-left:20px;
    margin-right:20px;
}

#mainCont article img{
    margin-bottom:20px;
    object-fit:contain;
    border:10px #271509 solid;
    width:100%;
}

#mainCont article p{
    margin-bottom:100px;
}

footer{
    background-color:#271509;
    text-align:center;
    padding-bottom:50px;
    padding-top:25px;
}

footer ul{
	list-style:none;
}



@media only screen and (min-width: 660px) {


	h1{
		font-size:3rem;
	}

	h2{
		font-size:2rem;
	}
	
	p{
		font-size:.9rem;
	}
	
	header div{
		width:300px;
		right:20px;
		top:110px;
	}
	
	#mainCont article{
		display:flex;
		justify-content:space-between;
		padding-bottom:25px;
		padding-top:25px;
		margin-right:40px;
		margin-left:20px;
	}
	
	#mainCont article:nth-last-of-type(2){
		flex-direction:row-reverse;
		margin-right:20px;
		margin-left:40px;
	}
	
	#mainCont article div{
		flex:50%;
	}
	
	#mainCont img{
		flex:50%;
		align-self:center;
		object-fit:contain;
		margin-right:20px;
	}	
	
	#mainCont article:nth-of-type(2) img{
		margin-right:0;
		margin-left:20px;
	}
	
	#mainCont article h2, #mainCont article p{
		margin-left:0;
		margin-right:0;
		padding-top:0;
	}
	
	#mainCont article p{
		margin-bottom:0px;
	}
	
	footer{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-around;
	}
	
	footer h1{
		flex:100%;
	}
	
}


@media only screen and (min-width: 1000px){
	
	#container{
		width:1000px;
		margin:auto;
	}
	
	header div{
		width:350px;
	}
	
	h2{
		font-size:2.5rem;
	}
	
	header div p{
		font-size:1.05rem;
	}
	
	#mainCont article{
		margin-left:40px;
	}
	
	#mainCont article:nth-last-of-type(2){
		margin-right:40px;
	}
	
}