@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@700&family=Zen+Kurenaido&display=swap') ;

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

html {
	--bg-color: black ;
	--text-color: white ;
	--text-title-family: 'Dongle', sans-serif ;
	--text-footer-family: 'Zen Kurenaido', sans-serif ;
	scroll-snap-type: y mandatory ;
}

.overlay {
	min-height: 100vh ;
	min-width: 100vw ;
	overflow: hidden ;
	background-color: var(--bg-color) ;
	margin: 0 ;
	display: grid ;
	justify-content: center ;
	align-content: center ;
	transform: scale(1) ;
	opacity: 1 ;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out ;
	position: fixed ;
	inset: 0 ;
	z-index: 999 ;
}

.hide {
	transform: scale(2) ;
	opacity: 0 ;
}

img.logo {
	width: 20em ;
}

nav {
	position: fixed ;
	z-index: 3 ;
	top: 0 ;
	right: 0 ;
	width: 7em ;
	height: 3em ;
	display: flex ;
	justify-content: flex-end ;
	gap: 1em ;
	margin: 1em ;
}

nav button {
	background-color: inherit ;
	color: var(--text-color) ;
	border: none ;
	cursor: pointer ;
	padding: 0 ;
	height: 3em ;
	width: 3em ;
}

main {
	background: var(--bg-color) ;
	color: var(--text-color) ;
	display: flex ;
	flex-direction: column ;
}

.card {
	background: inherit ;
	height: 100vh ;
	width: 100vw ;
	position: relative ;
	overflow: hidden ;
	scroll-snap-align: start ;
	scroll-snap-stop: always ;
	display: grid ;
	justify-content: center ;
	align-content: center ;
}

.card video {
	position: absolute ;
	top: 0 ;
	bottom: 0 ;
	left: 50% ;
	right: -50% ;
	transform: translateX(-50%) ;
	height: 100vh ;
	width: 100vw ;
	overflow: hidden ;
	object-fit: cover ;
	z-index: 1 ;
}

.text-content {
	position: absolute ;
	inset: 0 ;
	background-color: rgba(0, 0, 0, .5) ;
	display: grid ;
	grid-template-columns: 1fr 1fr ;
	align-content: center ;
	gap: 1em ;
	z-index: 2 ;
}

.card h1 {
	font-family: var(--text-title-family) ;
	font-size: 5em ;
	text-align: center ;
}

.card p {
	font-family: var(--text-footer-family) ;
	font-size: 1em ;
	text-align: center ;
	padding: 0 25% ;
	margin: auto 0 ;
}

#contact {
	text-align: center ;
	font-family: var(--text-title-family) ;
	font-size: 2em ;
}

#contact a {
	color: var(--text-color) ;
	font-family: inherit ;
	text-decoration: none ;
}

footer {
	font-family: var(--text-footer-family) ;
	font-size: 0.65em ;
	color: var(--text-color) ;
	background-color: var(--bg-color) ;
	width: 100% ;
	text-align: center ;
	padding: 1em ;
}

footer a {
	color: inherit ;
	text-decoration: none ;
}

@media only screen and (max-width: 768px) {
	.text-content {
		grid-template-columns: 1fr ;
	}

	.card p {
		margin: 0 ;
	}
}