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

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

@media screen and (max-width:899px) {
	.colmobile1 {width: 20%; float: left;}
	.colmobile2 {width: 40%; float: left;}
	.colmobile3 {width: 60%; float: left;}
	.colmobile4 {width: 80%; float: left;}
	.colmobile5 {width: 100%; float: left;}
	
	nav {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-content: center;
	}
	
	nav p, a{
		box-sizing: border-box !important;
		width: 100% !important;
	}

	.special {width: 33.3%; float: left;}
}

@media screen and (min-width:900px) {
	.colcomp1 {width: 20%; float: left;}
	.colcomp2 {width: 40%; float: left;}
	.colcomp3 {width: 60%; float: left;}
	.colcomp4 {width: 80%; float: left;}
	.colcomp5 {width: 100%; float: left;}
}

#wrapper {
	max-width: 80%;
	margin: 0 auto;
	overflow: auto;
	background-color: #13950C;
	border: 10px ridge #4fb1ce;
}
header, header h1, nav p, aside, ul {
	text-align: center;
}

header, nav, main, aside, footer {
    border: 10px ridge #4fb1ce;
}

header {
	background-image: url("../images/woodslab.png");
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
}

header h1 {
    color: white;
    text-shadow: 4px 2px 1px #000000;
	font-family: Texturina;
}

main {
	float: right !important;
	padding: 6px;
	text-align: center;
}

aside {
	float: left !important;
}

.socials {
	padding: 12px;
}

nav p a {
    text-align: center;
    padding: 8px;
    background-color: rgb(77,38,9);
    color: rgb(255,255,255);
    font-size: x-large;
    text-decoration: none;
    border: thick outset rgb(153,75,17);
	font-family: Aclonica;
}

nav p a:hover {
    background-color: rgb(107,52,12);
}

footer {
	text-align: center;	
}

footer a {
    padding: 8px;
    background-color: rgb(77,38,9);
    color: rgb(255,255,255);
    font-size: x-large;
    text-decoration: none;
    border: thick outset rgb(153,75,17);
	font-family: Aclonica;
}

footer a:hover {
	background-color: rgb(107,52,12);
}