/*
	Garden Care Business Website
	By Joe Brennan, June 2023.
*/

/* Fonts from DaFont.com */
@font-face {
	font-family:	"Serif Extra Bold";
	src:			url(fnt/Neuton-Extrabold.ttf);
}
@font-face {
	font-family:	"Serif Bold";
	src:			url(fnt/Neuton-Bold.ttf);
} 
@font-face {
	font-family:	"Serif Extra Light";
	src:			url(fnt/Neuton-Extralight.ttf);
}

/* Defaults */
* {
	font-family:	"Serif Extra Light";
	margin:			0;
	padding:		0;
}

/* Main Layout */
body {
	padding:		30px;
}

.page {
	margin:			10px auto 20px auto;
	padding:		20px 20px 20px 20px;
}
@media screen and (max-width: 600px) {
	.page { padding: 20px 0px; }
}
.page p {
	margin:			0px 0px 20px 20px;
	font-size:		14pt;
	text-align:		justify;
}
.page h2 {
	margin:			0px auto 20px 0px;
	font-family:	"Serif Bold";
    font-size:		20pt;
}

/* Header */
#header h1 {
	margin:			0px auto;
	font-family:	"Serif Extra Bold";
	text-align:		center;
    font-size:		70pt;
	font-weight:	bold;
}
#header p {
	margin:			0px auto;
	text-align:		center;
    font-size:		14pt;
}
#header img {
	/* https://www.webweaver.nu/clipart/flowers-dividers.shtml */
	display:		block;
	width:			579px;
	margin:			40px auto 40px auto;
}
@media screen and (max-width: 600px) {
	#header img {
		width:				100%;
	}
}

#navigation {
	text-align:		center;
	margin:			40px;
}
#navigation li {
	display:		inline-block;
	margin:			10px;
}

/* Portfolio */
#portfolio { text-align: center; }
#portfolio h2 { text-align: left; }
#portfolio img {
	border:			1px solid black;
	box-shadow:		3px 3px 3px lightgray;
	padding:		4px;
	max-width:		200px;
	max-height:		210px;
}
#portfolio div {
	display:		inline-block;
	vertical-align: top;
	margin:			10px;
}

/* Services */
@media screen and (min-width: 800px) {
	#services dl {
		columns:			2;
	}
}
@media screen and (min-width: 1200px) {
	#services dl {
		columns:			3;
	}
}

#services dt {
	font-family:	"Serif Bold";
	font-weight:	bold;
    font-size:		14pt;
	margin:			0px 0px 5px 10px;
}
#services dd {
    font-size:		14pt;
	text-align:		justify;
	margin:			0px 0px 30px 20px;
}

/* Quote */
#quote label {
	font-family:	"Serif Bold";
	font-size:		14pt;
	display:		block;
	text-align:		right;
	float:			left;
	width:			200px;
	padding:		0px 5px 5px 0px;
	margin:			5px 0;
}
#quote input {
	font-family:	"fixed";
	font-size:		12pt;
	width:			350px;
	margin:			5px 0;
	padding:		5px;
}
#quote textarea {
	font-family:	"fixed";
	font-size:		12pt;
	box-sizing:		border-box;
	width:			350px;
	height:			100px;
	margin:			5px 0;
	resize:			none;
	padding:		5px;
}
#quote button {
	margin:			5px auto 10px 205px;
}
@media screen and (max-width: 800px) {
	#quote label {
		text-align:			left;
		width:				100%;
	}
	#quote input, #quote textarea {
		width:				100%;
		max-width:			350px;
	}
	#quote button {
		margin:				5px auto 10px 0px;
	}
}