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

:root {
	--accent: #ff004b;
	--background: #fffdfd;
}

* {
	margin: 0;
	box-sizing: border-box;
}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Inter";
	text-decoration: none;
	color: #202020;
}

body {
	background-color: var(--background);
	display: block;

	overflow: hidden;
}

main {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	width: 100vw;
	height: 100vh;

	overflow: hidden;
}

nav {
	height: 40px;
	bottom: -1px;
	position: absolute;
	transform: translateX(-50%);
	top: 2%;
	left: 50%;

	display: flex;
	gap: 20px;

	padding-inline: 20px;
	padding-block: 10px;

	border-radius: 50px;

	background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

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

	width: 310px;
}

nav > * {
	color: var(--accent);
	font-weight: 500;
	&:hover {
		text-decoration: underline;
	}
}

.flexbox-col-10 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.flexbox-col-20 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.flexbox-row-10 {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.logo {
	width: 460px;
}

.cta {
	position: relative;
	overflow: visible;
	padding-left: 200px;
}

.cta p {
	font-size: 20px;
	font-weight: 500;
	color: #757674;
}

.cta .titleblob {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);

	z-index: -1;

	opacity: 0.04;
}

div.cake {
	position: relative;
	margin-right: 300px;
}
div.cake .cakeblob {
	position: absolute;
	right: -100%;
	top: 40%;
	transform: translate(-50%, -50%);

	z-index: -1;
}

.button-support {
	display: grid;
	place-items: center;
	padding-inline: 15px;
	height: 40px;

	color: var(--accent);
	border: 2px solid var(--accent);
	border-radius: 7px;
	background-color: var(--background);

	font-weight: 600;
}

.button {
	transition-duration: 0.2s;
	&:hover {
		transform: scale(1.04);
	}
}

@media screen and (max-width: 1560px) {
	div.cake {
		margin-right: 15%;
	}
}

@media screen and (max-width: 1260px) {
	body {
		background: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0) 40%,
				rgba(0, 0, 0, 0.9) 100%
			),
			url(../bg.jpg);
		background-position: center center;
		background-size: cover;
	}
	main {
		flex-direction: column-reverse;
		align-items: start;
	}

	div.cake {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		position: absolute;
		top: 10%;

		display: none;
	}

	div.cake .cakeblob {
		left: 50%;
	}

	.cta .titleblob {
		position: absolute;
		opacity: 0.12;
	}

	.cta {
		position: absolute;
		bottom: 5%;
		left: 0%;
		padding-left: 5%;

		z-index: 10;
	}

	div.cake img.cake {
		width: 224px;
		image-rendering: crisp-edges;
	}

	.button-support {
		background-color: #fff;
	}

	.cta p {
		color: #dfdfdf;
	}
}

@media screen and (max-width: 590px) {
	.logo {
		width: calc(100% - 80px);
	}

	.titleblob {
		top: 40%;
		width: calc(100% - 30px);
	}

	.cta p {
		font-size: 18px;
	}
}