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

:root {
  --index: calc(1vw + 1vh);
  --color-title: #fafafa;
  --color-header: #f4efec;
  --color-text: #cdc6c3;
  --color-focus: #ffa500;
  --gallery-gap: calc(var(--index) * 4);
}

@font-face {
  font-family: raleway-c;
  src: url(./fonts/raleway-regular.woff2);
}

@font-face {
  font-family: outfit-c;
  src: url(./fonts/outfit-regular.woff2);
}

/* will-change */
.content,
.hero,
.main-header,
.gallery > * {
  will-change: transform;
}

body {
  background-image: url(./images/bg.jpg);
  background-size: 50px;

  font-family: raleway-c;
  color: var(--color-title);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: outfit-c;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

.hero {
  position: absolute;
  top: 8vh;
  left: 36vw;
  z-index: -1;

  width: calc(var(--index) * 36);
}

.container {
  padding: 0 8vw;
}

.main-header {
  height: 100vh;
}

.main-title {
  position: absolute;
  bottom: 12vh;

  width: min-content;
  font-size: calc(var(--index) * 6);
  line-height: 0.9;
}

.main-text {
  position: absolute;

  font-size: calc(var(--index) * 2);
  line-height: 0.9;
  color: var(--color-focus);
}

.gallery {
  display: flex;
  gap: 2vw;
}

.gallery > * {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.gallery__left {
  margin-top: calc(var(--index) * 10);
}

.gallery__item {
  width: calc((100vw - 8vw * 2 - 2vw) / 2);

  border-radius: 8px;
}

.text-block {
  position: relative;

  color: var(--color-text);
}

.text-block__h {
  font-size: 2rem;
  line-height: 2.4rem;
  color: var(--color-header);
  margin-bottom: 1rem;
}

.text-block__p {
  line-height: 1.75rem;
}

.text-block__p--more {
  display: none;
}

.text-block:hover .text-block__p--more {
  display: block;
  color: var(--color-focus);
}

.text-block__more {
  color: var(--color-focus);
}

.text-block:hover .text-block__more {
  display: none;
}

.link {
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  margin-top: calc(var(--gallery-gap) * 1.2);
  margin-bottom: var(--gallery-gap);
}

.link:hover {
  scale: 1.1;
  transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  height: 100px;
  border-top: 1px solid var(--color-title);

  @media screen and (min-width: 768px) {
    flex-direction: row;
  }
}

.contact__link {
  display: flex;
  align-items: center;
  gap: 10px;

  color: inherit;

  z-index: 1;
}

.contact__link:hover {
  color: var(--color-focus);
}

.contact__icon {
  fill: var(--color-title);
}

.contact__link:hover .contact__icon {
  fill: var(--color-focus);
  animation: 500ms rotateIcon;
}

.position-wrap {
  position: absolute;
  bottom: 20vh;
}

.main-title--fname {
  position: absolute;
  bottom: calc(var(--index) * 5);

  animation: 3500ms fname;
}

.main-title--lname {
  position: absolute;
  bottom: 0;
  animation: 4500ms lname;
}

.char1 {
  left: 0;
  animation: 1200ms letters;
}

.char2 {
  left: calc(var(--index) * 1.1);
  animation: 2400ms letters;
}

.char3 {
  left: calc(var(--index) * 2.3);
  animation: 3600ms letters;
}

.char4 {
  left: calc(var(--index) * 2.9);
  animation: 1500ms letters;
}

.char5 {
  left: calc(var(--index) * 3.6);
  animation: 2000ms letters;
}

.char6 {
  left: calc(var(--index) * 4.6);
  animation: 3000ms letters;
}

.char7 {
  left: calc(var(--index) * 5.4);
  animation: 1300ms letters;
}

.char8 {
  left: calc(var(--index) * 6.5);
  animation: 1900ms letters;
}

.char9 {
  left: calc(var(--index) * 7.6);
  animation: 2800ms letters;
}

.char10 {
  left: calc(var(--index) * 10);
  animation: 1400ms letters;
}

.char11 {
  left: calc(var(--index) * 11.5);
  animation: 1900ms letters;
}

.char12 {
  left: calc(var(--index) * 12.7);
  animation: 2700ms letters;
}

.char13 {
  left: calc(var(--index) * 13.8);
  animation: 1500ms letters;
}

.char14 {
  left: calc(var(--index) * 15.1);
  animation: 2200ms letters;
}

.char15 {
  left: calc(var(--index) * 15.8);
  animation: 1200ms letters;
}

.char16 {
  left: calc(var(--index) * 17);
  animation: 2700ms letters;
}

.char17 {
  left: calc(var(--index) * 18.3);
  animation: 1800ms letters;
}

.char18 {
  left: calc(var(--index) * 19.5);
  animation: 2900ms letters;
}

@keyframes fname {
  0% {
    opacity: 0;
    transform: translate(100vw, 0) skewX(0deg);
  }
  83% {
    opacity: 1;
    transform: translate(100vw, 0) skewX(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) skewX(0.05turn);
  }
}

@keyframes lname {
  0% {
    opacity: 0;
    transform: translate(-100vw, 0) skewX(0deg);
  }
  83% {
    opacity: 1;
    transform: translate(-100vw, 0) skewX(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) skewX(-0.05turn);
  }
}

@keyframes letters {
  0% {
    transform: translate(0, -100vh);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes rotateIcon {
  0% {
    rotate: -45deg;
    scale: 1.2;
  }
  12.5% {
    rotate: -90deg;
    scale: 1.2;
  }
  25% {
    rotate: -45deg;
    scale: 1.2;
  }
  37.5% {
    rotate: 0deg;
    scale: 1.2;
  }
  50% {
    rotate: 45deg;
    scale: 1.2;
  }
  62.5% {
    rotate: 90deg;
    scale: 1.2;
  }
  75% {
    rotate: 45deg;
    scale: 1.2;
  }
  87.5% {
    rotate: 0deg;
    scale: 1.2;
  }
  100% {
    rotate: -45deg;
    scale: 1;
  }
}