.page-home,
.font-init {
  --size-400: 4.1rem;
  --size-400: 2.5rem;
  --font-ratio: 1.12;
  --font-line-height: 1.15;
  --font-body: "Mulish", arial, sans-serif;
  --social-network-icon-size: 4.8rem;
  --border-top-size: 0.8rem;
  --border-bottom-size: 0.8rem;
  --font-size-hero: max(min(4.55vw, 7.6rem), 2.8rem);
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-interactive-dark);
  fill: var(--color-interactive-dark);
  font-weight: 700;
  min-width: 340px;
  line-height: var(--font-line-height);
}
.page-home strong,
.font-init strong {
  font-weight: 800;
}
.page-home ::selection,
.font-init ::selection {
  background-color: var(--color-interactive-dark);
  color: var(--color-background);
}
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4,
.font-init h1,
.font-init h2,
.font-init h3,
.font-init h4 {
  margin: 0;
  font-weight: 800;
  line-height: var(--font-line-height);
}
.page-home h2,
.font-init h2 {
  font-size: var(--size-700);
  margin-bottom: 0.5em;
}
.page-home h3,
.font-init h3 {
  font-size: var(--size-600);
}
.page-home p,
.font-init p {
  margin: 0;
}
.page-home .small,
.font-init .small {
  font-size: var(--size-300);
}
.page-home .smaller,
.font-init .smaller {
  font-size: var(--size-200);
}
.page-home .smallest,
.font-init .smallest {
  font-size: var(--size-100);
}
.page-home em,
.page-home h2,
.font-init em,
.font-init h2 {
  font-style: normal;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.page-home em:before,
.page-home h2:before,
.font-init em:before,
.font-init h2:before {
  content: "";
  position: absolute;
  display: inline-block;
  bottom: 0.05em;
  z-index: -1;
  left: 0;
  right: 0;
  height: var(--underline-size);
  background: var(--color-accent-lighter);
  opacity: 0.7;
}
.page-home h2:before,
.font-init h2:before {
  left: -0.6em;
  right: -0.6em;
}
.page-home h2.left-align:before,
.font-init h2.left-align:before {
  left: 0;
}

.bigger-than-mobile .page-home,
.bigger-than-mobile .font-init {
  --size-400: 3.2rem;
}

.bigger-than-tablet .page-home,
.bigger-than-tablet .font-init {
  --size-400: 4.1rem;
}

.container {
  background-color: var(--color-interactive-dark);
  background-image: url("/img/vector-background.svg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 200rem auto;
  text-align: center;
}
@media (min-width: 576px) {
  .container {
    background-size: 150rem auto;
  }
}
@media (min-width: 1023px) {
  .container {
    background-size: max(100vw, 200rem) auto;
  }
}

.block {
  padding: var(--space-big);
  text-align: center;
  background-color: var(--color-background);
  position: relative;
  z-index: 1;
}
.block--is-dark {
  background-color: transparent;
  color: var(--color-background);
  fill: var(--color-background);
}
.block--is-dark ::selection {
  background-color: var(--color-background);
  color: var(--color-interactive-dark);
}
.block--is-dark em:before,
.block--is-dark h2:before {
  opacity: 0.85;
  background-color: var(--color-accent-light);
}

.block.block--social-networks {
  padding: 2.8rem;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  height: 0;
  width: 0;
  top: 0;
}

.social-networks {
  padding: 0.8rem 0;
}
.social-networks a {
  display: inline-block;
  margin: 2rem;
  padding: 2rem;
  position: relative;
  transform: rotate(45deg);
}
.social-networks a:after {
  transition: background var(--transition-medium) ease-out;
  transform-origin: 50% 50%;
  content: "";
  background: var(--color-accent-light);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.social-networks a:hover:after {
  background: var(--color-accent);
}
.social-networks a:active:after {
  background: var(--color-accent-lightest);
}
.social-networks a:focus {
  outline-color: var(--color-accent-light);
}

.social-network-icon {
  transform: rotate(-45deg);
  transition: transform var(--transition-short) ease-out;
  overflow: visible;
  display: block;
  z-index: 1;
  position: relative;
  width: var(--social-network-icon-size);
  height: var(--social-network-icon-size);
}
.social-network-icon path {
  fill: none;
  stroke: var(--color-interactive-dark);
  stroke-width: 2px;
}
.social-network-icon--email path {
  stroke-width: 3px;
}

.bigger-than-mobile .social-networks {
  padding: 3.6rem;
}
.bigger-than-mobile .social-networks a {
  margin: 2.8rem;
  padding: 2.8rem;
}

.home-menu {
  --space: 0.8rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.home-menu nav {
  display: flex;
  justify-content: center;
  padding: calc(0.5 * var(--space)) var(--space);
  gap: calc(var(--space) * 1.5);
  align-items: center;
}
.home-menu nav ul {
  display: contents;
  list-style-type: none;
}
.home-menu nav li {
  --rotation: 5deg;
}
.home-menu nav li a {
  font-style: normal;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: var(--space);
  position: relative;
  z-index: 1;
  font-size: var(--size-200);
  transition: all ease-in-out var(--transition-short);
  transform: rotate(calc(0.5 * var(--rotation)));
}
.home-menu nav li a:after {
  content: "";
  position: absolute;
  display: inline-block;
  bottom: 0.35em;
  z-index: -1;
  left: 0;
  right: 0;
  height: 0.3em;
  background: var(--color-accent-lighter);
  opacity: 0.7;
  transition: all ease-in-out var(--transition-medium);
}
.home-menu nav li a:hover {
  transform: rotate(var(--rotation)) scale(1);
}
.home-menu nav li a:hover:after {
  height: 0.4em;
}
.home-menu nav li a:active {
  outline: none;
}
.home-menu nav li a:active:after {
  transition: all ease-in-out var(--transition-short);
  height: 1.2em;
}
.home-menu nav li a:focus {
  outline: none;
}
.home-menu nav li:nth-child(even) a {
  transform: rotate(calc(-0.5 * var(--rotation)));
}
.home-menu nav li:nth-child(even) a:hover {
  transform: rotate(calc(-1 * var(--rotation))) scale(1);
}

.bigger-than-tablet .home-menu {
  --space: 1.2rem;
  right: 32%;
}
.bigger-than-tablet .home-menu nav {
  justify-content: right;
  padding: calc(0.5 * var(--space)) calc(2 * var(--space));
}
.bigger-than-tablet .home-menu nav li a {
  transform: none;
}
.bigger-than-tablet .home-menu nav li a:hover {
  transform: none;
}

.bigger-than-desktop .home-menu {
  left: 68%;
  right: 0;
}
.bigger-than-desktop .home-menu nav {
  height: var(--font-size-hero);
  background: #7db4f4;
  justify-content: center;
}
.bigger-than-desktop .home-menu nav li a {
  font-size: 2vw;
}

.block.block--presentation {
  display: flex;
  flex-direction: column-reverse;
  padding: 0;
  text-align: left;
  --color-mask-1: #8ccc75;
  --color-mask-2: #d07dbb;
  --mask-opacity: 0.3;
  --picture-height: 85%;
}
.block.block--presentation .presentation__decoration__hashtag {
  user-select: none;
  pointer-events: none;
}
.block.block--presentation .decoration__line:nth-child(6) {
  visibility: hidden;
}

.presentation__hero {
  font-size: var(--font-size-hero);
  text-align: right;
}
.presentation__hero p {
  padding: 1.8rem;
  font-size: inherit;
  line-height: inherit;
}

.presentation__decoration {
  --stroke-color: var(--color-accent-lighter);
  --background-color: #7db4f4;
  background: var(--background-color);
  position: relative;
  font-size: calc(1.15 * var(--font-size-hero));
  height: 7em;
  overflow: hidden;
}

.presentation__decoration__hashtag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.presentation__decoration__hashtag--top {
  z-index: 2;
  padding-top: 5em;
}
.presentation__decoration__hashtag--top .decoration__line {
  opacity: 0;
  text-shadow: none;
  color: transparent;
  -webkit-text-stroke: 0.03em var(--stroke-color);
}
.presentation__decoration__hashtag--top .decoration__line:nth-child(1) {
  display: none;
}
.presentation__decoration__hashtag--top .decoration__line:nth-child(2) {
  opacity: 1;
}

.presentation__decoration__picture,
.presentation__decoration__mask {
  z-index: 1;
  position: absolute;
  bottom: -25%;
  right: 0;
  top: 0;
  left: 0;
  object-fit: scale-down;
  color: transparent;
}
.presentation__decoration__picture figcaption,
.presentation__decoration__mask figcaption {
  display: none;
}
.presentation__decoration__picture svg,
.presentation__decoration__picture img,
.presentation__decoration__mask svg,
.presentation__decoration__mask img {
  height: var(--picture-height);
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  transform-origin: -30% 100%;
  transition: all var(--transition-short) ease-out;
}

.presentation__decoration__mask {
  transition: all var(--transition-medium) ease-in-out;
  mix-blend-mode: overlay;
  opacity: 0.8;
}
.presentation__decoration__mask .mask-1 {
  transform: translateX(-46%) scale(1.03);
  fill: var(--color-mask-2);
}
.presentation__decoration__mask .mask-2 {
  fill: var(--color-mask-1);
  transform: translateX(-48%) scale(1.01);
  z-index: 1;
}

.presentation__decoration:hover .presentation__decoration__mask .mask-1 {
  transform: translateX(-46%) scale(1.04);
}
.presentation__decoration:hover .presentation__decoration__mask .mask-2 {
  transform: translateX(-48%) scale(1.015);
}

.bigger-than-tablet .block.block--presentation {
  --picture-height: 95%;
  flex-direction: row;
}
.bigger-than-tablet .presentation__hero {
  text-align: left;
  flex-basis: 68%;
  display: grid;
  place-content: center;
}
.bigger-than-tablet .presentation__hero p {
  max-width: 26ch;
  padding-left: 3.6rem;
  padding-right: 0.8rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.bigger-than-tablet .presentation__decoration {
  height: auto;
  flex-basis: 32%;
  min-height: 7em;
}
.bigger-than-tablet .presentation__decoration__mask,
.bigger-than-tablet .presentation__decoration__picture {
  bottom: 0;
}
.bigger-than-tablet .presentation__decoration,
.bigger-than-tablet .presentation__hero {
  flex-shrink: 0;
  flex-grow: 0;
}

.bigger-than-desktop .block.block--presentation {
  --picture-height: 83%;
}

.hashtag-background {
  overflow: hidden;
  --animation-speed: 5;
}

.decoration__line {
  --animation-width: 1000px;
  --animation-timing: 1s;
  color: transparent;
  transition: text-shadow var(--transition-short) ease-out;
  user-select: none;
  color: transparent;
  font-family: "Raleway", sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: 0.02em var(--stroke-color);
  white-space: nowrap;
  line-height: 1;
  display: flex;
  animation: sliding calc(var(--animation-timing) * var(--animation-speed)) linear infinite;
  transition: all 200ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .decoration__line {
    animation: none;
  }
}
.decoration__line__word {
  padding: 0 0.4rem;
}

@keyframes sliding {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--animation-width)));
  }
}
.is-extraLargeDesktop .page-home {
  --font-size-hero: 10rem;
}
.is-extraLargeDesktop .block--presentation .presentation__hero p {
  text-align: right;
  padding-right: 5rem;
}

.block--skills {
  --bottom-line-height: 0.8rem;
  --padding: 2rem;
  --icon-size: 7.2rem;
  --max-height-possible: 12em;
  padding-bottom: 0 !important;
  font-size: var(--size-400);
}
.block--skills .inner {
  max-width: 130rem;
  margin: 0 auto;
}
.block--skills p {
  font-size: inherit;
}
.block--skills .skills__item {
  padding: 0.8rem;
}
.block--skills .skills__item:focus {
  outline: none;
}
.block--skills .skills__item__icon {
  fill: inherit;
  width: var(--icon-size);
  height: var(--icon-size);
}
.block--skills .skills__bottom__line {
  height: var(--bottom-line-height);
  width: 15%;
  background: var(--color-interactive);
  margin: var(--padding) auto;
}
.block--skills .skills__content {
  padding: var(--space-bigger) 0;
  text-align: left;
}
.block--skills .skills--tiny .skills__item {
  cursor: pointer;
}
.block--skills .skills--tiny .skills__item__heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--bottom-line-height) solid var(--color-interactive);
  padding-bottom: 0.4em;
  margin-bottom: 0.4em;
}
.block--skills .skills--tiny .skills__item__title {
  font-size: var(--size-400);
  margin-left: var(--space-smaller);
}
.block--skills .skills--tiny .skills__item__content {
  overflow: hidden;
  max-height: calc(3em * var(--font-line-height));
  position: relative;
  transition: max-height var(--transition-medium) ease-in-out;
}
.block--skills .skills--tiny .skills__item__content:after {
  transition: transform var(--transition-short) ease-in-out;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, var(--color-interactive-dark) 5%, rgba(78, 83, 207, 0) 100%);
}
.block--skills .skills--tiny .skills__item__content:hover:after {
  transform: translateY(1em);
}
.block--skills .skills--tiny .skills__item--active .skills__item__content {
  max-height: var(--max-height-possible);
}
.block--skills .skills--tiny .skills__item--active .skills__item__content:after {
  content: none;
}
.block--skills .skills--tiny .skills__item--active .skills__item__heading {
  border-color: var(--color-accent-light);
}
.block--skills .skills--tiny .skills__item--active .skills__bottom__line {
  background-color: var(--color-accent-light);
}
.block--skills .skills--large {
  display: none;
}
.block--skills .skills--large .skills__items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  column-gap: var(--space-smaller);
  margin-bottom: 0.8rem;
}
.block--skills .skills--large .skills__content {
  padding: var(--space-medium) var(--space-bigger);
}
.block--skills .skills--large .skills__content .skills__item {
  display: none;
}
.block--skills .skills--large .skills__content .skills__item.skills__item--active {
  display: block;
}
.block--skills .skills--large .skills__items .skills__item {
  position: relative;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.block--skills .skills--large .skills__items .skills__item .inner {
  padding-bottom: 4.6rem;
}
.block--skills .skills--large .skills__items .skills__item__title {
  font-size: var(--size-200);
  font-weight: 600;
}
.block--skills .skills--large .skills__items .skills__item__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.block--skills .skills--large .skills__items .skills__item__line {
  height: var(--bottom-line-height);
  width: 60%;
  background: var(--color-interactive);
  margin: var(--padding) auto;
}
.block--skills .skills--large .skills__items .skills__item--active {
  background: var(--color-interactive);
  box-shadow: var(--box-shadow);
}
.block--skills .skills--large .skills__items .skills__item--active .skills__item__line {
  background: var(--color-accent-light);
}

.bigger-than-tablet .skills--large {
  display: block;
}
.bigger-than-tablet .skills--tiny {
  display: none;
}

.block-believe-container {
  padding-top: var(--space-bigger);
}

.block.block--believe {
  --left-offset: 0px;
  --animation-length: 450ms;
  text-align: left;
  padding: 4.8rem 3.6rem;
  border-bottom: var(--border-bottom-size) solid var(--color-accent);
}
.block.block--believe .inner {
  position: relative;
  max-width: 140rem;
}
.block.block--believe .innerinner {
  position: relative;
}
.block.block--believe .pusher {
  visibility: hidden;
  transition: height var(--animation-length) ease-out;
  height: var(--height, auto);
}
.block.block--believe .slide-changer {
  text-align: right;
  margin-top: 0.2em;
}

.believe__items {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.believe__item {
  pointer-events: auto;
  flex-basis: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  transform: translateX(var(--left-offset));
  align-self: flex-start;
  transition: transform var(--animation-length) ease-in-out;
}

.bigger-than-mobile .block.block--believe {
  margin: 0 3.6rem;
  box-shadow: var(--box-shadow);
  position: relative;
}
.bigger-than-mobile .block.block--believe h2 {
  margin-right: 15rem;
}
.bigger-than-mobile .block.block--believe .slide-changer {
  position: absolute;
  right: 0;
  top: 0;
}

.bigger-than-desktop .block.block--believe {
  display: inline-block;
}

.slide-changer {
  --icon-size: 1em;
  font-size: var(--size-300);
}
.slide-changer > * {
  display: inline-block;
  vertical-align: middle;
}
.slide-changer__prev, .slide-changer__next {
  width: var(--icon-size);
  height: var(--icon-size);
  cursor: pointer;
}
.slide-changer__prev:focus, .slide-changer__next:focus {
  outline: none;
}

.block.block--works {
  padding: var(--space-big);
  text-align: center;
}
.block.block--works .inner {
  max-width: 125rem;
  margin: 0 auto;
}
.block.block--works figcaption {
  display: none;
}

.works__item {
  margin-bottom: var(--space-big);
  cursor: pointer;
  position: relative;
  text-shadow: var(--box-shadow);
}
.works__item figure {
  margin: 0;
}
.works__item:focus {
  outline: 0.4rem dashed var(--color-accent-light);
}
.works__item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--color-interactive-dark);
  mix-blend-mode: hard-light;
}
.works__item:last-child {
  margin-bottom: 0;
}
.works__item__content-container {
  position: absolute;
  position: absolute;
  padding: var(--space-big) var(--space-medium);
  bottom: var(--border-bottom-size);
  left: 0;
  right: 0;
  z-index: 1;
  text-align: left;
  background: linear-gradient(0deg, rgba(85, 85, 210, 0.2) 53%, rgba(0, 0, 0, 0) 100%);
}
.works__item__content-container p + p {
  margin-top: 0.4rem;
}
.works__item__thumbnail {
  width: 100%;
  transition: all var(--transition-short) ease-out;
  border-bottom: var(--border-bottom-size) solid var(--color-interactive-dark);
}
.works__item__thumbnail,
.works__item img,
.works__item picture {
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: saturate(0);
  display: block;
}
.works__item__title {
  --shadow-color: var(--color-interactive-dark);
  display: inline-block;
  padding: 0.2rem 0.3rem;
  margin: 0 -0.3rem;
  position: relative;
  color: var(--color-interactive-lightest);
}
.works__item__title:after {
  content: "";
  height: calc(var(--underline-size) / 2);
  width: 30%;
  background-color: var(--color-interactive-lighter);
  display: block;
  margin-top: 0.4rem;
}
.works__item__content {
  opacity: 0;
  line-height: 0;
  transition: all var(--transition-short) ease-out;
}
.works__item:hover .works__item__title, .works__item:focus .works__item__title {
  color: var(--color-interactive-lightest);
}
.works__item:hover .works__item__title:after, .works__item:focus .works__item__title:after {
  background-color: var(--color-accent);
}
.works__item:hover .works__item__content-container, .works__item:focus .works__item__content-container {
  padding-bottom: var(--space-smaller);
}
.works__item:hover .works__item__content, .works__item:focus .works__item__content {
  opacity: 1;
  line-height: var(--line-height);
}
.works__item:hover .works__item__thumbnail, .works__item:focus .works__item__thumbnail {
  border-color: var(--color-accent);
}
.works__item:hover:after, .works__item:focus:after {
  background-color: var(--color-interactive);
}

.bigger-than-tablet .block.block--works {
  padding: var(--space-bigger);
}
.bigger-than-tablet .block.block--works > .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--space-big);
  row-gap: var(--space-big);
}
.bigger-than-tablet .works__item {
  margin-bottom: 0;
}

.work-modal {
  font-size: 0.8em;
}
.work-modal .subtitle {
  text-transform: uppercase;
}
.work-modal p {
  margin-bottom: 0.6em;
}
.work-modal h2 {
  margin-bottom: 0.4em;
}
.work-modal em::before,
.work-modal h2::before {
  background: var(--color-accent-lightest);
}
.work-modal__thumbnail {
  max-width: 100%;
  height: auto;
  filter: saturate(0.6);
  mix-blend-mode: multiply;
  margin: 0;
  margin-bottom: 0.4em;
}
.work-modal__thumbnail img,
.work-modal__thumbnail picture {
  max-width: 100%;
  height: auto;
}

.block.block--decoration {
  --stroke-color: var(--color-accent-lighter);
  --stroke-color-hover: var(--color-accent-light);
  --logo-color: var(--white);
  --text-background-color: #7db5f4;
  --funny-part-height: 0.6em;
  --background-height: 4em;
  display: none;
  padding: 0;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  text-align: center;
  font-size: calc(0.8 * var(--font-size-hero));
  line-height: 1;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}
.block.block--decoration .loader-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-content: center;
}
.block.block--decoration .funny-part {
  height: var(--funny-part-height);
}

.block--decoration--is-reverted {
  --stroke-color: var(--color-interactive-lighter);
  --stroke-color-hover: var(--color-interactive);
  --background-color: var(--white);
  --logo-color: var(--color-interactive-dark);
}

.block--decoration .hashtag-background {
  background-color: var(--text-background-color);
  height: var(--background-height);
}

.block--decoration:hover .decoration__line {
  --stroke-color: var(--stroke-color-hover);
}

.loader {
  width: auto;
  height: 2em;
  overflow: visible;
  padding-top: 1em;
  padding-bottom: 1em;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.loader > * {
  fill: var(--color-accent-light);
}

.bigger-than-mobile .block.block--decoration {
  display: block;
}

.footer {
  padding: 3.6rem 2.4rem;
  font-size: calc(var(--size-200) * 1);
  text-align: center;
  background: var(--color-interactive);
  border-bottom: var(--border-bottom-size) solid var(--color-accent);
  color: var(--color-accent-lighter);
}
.footer p {
  font-size: inherit;
}
.footer p + p {
  margin-top: 2.4rem;
}
.footer ::selection {
  background-color: var(--color-accent-lighter);
  color: var(--color-interactive);
}
.footer a {
  color: inherit;
}
.footer > * + * {
  margin-top: 0.8em;
}
.footer code {
  font-size: 0.8em;
  display: inline-block;
  padding: 0.1em 0.2em;
  background-color: var(--content-light);
  user-select: all;
}
.footer .loader {
  padding-top: 0.5em;
  padding-bottom: 0;
}
.footer .dev-stuff {
  display: none;
}

/*# sourceMappingURL=index.css.map */