*,
*::before,
*::after {
	box-sizing: border-box
}

:root {
	--color-primary: #0d41e1;
	--color-primary-hover: #2458f2;
	--color-primary-active: #0b39c2;
	--color-primary-light: #dbe3fd;
	--color-light: #ddd;
	--color-lighter: #999;
	--color-darker: #212023;
	--color-dark: #0f0f11;
	--color-black: #000;
	--color-white: #fff;
	--font-black: "Inter-Black";
	--font-bold: "Inter-Bold";
	--font-medium: "Inter-Medium";
	--font-regular: "Inter-Regular";
	--font-semibold: "Inter-SemiBold"
}

::selection {
	background-color: var(--color-primary);
	color: var(--color-white)
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

body {
	background-color: var(--color-black);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	font: 400 16px/1.7 var(--font-regular), sans-serif;
	color: var(--color-light);
	word-break: break-word
}

@media(min-width: 768px) {
	body {
		font-size: 20px
	}
}

main {
	flex: 1
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none
}

input,
select,
button,
textarea {
	font: 400 16px/1.7 var(--font-regular), sans-serif;
	color: var(--color-dark)
}

@media(min-width: 768px) {

	input,
	select,
	button,
	textarea {
		font-size: 20px
	}
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px
}

@media(min-width: 768px) {
	.container {
		padding: 0 64px
	}
}

@media(min-width: 1280px) {
	.container {
		padding: 0 20px
	}
}

.back-link {
	width: max-content;
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--font-medium);
	color: var(--color-white);
	text-decoration: none
}

.back-link:active {
	transform: scale(0.98)
}

.privacy-text span {
	display: none
}

@font-face {
	font-family: "Inter-Black";
	font-display: swap;
	src: url("../fonts/Inter-Black.ttf") format("truetype")
}

@font-face {
	font-family: "Inter-Bold";
	font-display: swap;
	src: url("../fonts/Inter-Bold.ttf") format("truetype")
}

@font-face {
	font-family: "Inter-Medium";
	font-display: swap;
	src: url("../fonts/Inter-Medium.ttf") format("truetype")
}

@font-face {
	font-family: "Inter-Regular";
	font-display: swap;
	src: url("../fonts/Inter-Regular.ttf") format("truetype")
}

@font-face {
	font-family: "Inter-SemiBold";
	font-display: swap;
	src: url("../fonts/Inter-SemiBold.ttf") format("truetype")
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 16px;
	font-family: var(--font-semibold);
	font-weight: normal;
	color: var(--color-white);
	line-height: 140%
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0
}

@media(min-width: 768px) {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: 24px
	}
}

h1,
.h1 {
	font-size: 32px
}

@media(min-width: 768px) {

	h1,
	.h1 {
		font-size: 62px
	}
}

h2,
.h2 {
	font-size: 28px
}

@media(min-width: 768px) {

	h2,
	.h2 {
		font-size: 74px
	}
}

h3,
.h3 {
	font-size: 24px
}

@media(min-width: 768px) {

	h3,
	.h3 {
		font-size: 38px
	}
}

p {
	margin: 0 0 40px 0
}

p:last-child {
	margin-bottom: 0
}

b,
strong {
	font-family: var(--font-medium);
	font-weight: 500
}

a:not([class]) {
	display: inline-block;
	font-family: var(--font-medium);
	color: var(--color-white);
	text-decoration: none
}

a:not([class]):hover,
a:not([class]):focus {
	color: var(--color-primary-hover)
}

a:not([class]):active {
	color: var(--color-primary-active);
	transform: scale(0.98)
}

blockquote {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	display: block;
	position: relative
}

blockquote::before {
	background: url(../img/icons/message-square.svg) no-repeat left top;
	background-size: contain;
	width: 280px;
	height: 280px;
	display: block;
	content: "";
	opacity: var(--opacity);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transform: translate(-50%, calc(-50% - var(--offset)));
	will-change: transform
}

blockquote p {
	font-size: 20px
}

blockquote span {
	display: block;
	color: var(--color-lighter);
	text-align: right
}

@media(min-width: 768px) {
	blockquote p {
		font-size: 28px
	}

	blockquote span {
		font-size: 24px
	}
}

.about {
	overflow: hidden;
	position: relative
}

.about.section {
	padding-top: 200px
}

.about__headline {
	max-width: 720px;
	margin: 0 auto;
	opacity: var(--opacity);
	position: relative;
	z-index: 5;
	font-family: var(--font-medium);
	font-size: 22px;
	text-align: center;
	transform: translateY(var(--offset));
	will-change: transform
}

.about__icon {
	background: url(../img/icons/zap.svg) no-repeat center;
	background-size: cover;
	width: 200px;
	height: 200px;
	display: block;
	position: absolute;
	top: 40%;
	left: 70%;
	transform: translate(-50%, -50%)
}

@media(min-width: 768px) {
	.about.section {
		padding-top: 300px
	}

	.about__headline {
		font-size: 36px;
		line-height: 60px
	}

	.about__icon {
		width: 500px;
		height: 500px;
		top: 60%;
		left: 70%
	}
}

.button {
	background-color: var(--color-primary);
	width: max-content;
	height: 48px;
	padding: 0 25px;
	display: flex;
	align-items: center;
	font-family: var(--font-medium);
	color: var(--color-primary-light);
	text-decoration: none;
	border-radius: 24px;
	border: 2px solid rgba(255, 255, 255, 0.1)
}

.button:hover,
.button:focus {
	background-color: var(--color-primary-hover);
	color: var(--color-white)
}

.button:active {
	background-color: var(--color-primary-active)
}

.contact {
	background: url(../img/icons/send.svg) no-repeat right top 10%;
	background-size: 50% auto;
	text-align: center
}

.contact__headline {
	font-size: 26px
}

.contact__list {
	width: max-content;
	margin: 48px auto 0;
	display: grid;
	grid-gap: 24px;
	grid-template-columns: 1fr
}

.contact__list a {
	background-color: var(--color-darker);
	padding: 24px 32px;
	display: grid;
	grid-gap: 16px;
	align-items: center;
	grid-template-columns: 32px max-content;
	border-radius: 8px;
	border: 2px solid transparent
}

.contact__list a:hover,
.contact__list a:focus {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.1)
}

.contact__list img {
	width: 24px;
	height: auto
}

@media(min-width: 768px) {
	.contact {
		background-position: right 35% top 25%;
		background-size: 15% auto
	}

	.contact__headline {
		font-size: 48px
	}

	.contact__list {
		margin-top: 64px;
		grid-template-columns: repeat(2, 1fr)
	}

	.contact__list a {
		padding: 24px
	}

	.contact__list img {
		width: 28px
	}
}

@media(min-width: 1280px) {
	.contact__headline {
		font-size: 56px
	}

	.contact__list {
		margin-top: 80px
	}

	.contact__list a {
		padding: 32px;
		grid-gap: 24px
	}

	.contact__list img {
		width: 32px
	}
}

.footer {
	padding: 30px 0;
	font-size: 14px;
	text-align: center;
	border-top: 1px solid var(--color-darker)
}

.footer a {
	color: var(--color-lighter)
}

@media(min-width: 768px) {
	.footer {
		padding: 40px 0;
		font-size: 16px
	}
}

.header {
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	animation: headerSlideIn .5s .5s ease;
	animation-fill-mode: both
}

.header__logo img {
	width: 48px;
	height: auto
}

.header__navigation ul {
	display: flex;
	gap: 16px;
	align-items: center
}

.header__navigation a {
	padding: 4px;
	opacity: 0.8;
	font-family: var(--font-medium);
	text-shadow: 0 4px 8px rgba(0, 0, 0, .15)
}

.header__navigation a:hover {
	opacity: 1;
	color: var(--color-white)
}

.header__contact {
	display: flex;
	align-items: center;
	color: var(--color-white);
	text-decoration: none
}

.header__contact span {
	display: none
}

@media(min-width: 768px) {
	.header {
		padding: 32px
	}

	.header__navigation ul {
		gap: 24px
	}

	.header__navigation a {
		padding: 8px
	}

	.header__contact {
		background-color: var(--color-primary);
		height: 48px;
		padding: 0 25px;
		border-radius: 24px
	}

	.header__contact span {
		display: block
	}

	.header__contact:hover,
	.header__contact:focus {
		background-color: var(--color-primary-hover)
	}

	.header__contact:active {
		background-color: var(--color-primary-active)
	}
}

@keyframes headerSlideIn {
	0% {
		transform: translateY(-100%)
	}

	100% {
		transform: translateY(0)
	}
}

.icon-list {
	margin-bottom: 16px;
	display: grid;
	grid-gap: 8px;
	align-items: center;
	grid-template-columns: repeat(auto-fill, 24px)
}

.icon-list img {
	width: 16px;
	height: auto
}

@media(min-width: 768px) {
	.icon-list {
		margin-bottom: 32px;
		grid-gap: 16px
	}

	.icon-list img {
		width: 24px
	}
}

.projects {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: 1fr
}

.projects__item {
	display: grid;
	grid-gap: 32px;
	align-items: center;
	grid-template-columns: 1fr;
	opacity: var(--opacity);
	transform: translateY(var(--offset));
	will-change: transform
}

.projects__image {
	background-color: var(--color-white);
	width: 100%;
	height: auto;
	aspect-ratio: 5/4;
	object-fit: cover;
	object-position: center top;
	border-radius: 8px
}

@media(min-width: 1280px) {
	.projects {
		grid-gap: 128px
	}

	.projects__item {
		grid-gap: 64px;
		grid-template-columns: 3fr 2fr;
		position: relative
	}

	.projects__item:nth-child(odd) {
		grid-template-columns: 2fr 3fr
	}

	.projects__item:nth-child(odd) .projects__image {
		order: 2
	}

	.projects__item:nth-child(odd) .projects__text {
		order: 1
	}
}

.section {
	padding: 100px 0
}

.section__header {
	margin-bottom: 64px;
	opacity: var(--opacity);
	transform: translateY(var(--offset));
	will-change: transform
}

@media(min-width: 768px) {
	.section__header {
		font-size: 24px
	}
}

@media(min-width: 1280px) {
	.section {
		padding: 150px 0
	}

	.section__header {
		margin-bottom: 128px;
		display: grid;
		grid-gap: 128px;
		align-items: center;
		grid-template-columns: repeat(2, 1fr)
	}

	.section__header h1,
	.section__header h2,
	.section__header h3 {
		margin-bottom: 0
	}
}

.skills {
	display: grid;
	grid-gap: 32px 16px;
	grid-template-columns: repeat(2, 1fr)
}

.skills__item {
	display: grid;
	grid-gap: 12px;
	align-items: center;
	grid-template-columns: max-content auto;
	opacity: var(--opacity);
	transform: scale(var(--size));
	transform-origin: left center
}

.skills__image {
	width: 24px;
	height: auto
}

@media(min-width: 768px) {
	.skills {
		grid-gap: 48px 32px;
		grid-template-columns: repeat(3, 1fr)
	}

	.skills__item {
		grid-gap: 20px
	}

	.skills__image {
		width: 38px
	}
}

@media(min-width: 1280px) {
	.skills {
		grid-gap: 64px;
		grid-template-columns: repeat(4, 1fr)
	}

	.skills__item {
		grid-gap: 24px
	}

	.skills__image {
		width: 48px
	}
}

.teaser {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr;
	position: relative
}

.teaser__item {
	background-color: var(--color-dark);
	overflow: hidden;
	will-change: transform;
	border-radius: 8px
}

.teaser__item:nth-child(3n+1) {
	transform: translateY(calc(var(--offset) * 1))
}

.teaser__item:nth-child(3n+2) {
	transform: translateY(calc(var(--offset) * 2))
}

.teaser__item:nth-child(3n+3) {
	transform: translateY(calc(var(--offset) * 3))
}

.teaser__image {
	background: no-repeat center;
	background-size: cover;
	position: relative;
	padding-bottom: 56.25%
}

.teaser__image::before {
	background: linear-gradient(to bottom, rgba(14, 14, 16, 0.2) 0%, rgba(14, 14, 16, 0.21) 8.1%, rgba(14, 14, 16, 0.239) 15.5%, rgba(14, 14, 16, 0.283) 22.5%, rgba(14, 14, 16, 0.34) 29%, rgba(14, 14, 16, 0.407) 35.3%, rgba(14, 14, 16, 0.482) 41.2%, rgba(14, 14, 16, 0.56) 47.1%, rgba(14, 14, 16, 0.64) 52.9%, rgba(14, 14, 16, 0.718) 58.8%, rgba(14, 14, 16, 0.793) 64.7%, rgba(14, 14, 16, 0.86) 71%, rgba(14, 14, 16, 0.917) 77.5%, rgba(14, 14, 16, 0.961) 84.5%, rgba(14, 14, 16, 0.99) 91.9%, #0e0e10 100%);
	display: block;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

.teaser__image--1,
.teaser__image--2,
.teaser__image--3 {
	background-image: url(../img/visual.jpg)
}

.teaser__text {
	margin-top: -32px;
	padding: 0 32px 48px 32px;
	position: relative;
	z-index: 5
}

@media(min-width: 768px) {
	.teaser {
		grid-gap: 64px;
		grid-template-columns: 1fr 1fr 1fr
	}
}

.visual {
	height: 75vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	border-radius: 24px 24px 0 0
}

.visual__image {
	background: var(--color-black) url(../img/visual.jpg) no-repeat center;
	background-position-y: var(--position);
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	animation: zoomOut 1s ease;
	animation-fill-mode: both
}

.visual__text {
	width: 100%;
	margin-top: -4%;
	position: relative;
	z-index: 5;
	text-align: center;
	animation: zoomIn 1s ease
}

.visual h1 {
	font-family: var(--font-medium);
	font-size: 26px;
	color: var(--color-white);
	text-shadow: 0 8px 16px rgba(0, 0, 0, .15)
}

@media(min-width: 768px) {
	.visual {
		height: 90vh;
		border-radius: 0
	}

	.visual h1 {
		font-size: 42px;
	}
}

@media(min-width: 1280px) {
	.visual h1 {
		font-size: 64px;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(1.15)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes zoomOut {
	0% {
		transform: scale(1)
	}

	100% {
		transform: scale(1.15)
	}
}