@charset "UTF-8";

main {
	>section.row {
		z-index: 500;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;

		>h2#title {
			font-size: 2.4rem;
			font-family: "Bahnschrift";
			margin: 0.1em 0 0.2em 0;

			>span {
				color: #0ea5e9;
			}
		}

		>p#description {
			margin: unset;
			text-align: center;
			font-size: 1.2rem;
			font-family: "Geologica";
			font-weight: 400;
			color: rgb(0, 0, 0, 0.6);

			>span {
				color: #0ea5e9;
				font-weight: 800;
			}
		}

		>p.description {
			width: 40%;
		}

		>a#order {
			padding: 0.5em 1.3em;
			margin-top: 1rem;
			display: flex;
			align-items: center;
			gap: 5px;
			border-radius: 1.125em;
			font-size: 1em;
			font-family: "Geologica";
			font-weight: 400;
			text-decoration: none;
			background-color: #0ea5e9;
			color: #fff;
			transition: 0.2s;

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

		>div#team {
			margin-top: 1rem;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;

			>div#card {
				padding: 0.6em 0.8em;
				width: 180px;
				height: 220px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				border-radius: 1.125rem;
				box-shadow: 0px 0px 15px 0px rgba(14, 165, 233, 0.1);
				background-color: #fff;
				transition: ease 0.2s;

				>img {
					object-fit: cover;
					width: 140px;
					height: 140px;
					border-radius: 100%;
				}

				>p {
					margin: 1em 0 0;
					font-size: 1.2em;
					font-family: "Geologica";
					font-weight: 900;
					color: #000000;
				}

				>span {
					font-size: 1em;
					font-family: "Geologica";
					font-weight: 400;
					color: #0ea5e9;
				}
			}
		}

		>a#telegram {
			padding: 0.5em 1.3em;
			margin-top: 1rem;
			display: flex;
			align-items: center;
			gap: 5px;
			border-radius: 1.125em;
			font-size: 1em;
			font-family: "Geologica";
			font-weight: 400;
			text-decoration: none;
			background-color: #0ea5e9;
			color: #fff;
			transition: 0.2s;

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

			>img {
				width: 20px;
				height: 20px;
			}
		}
	}

	>section.wrap {
		position: relative;
		overflow: hidden;
		background-color: #fff;

		>section.row {
			z-index: 500;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: unset;
		}

		>div.net {
			--dot-bg: #5a645a;
			--dot-color: transparent;
			--dot-color: transparent;
			--dot-size: calc(110px + var(--scroll-px-hundred, 0px) * 2);
			--dot-space: calc(var(--dot-size) + 1px);
			z-index: -50;
			position: absolute;
			top: -30%;
			width: 200%;
			height: 200%;
			background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
			mask-image: linear-gradient(transparent, #fff, transparent);
			transform: perspective(135px) rotateX(calc(6deg + var(--scroll-deg, 0deg) * -0.4)) skewY(6deg) rotateZ(-18deg);
			transition: transform 0.08s linear, background 0.08s linear;
		}
	}
}
}
