:root {
	--clr-lightgreen: #84ffc9;
	--clr-lightpurple: #aab2ff;
	--clr-lightpink: #eca0ff;
	--clr-sun: #ffe680;

	--clr-skyblue: #9fe7ff;
	--clr-babypink: #ffcadf;
	--clr-peach: #ffc9a9;
	--clr-cream: #fff7d6;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: cursive;
}
a,
a:checked,
a:visited {
	text-decoration: none;
	color: inherit;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(to bottom, #78b8ff, #dce9ff);
	/*min-height: 100vh;*/
	overflow-x: hidden;
	padding-top: 40px;
	
	
	/*height: 2000px;*/
}
.cloud_header {
	position: relative;
	width: 90%;
	max-width: 1400px;
	margin: auto;
	padding: 45px 60px;
	background: white;
	border-radius: 120px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	box-shadow: 0 15px 35px rgba(0,0,0,0.12);
	z-index: 1000;
	overflow: visible;
}
.cloud_header::before,
.cloud_header::after {
	content: "";
	position: absolute;
	background: white;
	border-radius: 50%;
	z-index: -1;
}
.cloud_header::before {
	width: 220px;
	height: 220px;
	top: -40px;
	left: 140px;
	box-shadow:
		-90px 0 0 20px white,
		100px 20px 0 5px white,
		180px 20px 0 30px white,
		280px -10px 0 10px white,
		380px -10px 0 50px white,
		530px 5px 0 10px white,
		620px 20px 0 20px white,
		700px 20px 0 20px white,
		820px 10px 0 35px white,
		920px 20px 0 20px white,
		1030px 35px 0 10px white;
}
.cloud_header::after {
	width: 180px;
	height: 180px;
	bottom: -80px;
	left: 40px;
	box-shadow:
		100px 20px 0 10px white,
		180px 20px 0 10px white,
		250px 15px 0 10px white,
		380px 10px 0 20px white,
		450px 20px 0 20px white,
		580px 30px 0 5px white,
		620px 25px 0 10px white,
		770px 15px 0 15px white,
		870px 10px 0 5px white,
		980px 20px 0 0 white,
		1080px 20px 0 0 white,
		1150px -50px 0 20px white;
}
.sun {
	position: absolute;
	top: -120px;
	left: -120px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff4a8 0%, var(--clr-sun) 60%);
	z-index: -10;
	box-shadow:
		0 0 40px rgba(255, 230, 128, 0.8),
		0 0 90px rgba(255, 230, 128, 0.5);
}
.sun::before {
	content: "";
	position: absolute;
	inset: -80px;
	border-radius: 50%;
	background:
		repeating-conic-gradient(
			rgba(255,255,255,0.5) 0deg,
			rgba(255,255,255,0.1) 8deg,
			transparent 12deg,
			transparent 24deg
		);
	animation: rotateSun 120s linear infinite;
}
.logo {
	text-decoration: none;
	font-size: 4rem;
	font-weight: bold;
	background: linear-gradient(
		90deg,
		var(--clr-lightgreen),
		var(--clr-lightpink),
		var(--clr-lightgreen)
	);

	background-size: 200% auto;

	background-clip: text;
	-webkit-background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;

	transition: background-position 0.6s ease;
}
.logo:hover {
	background-position: right center;
}
.nav_links {
	display: flex;
	gap: 50px;
	list-style: none;
}
.nav_links a {
	text-decoration: none;
	color: var(--clr-lightgreen);
	font-size: 1.25rem;
	font-weight: 600;
	transition: 0.2s ease;
}
.nav_links a:hover {
	color: var(--clr-lightpurple);
}
.header_button {
	text-decoration: none;
	background: var(--clr-lightpink);
	color: white;
	padding: 12px 24px;
	border-radius: 40px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: 0.25s ease;
}
.header_button:hover {
	transform: translateY(-3px);
	background: var(--clr-lightpurple);
	/*box-shadow: 0 6px 18px rgba(0,0,0,0.15);*/
}
@keyframes rotateSun {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@media only screen and (max-width: 1000px) {
	.cloud_header {
		flex-direction: column;
		gap: 50px;
		padding: 60px 30px;
		border-radius: 70px;
	}
	.nav_links {
		gap: 40px;
		flex-wrap: wrap;
		justify-content: center;
	}
	.cloud_header::before,
	.cloud_header::after {
		display: none;
	}
	.sun {
		width: 180px;
		height: 180px;
		top: -90px;
		left: -90px;
	}
}




.helicopter {
	position: fixed;
	width: 150px;
	top: 320px;
	left: -250px;
	z-index: -1000;
	pointer-events: none;
	mix-blend-mode: multiply;
	animation:
		flyAround 18s linear infinite,
		bobbing 2s ease-in-out infinite;
}
@keyframes flyAround {

	0% {
		transform: translateX(-20vw) translateY(0) scaleX(1);
	}

	20% {
		transform: translateX(40vw) translateY(60px) scaleX(1);
	}

	40% {
		transform: translateX(105vw) translateY(10px) scaleX(1);
	}

	45% {
		transform: translateX(140vw) translateY(20px) scaleX(-1);
	}

	55% {
		transform: translateX(95vw) translateY(40px) scaleX(-1);
	}

	70% {
		transform: translateX(40vw) translateY(140px) scaleX(-1);
	}

	85% {
		transform: translateX(-15vw) translateY(80px) scaleX(-1);
	}

	90% {
		transform: translateX(-20vw) translateY(60px) scaleX(1);
	}

	100% {
		transform: translateX(-20vw) translateY(0) scaleX(1);
	}
}
@keyframes bobbing {

	0% {
		margin-top: 0;
	}

	50% {
		margin-top: -12px;
	}

	100% {
		margin-top: 0;
	}
}
@media only screen and (max-width: 1000px) {
	.helicopter {
		top: 450px;
	}
}



.scroll_down {
	width: 35vw;
	min-width: 300px;
	margin-top: 300px;
	mix-blend-mode: multiply;
}




.shorts {
	position: relative;
	background-color: #84ffc9;
	background: rgb(from var(--clr-lightgreen) r g b / 0.75);
	padding: 60px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.shorts h2 {
	text-align: center;
	margin-bottom: 60px;
	font-size: 3rem;
}
.short_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	width: 100%;
	max-width: 900px;
	justify-items: center;
}
.short_container {
	width: min(320px, 100%);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
}
.short_container video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 16px;
}
.shorts .btn {
	text-decoration: none;
	background: var(--clr-lightpurple);
	color: white;
	padding: 12px 24px;
	border-radius: 40px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: 0.25s ease;
	margin-top: 40px;
}
.shorts .btn:hover {
	transform: translateY(-3px);
	background: var(--clr-lightpink);
	/*box-shadow: 0 6px 18px rgba(0,0,0,0.15);*/
}
@media (max-width: 380px) {
	.short_grid {
		grid-template-columns: 1fr;
	}
	.short_container {
		width: 100%;
		max-width: 320px;
	}
}
/*
 * --clr-lightgreen: #84ffc9;
	--clr-lightpurple: #aab2ff;
	--clr-lightpink: #eca0ff;
	--clr-sun: #ffe680;
 */



.tiktoks {
	position: relative;
	background-color: #84ffc9;
	background: rgb(from var(--clr-lightpink) r g b / 0.75);
	padding: 60px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tiktoks h2 {
	text-align: center;
	margin-bottom: 60px;
	font-size: 3rem;
}
.tiktok_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	width: 100%;
	max-width: 900px;
	justify-items: center;
}
.tiktok_container {
	width: min(320px, 100%);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
}
.tiktok_container video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 16px;
}
.tiktoks .btn {
	text-decoration: none;
	background: var(--clr-lightgreen);
	color: white;
	padding: 12px 24px;
	border-radius: 40px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: 0.25s ease;
	margin-top: 40px;
}
.tiktoks .btn:hover {
	transform: translateY(-3px);
	background: var(--clr-sun);
	/*box-shadow: 0 6px 18px rgba(0,0,0,0.15);*/
}
@media (max-width: 380px) {
	.tiktok_grid {
		grid-template-columns: 1fr;
	}
	.tiktok_container {
		width: 100%;
		max-width: 320px;
	}
}






.reels {
	position: relative;
	background-color: #84ffc9;
	background: rgb(from var(--clr-peach) r g b / 0.75);
	padding: 60px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.reels h2 {
	text-align: center;
	margin-bottom: 60px;
	font-size: 3rem;
}
.reel_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	width: 100%;
	max-width: 900px;
	justify-items: center;
}
.reel_container {
	width: min(320px, 100%);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
}
.reel_container video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 16px;
}
.reels .btn {
	text-decoration: none;
	background: var(--clr-lightpink);
	color: white;
	padding: 12px 24px;
	border-radius: 40px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: 0.25s ease;
	margin-top: 40px;
}
.reels .btn:hover {
	transform: translateY(-3px);
	background: var(--clr-lightgreen);
	/*box-shadow: 0 6px 18px rgba(0,0,0,0.15);*/
}
@media (max-width: 380px) {
	.reel_grid {
		grid-template-columns: 1fr;
	}
	.reel_container {
		width: 100%;
		max-width: 320px;
	}
}







.description {
	display: flex;
	justify-content: center;
	padding: 100px 80px;
}
.description h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
}
.description article {
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	line-height: 2;
}






.favorites {
	padding: 80px 20px;
	background: rgb(from var(--clr-cream) r g b / 0.75);
	text-align: center;
}
.favorites h2 {
	font-size: 3rem;
	margin-bottom: 10px;
}
.favorite_subtitle {
	margin-bottom: 50px;
	font-size: 1.1rem;
}
.favorite_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}
.favorite_card {
	background: white;
	border-radius: 20px;
	padding: 15px;
	box-shadow: 0 8px 25px rgb(0 0 0 / 0.08);
	transition: transform 0.25s ease;
}
.favorite_card:hover {
	transform: translateY(-8px);
}
.favorite_card video {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 15px;
}
.favorite_card h3 {
	margin-top: 15px;
	font-size: 1.2rem;
}





.socials {
	padding: 80px 20px;
	text-align: center;
}
.socials h2 {
	font-size: 3rem;
	margin-bottom: 50px;
}
.socials_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}
.social_card {
	background: white;
	border-radius: 24px;
	padding: 30px;
	text-decoration: none;
	color: inherit;

	box-shadow: 0 8px 25px rgb(0 0 0 / 0.08);

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}
.social_card:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 16px 35px rgb(0 0 0 / 0.15);
}
.social_card img {
	width: 80px;
	margin-bottom: 15px;

	animation: float 3s ease-in-out infinite;
}
.social_card h3 {
	margin-bottom: 10px;
	font-size: 1.5rem;
}
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}





footer {
	background-color: #5fbf4a;
	/*height: 200px;*/
	position: relative;
	padding: 40px;
	color: #fff;
}
footer .grass {
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 30px;
	background-image: url("/images/grass.png");
	background-repeat: repeat-x;
	background-size: auto 30px;
	z-index: 1000;
}
footer .footer_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1000px;
	margin: auto;
}
footer .footer_container h3 {
	margin-bottom: 10px;
}
footer .footer_container .socials {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 40px;
}
footer .footer_container .socials a:nth-child(1) img {
	width: 100px;
	height: auto;
}
footer .footer_container .socials img {
	width: 40px;
	height: auto;
}