html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

@font-face {
  font-family: "MuseoSans";
  src: url("../css/fonts/MuseoSans-100.woff2") format("woff2"), url("../css/fonts/MuseoSans-100.woff") format("woff");
  font-weight: 100;
}
@font-face {
  font-family: "MuseoSans";
  src: url("../css/fonts/MuseoSans-300.woff2") format("woff2"), url("../css/fonts/MuseoSans-300.woff") format("woff");
  font-weight: 300;
}
@font-face {
  font-family: "MuseoSans";
  src: url("../css/fonts/MuseoSans-500.woff2") format("woff2"), url("../css/fonts/MuseoSans-500.woff") format("woff");
  font-weight: 500;
}
@font-face {
  font-family: "MuseoSans";
  src: url("../css/fonts/MuseoSans-700.woff2") format("woff2"), url("../css/fonts/MuseoSans-700.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Museo";
  src: url("../css/fonts/Museo-100.woff2") format("woff2"), url("../css/fonts/Museo-100.woff") format("woff");
  font-weight: 100;
}
@font-face {
  font-family: "Museo";
  src: url("../css/fonts/Museo-300.woff2") format("woff2"), url("../css/fonts/Museo-300.woff") format("woff");
  font-weight: 300;
}
@font-face {
  font-family: "Museo";
  src: url("../css/fonts/Museo-500.woff2") format("woff2"), url("../css/fonts/Museo-500.woff") format("woff");
  font-weight: 500;
}
@font-face {
  font-family: "Museo";
  src: url("../css/fonts/Museo-700.woff2") format("woff2"), url("../css/fonts/Museo-700.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Museo";
  src: url("../css/fonts/Museo-900.woff2") format("woff2"), url("../css/fonts/Museo-900.woff") format("woff");
  font-weight: 900;
}
body {
  cursor: url(../images/cursor.png) 25 20, pointer;
}

#mainCanvas:hover {
  cursor: url(../images/cursor-hov.png) 25 20, pointer;
}

body {
  background-color: #f6ecdb;
  position: relative;
}

nav {
  max-width: 1400px;
  width: 100%;
  padding: 20px 40px;
  margin: 0 auto;
  position: fixed;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
}
nav a img {
  max-width: 160px;
}
@media screen and (max-width: 768px) {
  nav {
    text-align: center;
  }
}

.container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 70px 100px 20px;
}
@media screen and (max-width: 768px) {
  .container {
    padding: 160px 60px 20px;
  }
}

.ground {
  width: 1200px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: -730px;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .ground {
    width: 80vw;
    bottom: -60%;
  }
}

.text {
  font-size: min(60px, 6.6666666667vw);
  padding-top: 40px;
  font-family: "Museo", sans-serif;
  position: relative;
  z-index: 2;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .text {
    font-size: min(32px, 7.8125vw);
  }
}
.text span {
  opacity: 1;
  transition: all 0.2s ease-in;
}
.text span.letterHidden {
  opacity: 0;
}

#text-small {
  text-align: center;
  opacity: 1;
  font-size: min(40px, 6.6666666667vw);
  font-family: "Museo", sans-serif;
  padding-top: 20px;
  transition: all 1.2s ease-in;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  #text-small {
    font-size: min(20px, 7.8125vw);
  }
}

#text-small.hidden {
  opacity: 0;
}

#mainCanvas {
  position: relative;
  max-width: 750px;
  width: min(70vh, 100%);
  z-index: 2;
}
#mainCanvas svg {
  position: relative;
  z-index: 2;
}

.animate #groups {
  animation: move 500ms forwards;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}
#groups circle {
  fill: #000000;
}

#groups path {
  display: none;
}

#letters rect {
  fill: transparent;
  stroke: none;
}

.animate #dots,
.animate #groups > circle {
  animation: fadeOut 0.3s ease-in forwards;
}

#glow,
#leontinka,
#star,
#ground {
  opacity: 0;
}

#heart {
  animation: heartbeat 2.5s infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.animate #_x31_6_00000127044144821917097880000004899616708162704062_,
.animate #_x34_6,
.animate #_x33_5,
.animate #_x34_4,
.animate #_x32_1,
.animate #_x31_1,
.animate #_x31_7 {
  animation: changeColor 0.3s ease-in forwards;
}
.animate #_x31_1 {
  animation-delay: calc(1400ms + 2500ms);
}
.animate #_x32_1 {
  animation-delay: calc(1200ms + 2500ms);
}
.animate #_x34_4 {
  animation-delay: calc(1000ms + 2500ms);
}
.animate #_x31_7 {
  animation-delay: calc(800ms + 2500ms);
}
.animate #_x31_6_00000127044144821917097880000004899616708162704062_ {
  animation-delay: calc(600ms + 2500ms);
}
.animate #_x34_6 {
  animation-delay: calc(400ms + 2500ms);
}
.animate #_x33_5 {
  animation-delay: calc(200ms + 2500ms);
}
.animate #star {
  animation: fadeIn 0.6s ease-in forwards, starshake 3.5s steps(2, start) infinite;
  transform-box: fill-box;
  transform-origin: center;
  animation-delay: calc(1800ms + 2500ms);
}
.animate #glow {
  animation: fadeIn 0.8s ease-in forwards, starshake 3.5s steps(2, start) infinite reverse;
  transform-box: fill-box;
  transform-origin: center;
  animation-delay: calc(1800ms + 2500ms);
}
.animate #leontinka {
  animation: fadeIn 0.7s ease-in forwards;
  animation-delay: calc(2500ms + 2500ms);
}

.ground {
  opacity: 0;
}

.animate ~ .ground {
  animation: fadeIn 0.5s ease-in forwards;
  animation-delay: calc(2200ms + 2500ms);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes changeColor {
  0% {
    fill: #000000;
  }
  100% {
    fill: #ffeb00;
  }
}
@keyframes starshake {
  0% {
    transform: scale(1) rotate(0);
  }
  25% {
    transform: scale(1.0083) rotate(5deg);
  }
  50% {
    transform: scale(1.0081) rotate(-5deg);
  }
  75% {
    transform: scale(1.0085) rotate(8deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.18);
  }
  10% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1.35);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.shakeOnce {
  animation: shakeOnce 0.8s;
}

@keyframes shakeOnce {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

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