@font-face {
	font-family: Simplicity-medium;
	src: url(fonts/simplicity.ttf);
	font-weight: normal;
}
@font-face {
	font-family: Roboto-light;
	src: url(fonts/Roboto-Light.ttf);
}
@font-face {
	font-family: Roboto-regular;
	src: url(fonts/Roboto-Regular.ttf);
}
@font-face {
	font-family: Roboto-medium;
	src: url(fonts/Roboto-Medium.ttf);
	font-weight: normal;
}
@font-face {
	font-family: Roboto-bold;
	src: url(fonts/Roboto-Bold.ttf);
}
@font-face {
	font-family: Roboto-black;
	src: url(fonts/Roboto-Black.ttf);
}

:root {
	--lighter-pink: rgb(233, 114, 129);
	--light-pink: rgb(254,110,255);
	--pink: rgb(254, 110, 255);
	--dark-pink: rgb(175, 86, 97);
	--lighter-blue: rgb(141,212,243);
	--light-blue:rgb(35, 147, 231);
	--blue: rgb(74,128,240);
	--darkish-blue: rgb(71, 110, 133);
	--dark-blue: rgb(1,46,106);
	--darker-blue: rgb(15,65,96);
	--darkest-blue: rgb(7, 30, 56);
	--sunny-light: rgb(255, 252, 192);

	--seethrough-black-some:rgba(0,0,0,.2);
	--seethrough-black-half: rgba(0,0,0,.5);
	--seethrough-white-mostly: rgba(255, 255, 255, .75);

	--primary-text: var(--dark-pink);
	--primary-text-reversed: white;
	--secondary-text: var(--lighter-pink);
	--secondary-text-reversed: var(white);
}

html, body {
	margin:0;
	padding:0;
	min-width:100%;
	width:100%;
	overflow-x:hidden;
	font-family: Roboto-light;
}

body {
	flex-shrink: auto;
	font-size:18px;
	color: var(--primary-text);
	background-repeat:no-repeat;
	text-align: center;

	> header {
		display:flex;
		flex-direction: column;
		align-items: center;
		height:800px;
		padding-bottom:2rem;
		margin-bottom:5rem;
		background: linear-gradient(var(--blue), var(--lighter-blue));
		border-image-source: url("images/grass background.png");
		border-image-slice: 0 0 240 0;
		border-image-width: 0 0 150px 0;
		border-image-repeat: round stretch;
		border-image-outset: 10px;

		hgroup {
			color: var(--sunny-light);
			padding-top:3.75rem;
			padding-bottom:1rem;

			h1, img {
				margin:0;padding:0;
				max-width:100%;
			}

			p {
				text-align: center;
				width:100%;
				font-family: Simplicity-medium;
				font-size: 65px;
				margin-block-start: 0.9rem;
				margin-block-end: 0.9rem;
			}
		}
	}
}

nav {
	display:flex;
	gap: 1em;
	flex-direction:row;
	flex-shrink: 1;
	height:14.5rem;
	width:100%;

	a {
		font-family: Simplicity-medium;
		font-size: 29px;
		display:inline-flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		width:100%;
		color: var(--light-blue);
		background-color: var(--sunny-light);
		text-decoration: none;
		padding:1rem;
		border-radius:1.5rem;
		box-shadow: 0 0 0.2rem 0.2rem var(--seethrough-black-some);

		background-position:center 30%;
		background-origin: border-box;
		background-repeat: no-repeat;
		background-size: auto 85px;
	}
	a[href='#about'] { background-image: url('images/about.png'); }
	a[href='#demos'] { background-image: url('images/demos.png'); }
	a[href='#contact'] { background-image: url('images/contact.png'); }
	a[href='#testimonials'] { background-image: url('images/testimonials.png'); }
}


main {
	display:flex;
	flex-direction: column;
}

header, section {
	padding:1em 13.5rem;
}

section {
	padding-top:4em;
	padding-bottom:5em;

	> h2, > header h2 {
		font-size:46px;
		font-family: Roboto-medium;
		font-weight: 500;
		color: var(--secondary-text);
		margin:0;
		padding:0;
		margin-bottom:-0.25em;
	}

	p {
		line-height: 1.5em;
	}
}

#about {
	text-align: center;
	background-image:url('images/Clarice in Pink Circle.png');
	background-repeat: no-repeat;
	background-size: max(25%, 25%);
	background-position-x:19.5%;
	background-position-y: center;
	background-clip:padding-box;

	padding-left:44%;
	padding-right:14%;

	:is(h2,p) {
		background-color: var(--seethrough-white-mostly);
		border-radius: 1em;
	}

	p {
		padding:.5em;
	}
}

#demos::before {
	margin-top:1em;
	margin-bottom:0.5em;
	content: '';
	display:block;
	height:100px;
	background-image: url('images/demos-overlay.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
	grid-area: icon;
}
#demos {
	padding:110px 1rem calc(3rem + 143px) 1rem;
	color: var(--primary-text-reversed);
	background-color: transparent;
	background-image:
		url('images/demos-bg-overlay.png'),
		url('images/demos-top-border-bg.png'),
		linear-gradient(var(--light-pink),var(--light-pink));
	background-size:
		190px 190px,
		100% 110px,
		100% calc(100% - 110px);
	background-repeat:
		repeat,
		no-repeat,
		no-repeat;
	background-position-y:0,0,110px;

	display:grid;

	grid-template-areas:
		'icon icon'
		'h2 h2'
		'Anim Comm'
		'hanim hcomm';
	grid-column-gap:10%;

	justify-content: center;
	align-items: center;

	border-image-source: url("images/testimonials-top-border-bg.png");
	border-image-slice: 0 0 143 0;
	border-image-width: 0 0 143px 0;
	border-image-repeat: stretch;
	border-image-outset: 0 0 0 0;
	h2 {
		font-size: 54px;
		color: var(--secondary-text-reversed);
		grid-area: h2;
	}
	audio {
		padding: 5rem 0 0.5rem 0;
	}
	h3:first-of-type {
		grid-area: hanim;
	}
	h3:last-of-type {
		grid-area: hcomm;
	}
	audio:first-of-type {
		grid-area: Anim;
	}
	audio:last-of-type {
		grid-area: Comm;
	}
}

#testimonials  {
	display: grid;
	grid-template-areas:
		'h h h'
	;
	grid-gap:1em;
	grid-template-columns:1fr 1fr 1fr;
	padding-top:4em;
	padding-bottom:0;
	background-color: var(--dark-blue);
	z-index: 3;

	* {
		margin: 0;
		padding:0;
	}
	> header {
		grid-area:h;

		h2::before {
			content:'';
			display:block;
			height:130px;
			margin:0.25rem;
			background-image: url('images/testimonials-overlay.png');
			background-position:center center;
			background-repeat: no-repeat;
			background-size: contain;
			background-clip: content-box;
			margin-top:-70px;
		}
		h2 {
			font-size: 54px;
			grid-area: h;
			color: var(--pink);
		}

		p {
			color: white;
			font-family: Simplicity-medium;
			font-size: 43px;
			font-weight: 400;
			padding:0.5em;
			padding-top:0.25em;
			margin-bottom:0.5em;
			background-image: url('images/testimonials-tag-bg.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: auto;
		}
	}

	article {
		margin:0 0.5em;
		background-color: white;
		display: flex;
		flex-direction:column;
		margin-bottom:-1em;

		h3 {
			content-visibility: hidden;
		}

		figure {
			display:flex;
			justify-content: center;
			align-items: center;
			height:225px;
			width:100%;
			color: lightgray;
			background-color: gray;
			border-bottom:1.1em solid var(--darker-blue);

			img {
				height:100%;
				width:100%;
				object-fit: cover;
				object-position: 0 top;
			}
		}

		:is(blockquote, address){
			text-align: left;
			padding:2em;
		}

		blockquote {
			display:flex;
			flex-grow:1;
			font-size: 16px;
			margin-top:0.5em;
			line-height: 1.25em;
		}

		address {
			font-style: normal;
			height:3em;

			a {
				text-decoration: 0.5px var(--light-blue) underline;
			}

			:is(p:first-child) {
				color: var(--dark-blue);
				font-family: Roboto-black;
				font-size: 16px;
				font-weight:bold;
				padding-bottom:0.2em;
			}

			:is(p:not(:first-child)) {
				font-family: Roboto-light;
				text-transform: uppercase;
				font-weight: bold;
				line-height: 1em;
				color: var(--darkish-blue);
				letter-spacing: 2px;
				font-size:12px;
			}
		}
	}
}

#contact, #socials {
	margin-bottom:0;
	padding-bottom:0;
}

#contact, #contact * {
	background-color: var(--darkest-blue);
	font-family: Simplicity-medium;
	font-weight:400;
	font-size:34px;
	color:white;
}
#contact {
	background-image:url('images/Clarice Outside.png');
	background-repeat: no-repeat;
	background-size: max(35%, 35%);
	background-position-x: 15%;
	background-position-y: 60%;
	background-clip:padding-box;
	padding-left:50%;
	margin-top:0;
	padding-top:2em;

	:is(h2, form) {
		width:100%
	}

	h2::before {
		content:'';
		display:block;
		height:130px;
		margin-bottom:2.5rem;
		background-image: url('images/contact-overlay.png');
		background-position:center center;
		background-repeat: no-repeat;
		background-size: contain;
		background-clip: content-box;
	}

	form {
		text-align: left;

		* {
			font-family: Quicksand;
			width:100%;
			border: none;
			margin-top:1em;
			padding:0 1em;
		}

		*::placeholder {
			color:white;
		}

		*:not(button, fieldset) {
			border-bottom: 1px solid white;
		}

		button {
			border:none;
			background-color: white;
			color: var(--darkest-blue);
			padding:0.75em 1.5em;
			font-size:16px;
			text-transform: uppercase;
			font-weight: bold;
			width:auto;
		}
	}
}

footer {
	color:white;
	background-color: var(--darkest-blue);
	font-family: Quicksand;
	font-weight: 700;
	font-size: 25px;
	padding-bottom:4em;
}

#socials h2,
fieldset legend {
	display:none;
}

@media (max-width:900px) {
	nav {
		flex-direction: column;

		a {
			background-image: none !important;
		}
	}
	#demos {
		grid-template-areas: 'icon' 'h2' 'Anim' 'hanim' 'Comm' 'hcomm';
	}
	#testimonials {
		display:block;
		padding-inline:auto;
		margin-inline:auto;

		* {
			margin:2rem 0;
		}
	}
}
@media (max-width:600px) {
	header, section, #about{
		padding-left:1em;
		padding-right:3em;
	}
	#about {
		background-image: none;
	}
}