:root {
	--brand: 			rgba(190, 146, 47, 1);
	--brand-alt: 		rgba(190, 146, 47, 0.5);
	--fground: 			rgba(40, 50, 70, 1);
	--mground:			rgba(240, 230, 210, 1);
	--bground: 			rgba(255, 255, 255, 1);
	--wide:				144rem;
	--medium:			96rem;
	--narrow:			64rem;
	--fade:				all 0.5s ease; 
	--text:				"League Spartan", sans-serif;
	--title:			"League Spartan", sans-serif;
	}

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; }
body { min-height: 100vh; background-color: var(--bground); color: var(--fground); font-size: 1.8rem; line-height: 1.25; font-family: var(--text); font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; }

a { color: var(--brand); text-decoration: none; transition: var(--fade); }
a:focus, a:hover, a:active { color: var(--fground); transition: var(--fade); }
a.button { padding: .5rem 2rem;; border-radius: 1rem; background-color: var(--brand); color: var(--fground); display: inline-block; text-transform: uppercase; font-weight: bold; }
a.button:focus, a.button:hover, a.button:active { background-color: var(--fground); color: var(--brand); text-decoration: none; }

strong { font-weight: bold; }

img { width: 100%; height: auto; display: block; }

p { padding-bottom: 2rem; }

ul { list-style: none; padding-bottom: 1rem; }
menu { list-style: none; }
li { list-style: none; }

select, textarea, input, button { font-family: inherit; background: var(--bground); font-size: 2rem; width: 100%; padding: 1rem; margin-bottom: 1rem; border-radius: 1rem; }

h1, h2, h3, h4, h5, h6 { font-family: var(--title); font-weight: bold; text-align: center; }
h1 { font-size: 3rem; }
h2 { font-size: 3rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2rem; }




header { 
	height: 100vh; max-width: 100vw; padding: 2rem; 
	
	div { 
		background: url('bg-home.jpg') no-repeat center center; background-size: cover; display: grid; align-items: center; border-radius: 2rem; height: 100%; 
		
		hgroup { 
			display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; 
			
			h1 {
				
				img {
					background: var(--bground); width: 24rem; height: auto; padding: 1rem; border-radius: 0 0 2rem 2rem;
				}
			}
			p {
				font-size: 2.4rem; padding: 2rem; background: var(--bground); border-radius:  2rem 2rem 0 0;
			}
		}
	}
}

section { 
	min-height: 100vh; max-width: 100vw; padding: 2rem; display: grid; align-items: center; 
	
	div { 
		display: grid; align-items: center; border-radius: 2rem; height: 100%; padding: 2rem;
	}
}

#intro {
	div {
		background: var(--fground); color: var(--bground);
		ul {
			display: flex; flex-direction: column; align-items: center; gap: 5vh; padding: 4rem; width: 100%;
			
			li {
				width: 100%;
				h3 {
					
				}
				p {
				}
				
			}
		}
	}
}

#services {
	div {
		background: var(--brand); color: var(--bground); 
		
		ul {
			display: flex; flex-direction: column; gap: 2rem;
			
			li {
				border-radius: 2rem; border: 1px solid var(--fground); padding: 2rem; 
				
				hgroup {
					margin-bottom: 2rem;
					
					h3 {
						text-align: left; 
					}
					p {
						text-align: right; font-style: italic;
					}
				}
				p {
					text-align: justify; padding-bottom: 0;
				}
			}
		}
	}
}

@media screen and (min-width: 960px) {
	header {
		div {
			hgroup {
				flex-direction: row;
				h1 {
					img {
						border-radius: 0 2rem 2rem 0;
					}
				}
				p {
					border-radius:  2rem 0 0 2rem;
				}
			}
		}
	}
	
	#services {
		div {
			ul {
				flex-direction: row; 
				li {
					width: 33.33%; 
				}
			}
		}
	}
}