/*Alexa Schuijt*/
:root {
	--secondary-color: rgb(255, 239, 218);
}

html{
	background-color: bisque;
	background-image: url("../images/smallimg.jpg");
	background-size: 100%;
}

head{
	background-color: bisque;
}

header{
	text-align: center;
	font-family: Sancreek, serif;
	margin: 0.625rem 1.111%;
	width: 100%;
	justify-self: center;
}

header h2{
	font-size: 300%;
	margin-bottom: 0.625rem; /* 10px */
	margin-top: -0.5625rem; /* -9px */
	justify-self: center;
}

header h3{
	font-family: "Maiden Orange", serif;
	margin-top: 0.3125rem; /* 5px*/
	font-size: 135%;
	justify-self: center;
}

header p{
	margin: 0;
	font-size: 115%;
	justify-self: center;
}

header img{
	max-width: 13.22%; /* 119px*/
}

#left{
	float: left;
}

#right{
	float: right;
}

nav ul{
	width: 100%;
	height: 7.5rem; /*120px*/
    justify-self: center;
	padding-inline-start: 13.1739%; /*20px*/
}

nav ul li {
	font-family: Sancreek, serif;
	text-shadow: 1px 1px 2px black;
	border: 3px solid black;
	border-radius: 10px;
	border-style: dotted;
	width: 14%;
	float: left;
	/* background-color: sandybrown;rgb(255, 221, 191) rgb(96, 52, 14) */
	background-image: linear-gradient(to right top, rgb(95, 45, 1), rgb(255, 221, 191) 75%);
	text-align: center;
	/*padding: 1.875rem 1.11112%;*/ /*30px 10px*/
	list-style-type: none;
	margin: 0.75rem 1.341%; /* 12px */
	a{
		padding: 1.875rem 7.992%; /*30px 10px*/
		color: white;
		text-decoration: none;
		display: block;
	}
	a:hover, a:focus{
		padding: 2rem 5%;
	}
	#current {
		color: black;
		text-shadow: 1px 1px 2px white;
	}
}



nav{
	li:hover, li:focus{
		background-color: rgb(224, 148, 81);
		/*padding: 2.5rem 1.665%;*/ /*40px 15px*/
		margin: 0.35rem 1.34%; /*7px*/
		/* margin makes up for the difference in how much it grows when you hover. */
	}
}

body{
	font-family: Bronco, Verdana, sans-serif;
    /* width: 95%; for responsive*/
	max-width: 900px; /*900px*/
    height: 890px; /*890px*/
	margin: 0.625rem auto;
	border: 8px solid var(--secondary-color, rgb(255, 239, 218));
	border-style: dotted;
    box-shadow: 5px 6px 10px 5px #e1a672;    
	background-color: rgb(117 73 52);
	padding: 15px;
}

main{
	padding: 5px 5px 5px 5px;
	min-height: 550px;
	img:hover, img:focus{
		transform: rotate(20deg);
	}
}

main aside{
	font-family: Sancreek, serif;
	border: 8px solid var(--secondary-color, rgb(255, 239, 218));
	height: 18.75rem; /*300px*/
	width: 22%;/*200px*/
	margin: 2.18rem 3.933%; /*35px*/
	border-radius: 10px;
	background-color: var(--secondary-color, rgb(255, 239, 218));
	float: left;
	p:hover{
		transform: rotate(20deg);
	}
	box-shadow: -14px 8px 10px 6px black;
}

aside h1{
	justify-self: center;
	margin-top: 0;
}

aside p{
	justify-self: center;
	margin: 0;
	font-size: large;
}

aside h3{
	font-size: 150%;
	max-width: 85%;
	justify-self: center;
	text-align: center;
	font-family: "Maiden Orange", serif;
}

main section{
	font-family: "Maiden Orange", serif;
	width: 65%; /*585px*/
	height: 24.06rem; /*385px*/
	float: right;
	font-size: 110%;
	margin-top: 5px;
	button:hover{
		background-color: rgb(224, 148, 81);
		padding: 3px 9px;
	}
}

section h2{
	justify-self: center;
	margin: 0;
}

section button{
	float: right;
	margin-right: 4%;
	background-color: var(--secondary-color, rgb(255, 239, 218));
    box-shadow: -4px 3px 6px black;
	font-family: Sancreek, serif;
}

#cu{
	margin: 4% 5% 0 5%;
	width: 10%;
	float: left;
}

#mw{
	margin: 4% 2% 0 28%;	
	width: 10%;
	float: left;
}

#gs{
	margin: 4% 25% 0 2%;
	width: 13%;
	float: left;
}

footer{
	font-family: "Maiden Orange", serif;
	text-align: center;
	padding: .3125rem .556%; /*5px*/
}

/* Make it look very western and country ( Lots of style :D ) */

@media (max-width: 540px){

	html{
		background-image: none;
		background-color: rgb(117 73 52);
	}
	body{
		box-shadow: none;
		border: none;
	}
	nav{
		width: 100%;
		float: left;
	}
	nav li{
		width: 100%;
	}
	nav ul li a{
		font-size: 70%;
	}
	#cu{
		display: none;
	}
	#mw{
		display: none;
	}
	#gs{
		display: none;
	}
	aside{
		font-size: 70%;
	}
	aside h1{
		font-size: 80%;
	}
	main{
		min-height: 85%;
	}
}