@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;
}

#toastContainer {
	position: fixed;
	pointer-events: none;
	height: 100%;
	z-index: 19;
	overflow: hidden;
}

#modalContainer{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

body {
	display: grid;
	justify-content: stretch;
}

header {grid-area: header;}
main {grid-area: main;}
footer {grid-area: footer;}
#left-nav {grid-area: leftnav;}
#right-nav {grid-area: rightnav;}

@media screen and (max-width: 300px) {
	body {
		grid-template-columns: 0 repeat(2, 1fr) 0;
		grid-template-rows: 50px 1fr 50px;
		gap: 8px;
		grid-template-areas:
			"leftnav header header rightnav"
			"leftnav main main rightnav"
			"leftnav footer footer rightnav";
	}
	main, header, footer {
		margin: 0;
		padding: 2px;
		border-radius: 0;
	}
	footer {
		column-gap: 8px;
		grid-column: 1/5;
	}
	.nav-logo {
		height: 50px;
	}
	.icons {
		height: 25px;
	}

}

@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 auto;
		gap: clamp(9px,3vw,15px);
		grid-template-areas:
		"leftnav header header rightnav"
		"leftnav main main rightnav"
		"leftnav footer footer rightnav";
	}
	main, header, footer {
		padding: 16px;
	}
	main, header {
		margin: 0;
		border-radius: 0;
	}
	footer {
		column-gap: clamp(9px,3vw,15px);
		grid-column: 1/5;
	}
	.nav-logo {
		height: clamp(50px, 17vh, 90px);
	}
	.icons {
		height: clamp(25px, 8.5vh, 45px);
	}
}

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

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

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

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

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