@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap");

:root {
	/* Font sizes
	 * 975px -> 14px to 1280px -> 18px
	 */
	--fontsize-small: clamp(11px, 1.4098px + 0.9836vw, 14px);
	--fontsize-base: clamp(14px, 1.2131px + 1.3115vw, 18px);
	--fontsize-large: clamp(21px, 1.8197px + 1.9672vw, 27px);
	--fontsize-xlarge: clamp(28px, 2.4262px + 2.623vw, 36px);

	/* Spaces
	 * 975px -> 30px to 1280px -> 50px
	 */
	--layout-spacing: clamp(30px, -33.9344px + 6.5574vw, 50px);

	/*
	 * Colors
	 */
	--color-accent: #5488e7;
	--color-accent-dark: #632fd3;
	--color-font: #545454;
	--color-font-light: #aaaaaa;
	--color-border: #efefef;
	--color-background: #fafafa;
	--color-shadow: #dbdbdb;
}

* {
	margin: 0;
	padding: 0;
	color: var(--color-font);
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: var(--fontsize-base);
	letter-spacing: 1px;
	line-height: 180%;
}

html {
	background-color: #ffffff;
}

h1 {
	padding: 0 0 calc(var(--layout-spacing) / 2) 0;
	color: var(--color-accent);
	text-transform: uppercase;
	font-size: var(--fontsize-large);
	font-weight: 500;
}

h2 {
	padding: 0 0 calc(var(--layout-spacing) / 2) 0;
	color: var(--color-accent);
	text-transform: uppercase;
	font-size: var(--fontsize-large);
	font-weight: 500;
}

h3 {
	padding: 0 0 calc(var(--layout-spacing) / 2) 0;
	color: var(--color-font-light);
	text-transform: uppercase;
	font-size: var(--fontsize-small);
	font-weight: 300;
}

a,
a:link,
a:visited,
a:hover,
a:active {
	color: var(--color-accent);
	text-decoration: none;
}

.content-box {
	width: 1280px;
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 1330px) {
	.content-box {
		width: auto;
		padding: 0 calc(var(--layout-spacing) / 2);
	}
}

@media screen and (max-width: 975px) {
	:root {
		/* Font sizes
	 	 * 480px -> 14px to 975px -> 18px
		 */
		--fontsize-small: clamp(11px, 8.0909px + 0.6061vw, 14px);
		--fontsize-base: clamp(14px, 10.1212px + 0.8081vw, 18px);
		--fontsize-large: clamp(21px, 15.1818px + 1.2121vw, 27px);
		--fontsize-xlarge: clamp(28px, 20.2424px + 1.6162vw, 36px);

		/* Spaces
		 * 480px -> 30px to 975px -> 50px
		 */
		--layout-spacing: clamp(30px, 10.6061px + 4.0404vw, 50px);
	}
	.modal {
		width: 98%;
		max-width: 98%;
		padding: 0;
	}
}