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

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


header {background-color: #461412;
		min-width: 100%;
		display: flex;}

.stupidlink {display: inline;}
	

header img {width: 8%;
			height: 8%;
			padding: 1% 0 1% 22%;}

html, body {height: 20%;}

nav {width: 100%;
	margin: 3% 4%;}

nav li {display: inline-block;
		margin: 0 8%;}

nav a {padding: 10%;
		text-decoration: none;
		color: #f2e4dc;
		font-family: "Raleway", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
		font-size: 1.25em;}

nav a:hover {background-color: #f2e4dc;
			color: #461412;}

#banner {background-image:url("../images/cabinbanner.png");
		height: 440px;}

#title h1 {font-size: 2.5em;
			color: #461412;
  			font-family: "Playfair Display", serif;
  			font-optical-sizing: auto;
  			font-weight:600;
  			font-style: normal;
			text-align: center;
			margin: 3% 0 1%;}

#title h2 {color: #461412;
	font-size: 1.5em;
	font-family: "Raleway", sans-serif;
  	font-optical-sizing: auto;
 	font-weight: 400;
  	font-style: normal;
	text-align: center;
	margin: 0 0 5%;}

#card-box {margin: 0 auto;
			display: flex;}

.photo-card:hover {opacity: 1.0;}

.photo-card	{margin: 0 auto;
			text-align: center;
			font-family: "Goudy Bookletter 1911", serif;
  			font-weight: 400;
  			font-style: normal;
			opacity: .5;
			transition: opacity 2s;}

.photo-card img {border: solid .25em #461412;}

.photo-card h3 {margin: 5%;
				color: #461412;
				font-size: 2em;
  				font-family: "Playfair Display", serif;
  				font-optical-sizing: auto;
  				font-weight:600;
				font-style: normal;}

.photo-card p {margin: auto 0;
				color: #461412;
				font-size: 1.2em;
  				font-family: "Raleway", sans-serif;
  				font-optical-sizing: auto;
  				font-weight: 400;
				font-style: normal;
				line-height: 1.2;
				padding: 0 0 10% 0}


.commentcard {border: solid .25em #461412;
				margin: 3% 20% 3% 20%;
				padding: 4%;
				background-color: #f2e4dc;}

.commentcard h1 {font-size: 2.5em;
				color: #461412;
  				font-family: "Playfair Display", serif;
  				font-optical-sizing: auto;
  				font-weight:600;
  				font-style: normal;
				text-align: center;
				line-height: 1.2;}

.commentcard h3 {margin: 5% 0;
				text-align: center;
				color: #461412;
				font-size: 1.25em;
  				font-family: "Raleway", sans-serif;
  				font-optical-sizing: auto;
  				font-weight: 400;
				font-style: normal;}

.commentcard h3, h1 {margin: 2%;}

.container {display: flex;
			width: 70%;
			margin: 2% auto 4%;
			padding: 0 2%;}

#aboutbox img {float: left;
				margin: 2%;
				border: solid .25em #461412;}

#aboutbox h1 {font-size: 2.5em;
				color: #461412;
  				font-family: "Playfair Display", serif;
  				font-optical-sizing: auto;
  				font-weight:600;
  				font-style: normal;
				padding: 2% 0 0;
				text-align: center;}

#aboutbox p {margin: auto 0;
				color: #461412;
				font-size: 1.2em;
  				font-family: "Raleway", sans-serif;
  				font-optical-sizing: auto;
  				font-weight: 400;
				font-style: normal;
				text-align: center;
				line-height: 1.2;}

p {color: #461412;
	font-size: 1em;
  	font-family: "Raleway", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
	font-style: normal;
	text-align: center;}

.box {margin: 0 auto;
		width: 25%;
		padding: 2%;
		background-color: #f2e4dc;
		font-family: "Raleway", sans-serif;
		text-align: center;}

#boxcontainer {display: flex;
				margin: 2% 0;
				padding: 0 10% 10%;}

#clickp {font-size: .8em;}

footer {background-color: #461412;
		text-align: center;
		padding: 2% 0;
		height: 100%;}

#footer-content {margin: 0 auto;}

#footer-content p {color: #f2e4dc;
					font-size: .8em;}

@media only screen and (max-width: 1024px) {
		
		nav a {display: block;
		font-size: 1em;
		padding: 5px;
		margin: auto 0;}
	
		.stupidlink {margin: 8% 0% 0 0; 
				text-align: center;
		}

	
		header img {margin: .5% -3% 0 0;
					width: 8%;
					height: 8%;
	}
	
		#card-box img {width: 80%;}
		.container {width: 90%}
}

@media only all and ( max-width : 480px ){
	
	nav a {display: block;
		font-size: 1.5em;
		padding: 5px;
		margin: auto 0;}
	
	.stupidlink {margin: 8% 10% 0 0; 
				text-align: center;
	}

	
	header img {margin: 8% -5% ;
				width: 27%;
				height: 20%;
				}
	
	#banner {height: 0px;}
	
	#title h1 {font-size: 2em;
				padding-top: 5%;}
	
	#title h2 {padding: 2% 0;}
	
	#card-box {display: block;}

	.photo-card img {max-width: 60%;}
	
	.photo-card h3 {font-size: 1.75em;
					margin: 3%;}
	
	.photo-card p {margin: 0 0 -3% 0;}
	
	#aboutbox img {float: clear;
		margin: 1% 0 5% 14%;
		max-width: 70%}
	
	.commentcard {margin: 10% 1%;}
	.commentcard h1 {font-size: 1.5em;}
	
	

}