/* color var */

:root {
	--bg-color: #f9f9f9;

	--tag-color-red: #E7275A;
	--tag-color-yellow: #FACC11;
	--tag-color-green: #C5F600;
	--tag-color-turquoise: #04E3AD;

	--text-color-dark: #212121;
	--text-color-light: #f9f9f9;
}



/* font */

@font-face {
	font-family: 'Geologica';
	src: url('./font/Geologica-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Geologica';
	src: url('./font/Geologica-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Geologica';
	src: url('./font/Geologica-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}



/* setting */

* {
	margin: 0;
	padding: 0;
}

a, a:link, a:visited, a:hover {text-decoration: none;}

html {
	font-size: 62.5%;
	background-color: var(--bg-color);
}

body {
	font-size: 1.4rem;
	line-height: 2.4rem;
	font-family: sans-serif, Arial, Helvetica;
}


/* grid */

.wrapper {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
}



/* grid */

.grid {
	gap: 56px;
	width: 100%;
	display: grid;
	margin: 48px 0;
	place-items: center;
	place-content: center;
	justify-content: center;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	min-height: calc(100vh - 96px);
}


/* logo */

.logo {

	img {
		height: 80px;
		object-fit: cover;
		object-position: center;
	}
}


/* text */

.text {
	position: relative;

	.text-title {
		z-index: 200;
		line-height: 1.2;
		font-weight: 700;
		text-align: center;
		position: relative;
		text-transform: uppercase;
		color: var(--text-color-dark);
		font-family: 'Geologica', sans-serif;
		font-size: clamp(3.2rem, 8vw, 7.2rem);
	}

	.text-tag {
		z-index: 100;
		font-weight: 400;
		font-size: 2.8rem;
		border-radius: 8px;
		position: absolute;
		line-height: 2.8rem;
		padding: 8px 24px 12px 24px;
		color: var(--text-color-dark);
		font-family: 'Geologica', sans-serif;

		&.--top {
			top: -24px;
			left: 36%;
			color: var(--text-color-light);
			background-color: var(--tag-color-red);
			transform: rotate(-8deg);
		}

		&.--right {
			right: 0px;
			top: 44%;
			background-color: var(--tag-color-turquoise);
			transform: rotate(-8deg);
		}

		&.--bottom {
			bottom: -32px;
			left: 56%;
			background-color: var(--tag-color-green);
			transform: rotate(8deg);
		}

		&.--left {
			top: 16%;
			left: 4%;
			background-color: var(--tag-color-yellow);
			transform: rotate(8deg);
		}
	}
}



/* subscribe */

.subscribe {
	z-index: 50;
	position: relative;

	.subscribe-link {
		z-index: 50;
		display: flex;
		column-gap: 24px;
		padding: 28px 44px;
		position: relative;
		border-radius: 24px;
		align-items: center;
		background: linear-gradient(225deg, rgb(153, 51, 221), rgb(85, 51, 238), rgb(68, 204, 255) 85%);
		transition: all .32s ease-in-out;

		&::after {
			top: 0;
			left: 0;
			z-index: -50;
			width: 100%;
			height: 100%;
			content: '';
			position: absolute;
			border-radius: 24px;
			background: linear-gradient(225deg, rgb(153, 51, 221), rgb(85, 51, 238), rgb(68, 204, 255) 85%);
			filter: blur(96px);
		}

		&:hover {
			transform: scale(1.08);
		}
	}

	.subscribe-logo {
		width: 56px;
		height: 56px;

		img {
			width: 56px;
			height: 56px;
			object-fit: cover;
			object-position: center;
		}
	}

	.subscribe-text {
		font-weight: 600;
		font-size: 4rem;
		line-height: 4.8rem;
		color: var(--text-color-light);
		font-family: 'Geologica', sans-serif;
	}
}



/* counter */

.counter {
	width: 88px;
	height: 31px;
}



/* media */

@media (max-width: 768px) {
	.grid {
		margin: 32px;
		min-height: calc(100vh - 64px);
	}

	.subscribe {
		.subscribe-link {
			column-gap: 16px;
			padding: 24px 32px;
		}

		.subscribe-logo {
			width: 32px;
			height: 32px;

			img {
				width: 32px;
				height: 32px;
			}
		}

		.subscribe-text {
			font-size: 2.8rem;
			line-height: 3.6rem;
		}
	}
}

@media (max-width: 480px) {
	.grid {
		margin: 24px;
		min-height: calc(100vh - 48px);
	}

	.text {
		.text-tag {
			font-size: 2rem;
			line-height: 2rem;
			padding: 8px 16px 12px 16px;

			&.--top {
				top: -24px;
				left: 36%;
			}

			&.--right {
				right: 0px;
				top: 48%;
			}

			&.--bottom {
				bottom: -24px;
				left: 56%;
			}

			&.--left {
				top: 28%;
				left: -2%;
			}
		}
	}

	.subscribe {
		.subscribe-link {
			border-radius: 16px;
			padding: 16px 24px;
			column-gap: 16px;
		}

		.subscribe-logo {
			img {
				width: 32px;
				height: 32px;
			}
		}

		.subscribe-text {
			font-size: 1.8rem;
			line-height: 2.4rem;
		}
	}
}

@media (max-width: 360px) {
	.text {
		.text-tag {
			font-size: 1.6rem;
			line-height: 1.6rem;
			padding: 4px 12px 8px 12px;

			&.--top {
				top: -20px;
				left: 32%;
			}

			&.--right {
				right: -8%;
				top: 50%;
			}

			&.--bottom {
				bottom: -16px;
				left: 48%;
			}

			&.--left {
				top: 28%;
				left: -2%;
			}
		}
	}
}