@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap);

* {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
	padding: 0;
	text-decoration: none;
	transition: 0.3s ease-in-out;
}

h1,
h2,
h3 {
	font-weight: 800;
	line-height: 1;
	margin-bottom: 1em;
	color: var(--highlight-color);
	font-family: "Anton", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

main {
	margin: 25px 0;
}

a {
	color: var(--highlight-color);
}

section:not(:first-child),
footer {
	content-visability: auto;
	contain-intrinsic-size: 1000px;
}

::before,
::after {
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}
::before {
	position: absolute;
}
::after {
	position: relative;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	left: -1000px;
	opacity: 0.01;
}

.mirror {
	transform: rotateY(180deg);
}

.text-align_right {
	text-align: right;
}

.display_block {
	display: block;
	margin-bottom: 15px;
}

.highlight_color {
	color: var(--highlight-color);
}
/*
# BODY
*/

body {
	--highlight-color: #1F4172;
	--text-color: white;
	--background-color: #1e1f26;
	--stripe-pattern: repeating-linear-gradient(
		45deg,
		var(--highlight-color) 0px,
		var(--highlight-color) 40px,
		var(--background-color) 40px,
		var(--background-color) 80px
	);

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--background-color);
	max-width: 1400px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0 30px;
	overflow-x: hidden;
	font-family: monospace, sans-serif;
	font-size: 21px;
	line-height: 1.5;
	color: var(--text-color);
	letter-spacing: 1px;
}

/*
# HEADER AND FOOTER 
*/

header,
footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

header {
	margin-top: 15px;
	padding-top: 15px;
	position: sticky;
	top: 0;
	z-index: 10;
}
header::before {
	content: "";
	background: linear-gradient(
		180deg,
		var(--background-color) 70%,
		transparent 100%
	);
	height: 145%;
}

footer {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 30px 0;
	gap: 20px;
}

/*
# Navigation Menu
*/

nav {
	margin-left: auto;
}

nav a {
	color: var(--text-color);
}

ul {
	display: flex;
	flex-wrap: wrap;
}

li,
#menu_links {
	margin: 0 5px;
	padding: 10px 15px;
}

#menu_links:hover {
	color: var(--highlight-color);
}

/*
# LOGO
*/

.logo_div {
	font-weight: 800;
	font-size: clamp(25px, 3.5vw, 35px);
	color: var(--text-color);
	margin: 0 50px 0 0;
}

.logo_div svg {
	display: inline-block;
	width: 1em;
	height: auto;
	margin: 0 -12px -5px 0;
	transform: rotate(-54deg);
}

.dr_txt {
	margin: 0 5px 0 20px;
}

.logo_link {
	color: var(--text-color);
}

/*
# HERO SECTION
*/

.section-grid {
	display: grid;
	grid-template-rows: min-content 1fr;
	grid-column-gap: 20px;
	margin-bottom: 100px;
}

.hero_grid {
	grid-template-columns: 1fr 1fr 4fr;
	align-itmes: start;
	margin-bottom: 20vh;
}

.title {
	font-size: clamp(66px, 8vw, 90px);
	z-index: 1;
	margin-top: 40px;
}

.hero_title {
	grid-column: 1/4;
	grid-row: 1/2;
}

.hero_desc {
	grid-column: 2/3;
	grid-row: 2/3;
	margin-left: -50px;
}

.hero_img-div {
	grid-column: 3/4;
	grid-row: 1/3;
	margin-top: 80px;
}

.image {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.img-caption {
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	z-index: 1;
	opacity: 0.7;
}

/*
# ABOUT
*/

.about_grid {
	grid-template-columns: 1fr 2fr;
}

.about_title {
	grid-column: 2;
	grid-row: 1;
	transform: translateX(-9%);
}

.about_desc {
	grid-column: 2;
	grid-row: 2;
	padding-left: 100px;
}

.about_img-div {
	grid-column: 1;
	grid-row: span 2;
}

/*
# LIFE
*/

.life_grid {
	grid-template-columns: 1fr 2fr;
	grid-template-rows:
		repeat(2, minmax(400px, 40vh))
		repeat(14, minmax(750px, 70vh))
		repeat(2, minmax(1000px, 100vh));
}

.life_title {
	grid-column: 2;
	grid-row: 1/2;
	align-self: end;
	position: sticky;
	top: 150px;
	z-index: 5;
}

.life_img-div {
	grid-column: 1;
	grid-row: 3/15;
	align-self: start;
	position: sticky;
	top: 100px;
}

#image_three {
	max-height: 75vh;
	object-fit: contain;
}
.life_mask-div {
	content: "";
	grid-column: 2;
	grid-row: 1/2;
	align-self: start;
	height: 100vh;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 3;
	background: linear-gradient(
		180deg,
		var(--background-color) 160px,
		rgba(30, 31, 38, 0.5) 240px,
		transparent 280px
	);
}

.tile_div {
	grid-column: 2;
	align-self: end;
	padding-left: 100px;
}

#tile14 {
	align-self: center;
}

#tile16 {
	position: sticky;
	z-index: 8;
	top: 30vh;
}

#tile17 {
	position: relative;
	z-index: 9;
	padding-bottom: 15vh;
}

#tile16::before,
#tile17::before {
	content: "";
	background: linear-gradient(
		0deg,
		var(--background-color) 50%,
		rgba(30, 31, 38, 0) 100%
	);
	z-index: -1;
	height: 100vh;
	top: initial;
}

.tile_title {
	font-size: 90px;
	opacity: 0.5;
	margin-bottom: -30px;
	margin-left: -50px;
	color: rgba(255, 255, 255, 0.15);
}

.tile_desc {
	max-width: 50ch;
	margin-left: 15px;
}

/*
# QUIZ
*/

#quiz {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 20vh 0;
	align-content: start;
	grid-gap: 50px;
}

.quiz_title,
.quiz_desc {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	position: sticky;
}

.quiz_title {
	top: 150px;
}
.quiz_desc {
	grid-row: 2;
	max-width: 455px;
	top: 320px;
}

/*
# FORM STYLING
*/

#survey-form {
	--field-bg: #2e3038;
	--border: 1px solid #52545b;
	--border-focus: #d3d3d3;
	grid-row: 1/4;
	grid-column: 2;
	margin-top: 50px;
	text-align: left;
}

.form-group {
	margin: 40px 0;
}

input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	width: 100%;
	min-height: 44px;
	outline: none;
	background: var(--field-bg);
	border: var(--border);
	padding: 5px 10px;
	cursor: pointer;
	color: var(--text-color);
}

input:focus,
input:hover {
	border-color: var(--border-focus);
}

button {
	background: var(--background-color);
	border: 2px solid;
	padding: 10px 0;
	font-weight: 800;
	letter-spacing: 1px;
}

button:hover {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
	color: white;
}

#quiz p,
label {
	display: block;
}

.input-textarea {
	min-height: 120px;
	resize: vertical;
}

.radio_check__item {
	cursor: pointer;
	margin-top: 20px;
}

option {
	color: var(--text-color);
	background-color: var(--field-bg);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type="checkbox"],
	input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		vertical-align: top;
		position: relative;
		outline: none;
		width: 35px;
		height: 35px;
		min-height: initial;
		margin-right: 20px;
		margin-left: 10px;
		border: var(--border);
		background: var(--b, var(--field-bg));
		overflow: hidden;
	}

	input[type="checkbox"]::after,
	input[type="radio"]::after {
		content: "";
		position: absolute;
		z-index: 3;
		opacity: var(--o, 0);
		-webkit-transition: opacity var(--d-o, 0.2s),
			-webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
		transition: opacity var(--d-o, 0.2s),
			-webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
			opacity var(--d-o, 0.2s);
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
			opacity var(--d-o, 0.2s),
			-webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
	}
	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		--b: var(--highlight-color);
		--d-o: 0.3s;
		--d-t: 0.6s;
		--d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
		--o: 1;
	}
	input[type="checkbox"]:focus,
	input[type="checkbox"]:hover,
	input[type="radio"]:focus,
	input[type="radio"]:hover {
		border: 1px solid var(--border-focus);
	}

	input[type="checkbox"] {
		border-radius: 7px;
	}
	input[type="checkbox"]::after {
		width: 7px;
		height: 20px;
		border: 5px solid var(--text-color);
		border-top: 0;
		border-left: 0;
		left: 11px;
		-webkit-transform: rotate(var(--r, 20deg));
		transform: rotate(var(--r, 20deg));
	}
	input[type="checkbox"]:checked {
		--r: 43deg;
	}

	input[type="radio"] {
		border-radius: 50%;
	}
	input[type="radio"]::after {
		--size: 30px;
		width: var(--size);
		height: var(--size);
		margin: auto;
		border-radius: 50%;
		background: var(--text-color);
		-webkit-transform: scale(var(--s, 0.7));
		transform: scale(var(--s, 0.7));
	}
	input[type="radio"]:checked {
		--s: 0.5;
	}
}

/*
# MEDIA QUERIES
*/

@media (max-width: 1150px) {
	.hero_desc {
		margin-left: -150px;
	}
}

@media (max-width: 975px) {
	.logo_div,
	nav,
	.copyright {
		margin: auto;
	}
	.about_desc {
		padding-left: 50px;
	}
}

@media (max-width: 900px) {
	.hero_img-div {
		grid-column: 2/4;
		grid-row: 2;
		margin-top: -90px;
	}
	.hero_desc {
		margin-left: 0;
		grid-column: 1/-1;
		grid-row: 3;
		max-width: 44ch;
		margin-top: 50px;
	}
}

@media (max-width: 864px) {
	header::before {
		height: 126%;
	}
	#quiz * {
		grid-column: 1/-1;
	}
	.quiz_title,
	.quiz_desc {
		position: relative;
		top: 0;
	}

	#survey-form {
		grid-row: 3;
		margin: 0;
	}
}

@media (max-width: 700px) {
	.about_grid * {
		grid-column: 1/-1;
	}
	.about_img-div {
		grid-row: 1;
		max-width: 330px;
	}
	.about_title {
		transform: translate(45%, 13%);
	}
	.about_desc {
		padding-left: 0;
		margin-top: 50px;
	}
}

@media (max-width: 612px) {
	.display_none {
		display: none;
	}

	.life_grid * {
		grid-column: 1/-1;
	}

	.life_img-div {
		position: relative;
		top: 0;
		grid-row: 1;
		width: 60%;
		justify-self: end;
		z-index: 9;
		transform: translateY(30%);
	}
}

@media (max-width: 500px) {
	.about_title {
		transform: translate(5%, -23%);
	}
}

@media (max-width: 474px) {
	body {
		font-size: 18px;
		padding: 0 10px;
	}

	li {
		padding: 20px 0;
	}

	.hero_img-div {
		grid-column: 1/4;
	}

	.life_img-div {
		display: none;
	}
}