@font-face {
  font-family: damn;
  src: url(../../assets/Damn.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: openSans;
  src: url(../../assets/OpenSans-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Brinley;
  src: url(../../assets/Brinley.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: GTWalsheimPro;
  src: url(../../assets/GTWalsheimProBold.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: rokh;
  src: url(../../assets/Rokh-UltraBold.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}
body,
html {
  background-color: #000;
  transition: 1s ease;
  scroll-behavior: smooth;
  width: 100%;
}
body {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: inherit;
}
.noise {
  background-image: url(/assets/noise.gif);
  background-size: 100px;
  background-size: 20vmin;
  opacity: 0.1;
  height: 110vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
}
.loadingSection {
  position: fixed;
  z-index: 990;
  width: 100%;
  height: 100vh;
  background-color: #0c0c0c;
  opacity: 1;
  transition: all 0.2s linear;
  pointer-events: none;
}
.loadingSection > p {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
  color: #efe1d1;
  font-family: GTWalsheimPro, Arial, sans-serif;
  font-size: clamp(3rem, 30vw, 100rem);
  font-style: italic;
  white-space: nowrap;
  text-transform: uppercase;
}
.mainSec {
  overflow: hidden;
  height: 120vh;
  width: 100%;
  position: relative;
}
.header3D {
  position: absolute;
  top: 0;
  background-color: #0e0e0e;
  pointer-events: all;
  z-index: 1;
}
.headerVid {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #0e0e0e;
  pointer-events: none;
  opacity: 0.65;
  object-fit: cover;
}
#header {
  top: 0;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
  padding-top: 2vw;
  margin-bottom: 2vw;
  height: 12vh;
  text-transform: uppercase;
  font-family: openSans, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.3;
  font-size: clamp(1rem, 1.5vw, 100rem);
  color: #fff;
  position: relative;
  z-index: 10;
}
#header > p {
  padding: 5vw;
  position: relative;
  pointer-events: all;
  text-align: center;
}
#headerAboutMe:before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  height: 0;
  width: 0;
  background-color: #e1f361;
  color: #0e0e0e;
  transform: translate(-50%, 30%);
  pointer-events: none;
  transition: all 0.2s ease-out;
  margin-top: 3vh;
}
#headerAboutMe:hover:before {
  content: "Do you want to know me better?";
  width: 15vmax;
  height: fit-content;
}
#headerAboutMe::after {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 23%;
  height: 3px;
  width: 0;
  background-color: #e1f361;
  transition: all 0.2s ease-out;
}
#headerAboutMe:hover::after {
  height: 3px;
  width: 40%;
}
#headerBlog::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  height: 0;
  width: 0;
  background-color: #9bddf0;
  color: #0e0e0e;
  transform: translate(-50%, 30%);
  pointer-events: none;
  transition: all 0.2s ease-out;
  margin-top: 3vh;
}
#headerBlog:hover::before {
  content: "Some interesting things, games and puzzles!";
  width: 15vmax;
  height: fit-content;
}
#headerBlog::after {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 30%;
  height: 3px;
  width: 0;
  background-color: #9bddf0;
  transition: all 0.2s ease-out;
}
#headerBlog:hover::after {
  height: 3px;
  width: 40%;
}
#headerContact::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  height: 0;
  width: 0;
  background-color: #f24d2c;
  color: #0e0e0e;
  transform: translate(-50%, 30%);
  pointer-events: none;
  transition: all 0.2s ease-out;
  margin-top: 3vh;
}
#headerContact:hover::before {
  content: "instagram, twitter, linkedin, telegram, etc.";
  width: 15vmax;
  height: fit-content;
}
#headerContact::after {
  content: "";
  position: absolute;
  bottom: 30%;
  left: 23%;
  height: 3px;
  width: 0;
  background-color: #f24d2c;
  transition: all 0.2s ease-out;
}
#headerContact:hover::after {
  height: 3px;
  width: 40%;
}
#mainTextOverflow {
  width: 100%;
  height: 70%;
  position: absolute;
  top: 15vh;
}
#mainText {
  color: #fff;
  font-family: damn, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(8rem, 35vmin, 100vmin);
  letter-spacing: -2px;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 2vw;
  opacity: 1;
  position: relative;
  z-index: 10;
}
#mainText > span {
  padding: 0 1vw;
}
@media only screen and (min-width: 768px) {
  #mainText {
    display: none;
    opacity: 0;
  }
}
.SecendSection {
  width: 100%;
  padding-bottom: 20px;
  overflow: hidden;
  margin-top: -20vh;
  border-radius: 2vmax;
  background-color: #eae0d4;
  position: relative;
  z-index: 10;
  box-shadow:
    0 -50px 50px 0 rgba(0, 0, 0, 0.8),
    0 5px 50px 0 rgba(86, 86, 86, 0.8);
}
#mainTextSec2 {
  position: relative;
  z-index: 12;
  padding: 2vw;
  color: #ff2f2f;
}
#mainTextSecWorld {
  overflow: hidden;
  padding-top: 10vh;
}
#mainTextSecWorld > p {
  font-family: openSans, Arial, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 100rem);
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
}
#mainTextIliya {
  display: flex;
  padding-left: 5vw;
}
#mainTextSecName {
  overflow: hidden;
}
#mainTextSecName > h1 {
  font-family: GTWalsheimPro, Arial, sans-serif;
  font-size: clamp(5rem, 15vw, 100rem);
  line-height: 0.8;
  text-transform: uppercase;
  margin-left: -1vw;
}
#mainTextSecIM {
  overflow: hidden;
}
#mainTextSecIM > p {
  font-family: Brinley, Arial, sans-serif;
  font-size: clamp(2rem, 2vw, 100rem);
  font-style: italic;
  white-space: nowrap;
  margin-top: 60px;
  padding-left: 1vw;
}
#IAmDivSec {
  color: #401714;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 13;
}
#IAmDivSec br {
  content: " ";
  display: block;
  margin: 7px 0;
}
#IAmDivSec li {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: nowrap;
}
#IAmDivSec li::before {
  content: "╰";
  margin-right: 10px;
}
#IAmDivSec li > ul li::before {
  content: "╰";
  margin-right: 10px;
}
#IAmDivSec > div {
  height: auto;
  width: 33%;
  padding: 3vw;
  border-top: #222 1px solid;
  border-bottom: #222 1px solid;
  font-family: openSans, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  position: relative;
}
#IAmDivSec > div:nth-child(2) {
  border-right: #222 1px solid;
  border-left: #222 1px solid;
}
@media only screen and (max-width: 992px) {
  #IAmDivSec > div {
    width: 100%;
  }
  #IAmDivSec > div:nth-child(2) {
    border-left: none;
    border-right: none;
  }
  #IAmDivSec div {
    padding: 5vmin 3vw;
  }
}
.IAmDivSecInside > p:nth-child(1) {
  font-size: clamp(1.5rem, 1vw, 100rem);
  font-weight: 800;
  text-transform: uppercase;
  pointer-events: none;
}
.IAmDivSecInside > p:nth-child(2) {
  color: #7c7c7c;
  font-size: clamp(1rem, 0.8vw, 100rem);
  text-transform: uppercase;
  pointer-events: none;
  margin-bottom: 3vmin;
}
.IAmDivSecInside > div {
  font-size: clamp(0.8rem, 0.8vw, 100rem);
  margin-top: auto;
  pointer-events: none;
}
.designerDiv:before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
#productImg {
  position: absolute;
  top: 0;
  left: 50%;
  border: none;
  width: auto;
  height: 40vmin;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: #0c0c0c;
  transition: 0.3s ease-out;
}
#productImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 992px) {
  #productImg {
    height: 45vh;
    width: 100%;
  }
}
#viewText {
  user-select: none;
}
#ContainerSecProjects {
  background-color: #0c0c0c;
  color: #efe1d1;
  padding: 5vmin;
}
#ProjectsText {
  font-family: GTWalsheimPro, Arial, sans-serif;
  font-size: clamp(1.5rem, 2vw, 100rem);
  font-style: italic;
  white-space: nowrap;
  text-transform: uppercase;
}
#SecProjects {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  margin: 3vmin 3vmin 0 3vmin;
}
#SecProjects div {
  margin: 1vmin;
}
#SecProjects div:nth-child(1) {
  grid-column: span 3 / span 3;
  position: relative;
  height: 40vh;
  overflow: hidden;
}
#SecProjects div:nth-child(1) > a {
  display: block;
}
#SecProjects div:nth-child(1) p {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #000;
  font-family: rokh;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 100rem);
  padding: 10vmin 3vmin 3vmin 25vmin;
  z-index: 99;
  color: #f06;
  mix-blend-mode: difference;
  transition: color 20ms linear;
}
#SecProjects div:nth-child(1) > div {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3vmin;
  display: flex;
  flex-direction: column;
}
#SecProjects div:nth-child(1) > div a {
  background: hsla(0, 0%, 0%, 0.7);
  backdrop-filter: blur(0.5vmin);
  border: #000 solid 0.2vmin;
  font-family: openSans, Arial, sans-serif;
  font-size: clamp(0.8rem, 1vmin, 100rem);
  padding: 0.5vmin 1vmin;
  margin-top: 0.5vmin;
  border-radius: 3vmin;
  width: 20vh;
  display: flex;
  align-items: end;
  text-transform: uppercase;
}
#SecProjects div:nth-child(2) {
  grid-row-start: 2;
  position: relative;
}
#SecProjects div:nth-child(3) {
  grid-row-start: 2;
}
#SecProjects div:nth-child(4) {
  grid-row-start: 2;
}
#SecProjects div img {
  width: 100%;
  height: 100%;
  border-radius: 1vmin;
  object-fit: cover;
  transition: 0.2s ease;
  user-select: none;
}
@media only screen and (max-width: 800px) {
  #ProjectsText {
    padding: 10vmin 0 3vmin 0;
  }
  #SecProjects {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, auto);
  }
  #SecProjects div:nth-child(1) {
    grid-row-start: 1;
    height: 60vh;
  }
  #SecProjects div:nth-child(2) {
    grid-row-start: 2;
  }
  #SecProjects div:nth-child(3) {
    grid-row-start: 3;
  }
  #SecProjects div:nth-child(4) {
    grid-row-start: 4;
  }
  #SecProjects div:nth-child(4) {
    display: none;
  }
  #SecProjects div:nth-child(1) > div {
    width: 100%;
  }
  #SecProjects div:nth-child(1) p {
    font-size: clamp(3rem, 14vmin, 100rem);
    bottom: 7vmin;
    pointer-events: none;
  }
  #SecProjects div:nth-child(1) > div {
    flex-direction: row;
  }
  #SecProjects div:nth-child(1) > div a {
    width: 100%;
    justify-content: center;
    margin-right: 2vmin;
    padding: 1vmin 3vmin;
    border-radius: 0;
    background: hsla(0, 0%, 0%, 0.868);
    color: #fff;
  }
}
#SecLetsText {
  overflow: hidden;
  position: relative;
  z-index: 12;
  height: 27vmax;
  background-color: #ff2f2f;
  border-radius: 1vmax;
  margin: 2vmin 3vmin 0 3vmin;
  font-family: GTWalsheimPro, Arial, sans-serif;
  color: #efe1d1;
  text-transform: uppercase;
  line-height: 0.8;
}
#SecLetsText::before {
  content: "Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation / Let's storytell! / Let's engage! / Let's technomagic! / Let's marvel! / Let's give it a try! / Let's experiment! / Let's go artificial! / Let's innovate! / Let's get serious! / Let's have fun! / Let's entertain! / Let's build art / Let's weave a story! / Let's inject some fun / Let's give it a go / Let's dive into experiments / Let's create experiences / Let's cultivate innovation";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #87180246;
  font-family: openSans, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 100rem);
  line-height: 1.3;
  width: 120%;
  height: 90%;
  z-index: -1;
}
#SecLetsText > img {
  position: absolute;
  right: 5%;
  top: 5%;
  height: 25vmax;
  z-index: -1;
  transition: all 0.2s linear;
}
#SecLetsText > p:nth-child(2) {
  position: relative;
  font-size: clamp(1rem, 5vw, 100rem);
  padding-top: 3vmax;
  padding-left: 5vw;
}
#SecLetsText > p:nth-child(3) {
  position: relative;
  font-size: clamp(5rem, 12vw, 100rem);
  padding-left: 5vw;
}
#changeableTextRelative {
  position: relative;
  width: 100vw;
}
#changeableTextContainer {
  position: absolute;
  width: 80%;
  left: 10%;
  right: 10%;
  filter: url(#threshold);
}
#changeableText1,
#changeableText2 {
  position: absolute;
  width: 100%;
  display: inline-block;
  font-size: clamp(3rem, 10vw, 100rem);
  text-transform: uppercase;
}
.contactSection {
  position: relative;
  width: 100%;
  color: #d4d4d4;
  overflow: hidden;
}
#contactImage {
  text-align: center;
}
#contactImage > img {
  height: 18vmax;
  width: auto;
  object-fit: cover;
}
.contactSecTop {
  padding: 5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contactSecTop > div {
  padding-top: 10px;
  width: 30%;
}
.contactSecLinks > p {
  font-family: GTWalsheimPro, Arial, sans-serif;
  font-size: clamp(1rem, 1vw, 100rem);
  text-transform: uppercase;
  padding-bottom: 15px;
}
.contactSecLinks > a {
  font-family: openSans, Arial, sans-serif;
  font-size: clamp(1rem, 1vw, 100rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #d4d4d4;
  padding: 5px;
}
.contactSecLinks > a:hover {
  background-color: gray;
}
.MovingTextContainer {
  display: flex;
  align-items: center;
}
.MovingTextSingle {
  position: relative;
  white-space: nowrap;
  will-change: transform;
}
.MovingTexttext {
  font-size: clamp(5rem, 9vw, 100rem);
  display: inline-block;
  font-family: damn, sans-serif;
}
.LinkToAboutMe {
  font-family: openSans, Arial, sans-serif;
  padding-left: 5vw;
  font-size: clamp(1rem, 1vw, 100rem);
}
.LinkToAboutMe > a {
  text-decoration: underline;
}
@media only screen and (max-width: 768px) {
  #contactImage > img {
    width: 100%;
  }
  .contactSecTop > div {
    width: 100%;
  }
}