@import url('animation.css');
@import url('color.css');
@import url('components.css');
@import url('font.css');
@import url('forms.css');
@import url('nav.css');

:root {
	--fast: 100ms;
	--medium: 300ms;
	--slow: 500ms;
}

main {
	min-height: 75vh;
}

#body-container{
	margin-bottom: 2rem;
}

@media screen and (min-width: 300px) and (max-width: 500px) {
	body {
		grid-template-columns: 0 repeat(2, 1fr) 0;
		grid-template-rows: clamp(56px,19vh,95px) 1fr clamp(56px,19vh,95px);
		grid-gap: clamp(9px,3vw,15px);
		grid-template-areas:
			"header header header header"
			"main main main main"
			"footer footer footer footer";
	}
	main, header {
		margin: 0;
		padding: 16px;
		border-radius: 0;
	}
	.nav-logo {
		height: clamp(50px, 17vh, 90px);
	}
	.social-icons > a > img {
		height: clamp(25px, 8.5vh, 45px);
	}
}

@media screen and (min-width: 501px) and (max-width: 1000px) {
	body {
		grid-template-columns: 0 repeat(6, 1fr) 0;
		grid-template-rows: clamp(95px,19vh,190px) 1fr clamp(95px,19vh,190px);
		grid-gap: clamp(15px,3vw,30px);
		grid-template-areas:
			"header header header header header header header header"
			"main main main main main main main main"
			"footer footer footer footer footer footer footer footer";
	}
	main, header {
		margin: 0 clamp(15px, 3vw, 30px);
		padding: clamp(15px, 3vw, 30px);
		border-radius: clamp(5px, 1vw, 10px);
	}
	.nav-logo {
		height: clamp(50px, 17vh, 90px);
	}
	.social-icons > a > img {
		height: clamp(25px, 8.5vh, 45px);
	}
}

@media screen and (min-width: 1001px) and (max-width: 1500px) {
	body {
		grid-template-columns:0 repeat(10, 1fr) 0;
		grid-template-rows: clamp(150px,15vh,225px) 1fr clamp(150px,15vh,225px);
		grid-gap: clamp(15px,3vw,30px);
		grid-template-areas:
			"header header header header header header header header header header header header"
			"main main main main main main main main main main main main"
			"footer footer footer footer footer footer footer footer footer footer footer footer";
	}
	main, header {
		margin: 0 clamp(8px, 5vw, 1000px);
		padding: 16px;
		border-radius: 10px;
	}
	.nav-logo {
		height: clamp(50px, 17vh, 90px);
	}
	.social-icons > a > img {
		height: clamp(25px, 8.5vh, 45px);
	}
}

@media screen and (min-width: 1501px) {
	body {
		grid-template-columns: 0 repeat(10, 1fr) 0;
		grid-template-rows: clamp(95px,19vh,190px) 1fr clamp(95px,19vh,190px);
		grid-gap: clamp(15px,3vw,30px);
		grid-template-areas:
			"header header header header header header header header header header header header"
			"main main main main main main main main main main main main"
			"footer footer footer footer footer footer footer footer footer footer footer footer";
	}
	main, header {
		margin: 0 clamp(8px, 5vw, 1000px);
		padding: 16px;
		border-radius: 10px;
	}
	.nav-logo {
		height: clamp(50px, 17vh, 90px);
	}
	.social-icons {
		height: clamp(25px, 8.5vh, 45px);
	}
}

// Color Printing
@media print {
	body {
		grid-template-columns: 0 100% 0;
		grid-template-rows: 0 1fr 50px;
		grid-template-areas:
			"header header header header"
			"main main main main"
			"footer footer footer footer";
	}
	header {
		display: none;
	}
	main {
		background-color: white;
	}
	footer {
		display: flex;
		width: 100%;
		background-color: white;
		> #footer-logo {
			width: 100%;
			display: flex;
			flex-direction: row-reverse;
		}
		> #nav-footer {
			display: none;
		}
		> #nav-socials-container {
			display: none;
		}
		.nav-logo {
			height: 50px;
			width: 50px;
		}
	}
}