:root {
	--clr-dark-05:  rgba(0,0,0,.05);
	--clr-dark-10:  rgba(0,0,0,.1);
	--clr-dark-15:  rgba(0,0,0,.15);
	--clr-dark-20:  rgba(0,0,0,.2);
	--clr-dark-30:  rgba(0,0,0,.3);
	--clr-dark-40:  rgba(0,0,0,.4);
	--clr-dark-50:  rgba(0,0,0,.5);
	--clr-dark-60:  rgba(0,0,0,.6);
	--clr-dark-70:  rgba(0,0,0,.7);
	--clr-dark-80:  rgba(0,0,0,.8);
	--clr-dark-90:  rgba(0,0,0,.9);
	--clr-dark-100: rgba(0,0,0,1);

	--clr-light-05:  rgba(255,255,255,.05);
	--clr-light-10:  rgba(255,255,255,.1);
	--clr-light-20:  rgba(255,255,255,.2);
	--clr-light-30:  rgba(255,255,255,.3);
	--clr-light-40:  rgba(255,255,255,.4);
	--clr-light-50:  rgba(255,255,255,.5);
	--clr-light-60:  rgba(255,255,255,.6);
	--clr-light-70:  rgba(255,255,255,.7);
	--clr-light-80:  rgba(255,255,255,.8);
	--clr-light-90:  rgba(255,255,255,.9);
	--clr-light-100: rgba(255,255,255,1);

	--clr-bg-main: rgba(43, 41, 119, 1);
	
	--heading-text-shadow: rgba(0,0,0,.2) 0 0 1rem;

	/* test colors, start */
	--color-brand:#FF757D;
	--color-gray:#9E9CE1;
	--color-white:#F8F1EA;
	--color-black:#232259;
	--color-dark-black:#191A22;
	--color-light-black:#242367;
	--color-lighter-black:#292768;
	--color-primary:#FF757D;
	--color-secondary:#2B2977;
	--color-heading:#F8F1EA;
	--color-text:#9E9CE1;
	--color-border:#FF757D;
	--color-button:#F8F1EA;
	--color-line:#9E9CE1;
	--color-link:#FF757D;
	/* test colors, stop */

	background-color: var(--clr-dark-80);
	/* background-image: url(/assets/grain.svg); */
	color: var(--clr-light-100);
	font-family: "Inter", sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
	text-wrap: balance;

	@supports (font-variation-settings: normal) {
		:root {
			font-family: InterVariable, sans-serif;
		}
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	position: relative;
}

@font-face {
	font-family: 'Inter';
	src:
		local('Inter Medium'),
		local('Inter-Medium'),
		url('assets/fonts/Inter/subset-Inter-Medium.woff2') format('woff2'),
		url('assets/fonts/Inter/subset-Inter-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'InterVariable';
	src:
		local('Inter Variable'),
		local('InterVariable'),
		url('assets/fonts/Inter/subset-InterVariable.woff2') format('woff2'),
		url('assets/fonts/Inter/subset-InterVariable.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


a {
	color: currentColor;
	text-decoration: underline;
}

h1 {
	font-size: clamp(1.5rem, 10vw, 3rem);
	font-weight: 600;
	line-height: 1;
	opacity: 1;
}

p {
	font-size: clamp(1rem, 2vw, .875rem);
	font-weight: 200;
	opacity: .75;
	text-wrap: balance;
}

.wrapper {
	background-color: var(--clr-dark-50);
	display: grid;
	grid-template-rows: repeat(2,1fr);
	flex-direction: row;
	height: 100vh;
	width: 100vw;

	@media (orientation: landscape) {
		grid-template-rows: unset;
		grid-template-columns: repeat(2,1fr);
	}
}

main {
	background-color: var(--clr-bg-main);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	justify-content: end;
	padding: 4vw;
	padding: clamp(2rem, 4vw, 6rem);

	div {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
}

.poster {
	padding: 4vw;
}