@import url('https://fonts.googleapis.com/css2?family=TASA+Orbiter:wght@400..800&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	font-family: 'TASA Orbiter', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: #000;
	background-image: url('../images/taust.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
	color: #fff;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.01em;
	font-weight: 400;
}

section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100dvh;

	article {
		img {
			max-width: 550px;
		}
		h2 {
			margin: 20px 0 30px 0;
			font-size: 2rem;
			line-height: 1.2;
			font-weight: 400;
			letter-spacing: 0.01em;
			letter-spacing: 3px;

			&:after {
				content: '';
				display: block;
				width: 100%;
				height: 1px;
				background-color: #fff;
				margin-top: 20px;
			}
		}
		ul {
			margin: 2rem 0 2rem 5px;
			li {
				font-size: 2rem;
				list-style: none;
				font-weight: 700;

				&:before {
					content: '';
					display: inline-block;
					margin-right: 1.5rem;
					border-bottom: 5px solid #fff;
					border-right: 5px solid #fff;
					width: 10px;
					height: 20px;
					transform: rotate(45deg);
					transform-origin: center center;
					transition: all 0.3s ease;
					&:hover {
						transform: rotate(0deg);
					}
				}
			}
		}
		a {
			display: inline-block;
			color: #fff;
			font-size: 1.4rem;
			font-weight: 400;
			border: 1px solid #fff;
			padding: 5px 20px;
			border-radius: 35px;
			text-decoration: none;
			transition: all 0.3s ease;
			&:hover {
				background-color: #fff;
				color: #000;
			}
		}
	}
}

@media (max-width: 768px) {
	body {
		background-position: center -25dvh;
	}

	section {
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		min-height: 100dvh;

		article {
			margin: 10dvw;

			img {
				max-width: 70%;
			}

			h2 {
				font-size: 4dvw;
				letter-spacing: 2px;
			}

			ul {
				margin: 1rem 0 2rem 5px;
				li {
					font-size: clamp(1rem, 4vw, 2.5rem);

					&:before {
						content: '';
						margin-right: 1.2rem;
						border-bottom: 3px solid #fff;
						border-right: 3px solid #fff;
						width: 5px;
						height: 13px;
					}
				}
			}

			a {
				font-size: 3dvw;
				padding: 5px 20px;
			}
		}
	}
}