@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.17;
}

:root {
	/* fixed values (base values) */
	--primary-color: #dd0619;
	--section-inner-max-width: 430px;
	--footer-horizontal-padding: 40px;
	--footer-vertical-padding: 24px;
	--section-base-gap: 24px;
	--footer-gutter: 24px;

	--font-size-body: 24px;
	--line-height-body: 28px;

	--font-size-heading: 48px;
	--line-height-heading: 52px;

	--font-size-footer: 14px;
	--line-height-footer: 18px;

	--font-size-copyright: 12px;
	--line-height-copyright: 16px;

	--ul-icon-size: 32px;
	--ul-icon-padding: 48px;

	/* dynamic values */
	--section-horizontal-padding: 0px;
	--section-vertical-padding: unset;
	--section-min-height: unset;
	--section-inner-padding: unset;
	--section-flex-direction: unset;
	--footer-content-justify: space-between;

	--lander-bg: unset;
	--bg-section2: unset;
	--bg-section3: unset;

	--app-button-gutter: unset;
	--call-to-action-gutter: unset;
}

/* let's set variables here so we don't need to blow up this css file. Limit the amount of @media needed */

/** all mobile and tablet views */
@media screen and (max-width: 1299px) {
	:root {
		--section-flex-direction: column;
		--bg-lander: url("./assets/BG_Mobile_and_Tablet-Block_1.jpg");
		--bg-section2: url("./assets/BG_Mobile_and_Tablet-Block_2.jpg");
		--bg-section3: url("./assets/BG_Mobile_and_Tablet-Block_3.jpg");
		--app-button-gutter: 24px;
		--call-to-action-gutter: 80px;
	}

	.app-button-container {
		justify-content: center;
	}

	#lander,
	#cruise-and-chat {
		text-align: center;
	}

	#lander,
	#cruise-and-chat,
	#call-to-action {
		justify-content: flex-end;
	}
}

/* mobile */
@media screen and (max-width: 744px) {
	:root {
		--section-horizontal-padding: 40px;
		--section-vertical-padding: 80px;
		--section-min-height: 812px;
		--section-base-gap: 16px;
		--footer-content-justify: center;

		--font-size-body: 16px;
		--line-height-body: 20px;

		--font-size-heading: 32px;
		--line-height-heading: 36px;

		--font-size-footer: 14px;
		--line-height-footer: 18px;

		--ul-icon-size: 24px;
		--ul-icon-padding: 36px;
		--call-to-action-gutter: 40px;
	}

	.footer-content,
	.footer-content div {
		flex-wrap: wrap;
	}

	.footer-content img,
	.social-button-container {
		width: 100%;
	}

	#call-to-action div {
		--section-base-gap: 24px;
	}
}

/* tablet mini - we drop the horizontal pad in favor of a fixed max-width sizing */
@media screen and (min-width: 745px) and (max-width: 1023px) {
	:root {
		--section-vertical-padding: 160px;
		--section-min-height: 1133px;
	}
}

/* tablet big */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
	:root {
		--section-vertical-padding: 160px;
		--section-min-height: 1366px;
	}
}

/* all desktop views */
@media screen and (min-width: 1300px) {
	:root {
		--section-flex-direction: row;
		--bg-lander: url("./assets/BG_Desktop-Block_1.jpg");
		--bg-section2: url("./assets/BG_Desktop-Block_2.jpg");
		--bg-section3: url("./assets/BG_Desktop-Block_3.jpg");
		--app-button-gutter: 40px;
		--section-inner-padding: 100px;
		--call-to-action-gutter: 200px;
	}

	.app-button-container {
		justify-content: left;
	}

	#lander {
		justify-content: flex-start;
		padding-left: calc(50% + var(--section-inner-padding));
	}

	#cruise-and-chat {
		justify-content: flex-end;
		padding-right: calc(50% + var(--section-inner-padding));
	}

	#call-to-action {
		justify-content: center;
		flex-direction: row-reverse;
	}
}

/* desktop small */
@media screen and (min-width: 1300px) and (max-width: 1919px) {
	:root {
		--section-vertical-padding: 160px;
		--section-min-height: 832px;
	}
}

/* desktop medium */
@media screen and (min-width: 1900px) and (max-width: 2559px) {
	:root {
		--section-vertical-padding: 160px;
		--section-min-height: 1080px;
	}
}

/* desktop large */
@media screen and (min-width: 2560px) {
	:root {
		--section-vertical-padding: 160px;
		--section-min-height: 1440px;
	}
}

/* with the variables above - not much needs to be done now except scaffolding */
html,
body {
	width: 100%;
	height: 100%;
}

body {
	position: relative;
	background: #000;
	color: #ffff;
	font-family: Roboto, sans-serif;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

body > header {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 128px;
	padding-top: 24px;
	padding-left: 32px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

a {
	color: #fff;
	text-decoration: none;
}

a:not([class*="-button"]):hover {
	text-decoration: underline;
}

main h1,
main h2 {
	font-size: var(--font-size-heading);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

main p {
	opacity: 0.8;
}

main > section {
	position: relative;
	display: flex;
	flex-direction: var(--section-flex-direction);
	align-items: center;
	min-height: var(--section-min-height);
	padding: var(--section-vertical-padding) var(--section-horizontal-padding);

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

main > section > div {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-width: var(--section-inner-max-width);
	gap: var(--section-base-gap);
}

.app-button-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 16px;
	gap: var(--app-button-gutter);
}

.app-button {
	display: block;
	width: 189px;
	height: 56px;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;

	color: transparent;
	user-select: none;
}

.app-button--apple {
	background-image: url(./assets/Apple_Store.svg);
}

.app-button--google {
	background-image: url(./assets/Google_Play.svg);
}

#lander {
	background-image: var(--bg-lander);
}

#cruise-and-chat {
	background-image: var(--bg-section2);
}

#lander::before,
#cruise-and-chat::before {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 400px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

#call-to-action {
	background-image: var(--bg-section3);
	gap: var(--call-to-action-gutter);
}

#call-to-action img {
	height: auto;
	width: 100%;
	max-width: var(--section-inner-max-width);
}

#call-to-action ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

#call-to-action li {
	opacity: 0.8;
}

#call-to-action li:hover {
	opacity: 1;
}

#call-to-action [data-item] {
	padding-left: var(--ul-icon-padding);
	background-size: var(--ul-icon-size);
	background-repeat: no-repeat;
	background-position: left center;
}

#call-to-action [data-item="chats"] {
	background-image: url("./assets/List_1-Icon.svg");
}

#call-to-action [data-item="online"] {
	background-image: url("./assets/List_2-Icon.svg");
}

#call-to-action [data-item="buddies"] {
	background-image: url("./assets/List_3-Icon.svg");
}

#call-to-action [data-item="world"] {
	background-image: url("./assets/List_4-Icon.svg");
}

#call-to-action [data-item="filter"] {
	background-image: url("./assets/List_5-Icon.svg");
}

#call-to-action [data-item="views"] {
	background-image: url("./assets/List_6-Icon.svg");
}

body > footer {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

body > footer::before {
	position: absolute;
	top: 0;
	height: 0;
	display: block;
	content: "";
	width: 100%;
	height: 8px;
	background-color: var(--primary-color);
}

.footer-content {
	display: flex;
	justify-content: var(--footer-content-justify);
	align-items: center;
	padding: var(--footer-vertical-padding) var(--footer-horizontal-padding) 0;
	gap: var(--footer-gutter);
}

.footer-content div {
	display: flex;
	gap: 32px;
	justify-content: var(--footer-content-justify);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
}

.footer-copyright {
	padding: 0 var(--footer-horizontal-padding) var(--footer-vertical-padding);
	gap: var(--footer-gutter);
	text-align: center;
	font-size: var(--font-size-copyright);
	line-height: var(--line-height-copyright);
	opacity: 0.8;
}

.social-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--app-button-gutter);
}

.social-button {
	display: block;
	width: 40px;
	height: 40px;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;

	color: transparent;
	overflow: hidden;
	user-select: none;
}

.social-button--twitter {
	background-image: url(./assets/Twitter-Icon.svg);
}

.social-button--instagram {
	background-image: url(./assets/Instagram-Icon.svg);
}