@font-face {
   font-family: "Amulya-Variable";
   src: url("../medias/fonts/Amulya-Variable.ttf")
}

@font-face {
   font-family: "Mollie";
   src: url("../medias/fonts/Mollie-Glaston.otf")
}

*,
*::after,
*::before {
   margin: 0;
   padding: 0;
   cursor: none !important;
   box-sizing: border-box;
   font-family: 'Amulya', sans-serif;
   font-weight: 600;
   color: var(--color-black);
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased
}

body {
   margin: 0 auto;
   background-color: white
}

a {
   text-decoration: none
}

.d-none {
   display: none !important;
}

.cursor {
   position: fixed;
   width: 10px;
   aspect-ratio: 1/1;
   left: -5px;
   top: -5px;
   border-radius: 50%;
   pointer-events: none;
   transition: width .1s, height .1s, top .1s, left .1s;
}

.cursor.one {
   z-index: 100;
   background-color: white;
   mix-blend-mode: difference;
}

.cursor.two {
   z-index: 90;
   width: 50px;
   top: -25px;
   left: -25px;
   border: solid 1px rgba(0, 0, 0, 0.1);
   transition: all .05s linear;
}

.cursor.effect.one {
   width: 50px;
   left: -25px;
   top: -25px;
}

.cursor.effect2.one {
   width: 400px;
   left: -200px;
   top: -200px;
}

@keyframes move {

   0%,
   100% {
      transform: rotate(0) translateY(-5%)
   }

   25% {
      transform: rotate(-90deg) translateY(-5%)
   }

   50% {
      transform: rotate(180deg) translateY(-5%)
   }
}

@keyframes scale {

   0%,
   100% {
      transform: rotate(0) scale(0.95)
   }

   25% {
      transform: rotate(-25deg) scale(1.05)
   }

   50% {
      transform: rotate(25deg) scale(1)
   }
}

.buble {
   z-index: 5
}

.buble i {
   width: 100%;
   aspect-ratio: 1/1;
   box-shadow: 15px 15px 55px rgba(0, 0, 0, 0.05);
   position: relative;
   display: block;
   border-radius: 50%;
   background: linear-gradient(127deg, #00b7ff 20%, #2600ff);
   enable-background: new 0 0 1040 205.1;
   fill-rule: evenodd;
   clip-rule: evenodd
}

@media screen and (max-width: 1560px) {
   .buble {
      display: none
   }
}

span.b-text {
   font-weight: bold;
   text-transform: uppercase;
   opacity: .1
}

h1,
h2,
h3 {
   font-family: "Mollie"
}

h3 {
   font-size: 5em;
   font-weight: normal
}

.l-content {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: 1fr;
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   justify-items: stretch;
   align-items: stretch;
   z-index: 2;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
}

.l-content .v-l {
   border-right: solid 1px rgba(127, 127, 127, 0.15)
}

.h-l {
   border: solid 1px rgba(127, 127, 127, 0.15);
   border-left: 0;
   border-right: 0
}

nav {
   position: fixed;
   z-index: 10
}

nav div.left-nav {
   position: fixed;
   width: auto;
   height: 100vh;
   margin-left: calc(10 * 0.5%)
}

@media screen and (max-width: 700px) {
   nav div.left-nav {
      margin-left: calc(10 * 0.1%)
   }
}

nav div.left-nav div.content {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   height: inherit;
   flex-direction: column
}

nav div.left-nav div.content a {
   font-size: 12px;
   opacity: .8;
   transform: rotate(-90deg);
   transition: all ease-in-out .2s;
   text-transform: uppercase;
   position: relative
}

nav div.left-nav div.content a.toogle {
   opacity: 1;
   color: #1a3bff;
}

nav div.left-nav div.content a.toogle:before {
   content: '•';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translate(-100%, 50%);
   transition: all ease-in-out .1s
}

nav div.left-nav div.content a.toogle:hover:before {
   top: 200%
}

nav div.left-nav div.content a:hover {
   opacity: 1
}

nav div.top-nav {
   position: fixed;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   align-content: center
}

nav div.top-nav div.side {
   display: flex;
   width: 50%
}

nav div.top-nav div.side.r {
   column-gap: 15%
}

nav div.top-nav div.side.r div.item {
   margin: 0
}

nav div.top-nav div.side.r div.item img {
   aspect-ratio: 1 / 1;
   width: 20px
}

nav div.top-nav div.side div.item {
   height: 55px;
   display: flex;
   margin: 0 25px;
   align-items: center
}

nav div.top-nav div.side div.item a {
   opacity: 0.75
}

nav div.top-nav div.side div.item a:hover {
   opacity: 1
}

nav div.top-nav div.side div.item span {
   text-decoration: none;
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase
}

header {
   position: relative
}

header .background {
   position: absolute;
   overflow-x: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 200vh;
   z-index: 1
}

header .background .buble {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10
}

header .background .buble:nth-child(1) {
   top: -5vh;
   left: 80vw;
   animation: move 20s forwards infinite;
   animation-delay: -6s
}

header .background .buble:nth-child(1) i {
   width: 25vw;
   aspect-ratio: 1/1
}

header .background .buble:nth-child(2) {
   top: 15vh;
   left: 75vw
}

header .background .buble:nth-child(2) i {
   width: 17vw;
   aspect-ratio: 1/1;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(30px)
}

header .background .buble:nth-child(3) {
   top: 70vh;
   left: 1vw
}

header .background .buble:nth-child(3) i {
   width: 15vw;
   aspect-ratio: 1/1;
   background: rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(30px)
}

header .background .buble:nth-child(4) {
   top: 70vh;
   left: -8vw;
   z-index: -1;
   animation: scale 20s forwards infinite;
   animation-delay: 0s
}

header .background .buble:nth-child(4) i {
   width: 22vw;
   aspect-ratio: 1/1
}

header .background div.complement {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center
}

header .background div.complement div.top-title {
   margin-left: calc(10 * 2%);
   margin-top: -25%;
   width: calc(10 * 1%);
   text-align: center
}

header .background div.complement div.top-title span {
   opacity: 0.1;
   letter-spacing: 5px;
   text-transform: uppercase
}

@media screen and (max-width: 1560px) {
   header .background div.complement div.top-title {
      margin-top: -50%
   }
}

@media screen and (max-width: 700px) {
   header .background div.complement div.top-title {
      margin-top: -100%
   }
}

header .background div.back-text {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center
}

header .background div.back-text h2 {
   font-size: 18vw;
   font-weight: normal;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0, 0, 0, .25);
   color: transparent;
   background: transparent;
   line-height: 0.8em;
   text-align: center;
   white-space: nowrap
}

@media screen and (max-width: 1560px) {
   header .background div.back-text h2 {
      font-size: 17vw
   }
}

@media screen and (max-width: 700px) {
   header .background div.back-text h2 {
      transform: rotate(-90deg);
      font-size: 25vw
   }
}

header .title {
   position: absolute;
   z-index: 2;
   height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center
}

header .title h1 {
   text-align: center;
   font-size: 10vw;
   font-weight: normal;
   line-height: 0.9em;
   z-index: 15;
   color: black;
   background: linear-gradient(-127deg, #00b7ff 20%, #2600ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent
}

header .title h1 span {
   font-family: inherit;
   font-size: .9em;
   font-weight: 100;
}

@media screen and (max-width: 1560px) {
   header .title h1 {
      font-size: 18vw
   }
}

@media screen and (max-width: 700px) {
   header .title h1 {
      font-size: 15vw
   }
}

main {
   height: auto;
   padding-top: 100vh;
   z-index: 4
}

main div.background {
   position: absolute;
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: calc(10 * 0.2%) auto
}

main div.background div.buble {
   z-index: 4;
   position: absolute
}

main div.background div.buble:nth-child(1) {
   aspect-ratio: 1 / 1;
   height: 50%
}

main div.background div.buble:nth-child(1) i {
   background: linear-gradient(127deg, #99a5ff 20%, #d0a2ff)
}

main div.background div.buble:nth-child(2) {
   left: 0;
   aspect-ratio: 1 / 1;
   height: 50%
}

main div.background div.buble:nth-child(2) i {
   background: linear-gradient(127deg, #ffe3b3 20%, #92DE8B)
}

main div.background div.buble:nth-child(3) {
   right: 0;
   aspect-ratio: 1 / 1;
   height: 50%
}

main div.background div.buble:nth-child(3) i {
   background: linear-gradient(127deg, #ffe3b3 20%, #92DE8B)
}

main div.s-content {
   z-index: 10;
   position: relative;
   scroll-snap-type: y mandatory
}

main div.s-content section {
   position: relative;
   scroll-snap-align: center
}

main div.s-content section.about-me {
   height: 100vh;
   border-bottom-color: transparent
}

main div.s-content section.about-me div.content {
   position: relative;
   height: 100%;
   margin: 0 calc(10 * 2%);
   align-items: center;
   display: flex
}

main div.s-content section.about-me div.content div.text {
   position: absolute;
   width: 100%;
   right: 0;
   bottom: 5vh;
   top: 5vh;
   padding: 15px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

@media screen and (max-width: 1560px) {
   main div.s-content section.about-me div.content div.text {
      position: relative;
      padding: 0
   }
}

main div.s-content section.about-me div.content div.text .title-block {
   position: relative;
   z-index: 100;
   left: 25%;
   mix-blend-mode: color;
   color: black
}

@media screen and (max-width: 1560px) {
   main div.s-content section.about-me div.content div.text .title-block {
      left: 0%
   }
}

main div.s-content section.about-me div.content div.text .title-block h3 {
   font-size: 8em;
   white-space: nowrap
}

@media screen and (max-width: 1560px) {
   main div.s-content section.about-me div.content div.text .title-block h3 {
      font-size: 5em
   }
}

main div.s-content section.about-me div.content div.text .text-block {
   width: 50%;
   left: 50%;
   position: relative;
   padding: 0 5rem;
   z-index: 10
}

@media screen and (max-width: 1560px) {
   main div.s-content section.about-me div.content div.text .text-block {
      padding: 0;
      width: 100%;
      left: 0%
   }
}

main div.s-content section.about-me div.content div.text .text-block p {
   font-weight: normal;
   width: 80%;
}

main div.s-content section.about-me div.content div.image {
   background-image: url("../medias/assets/snap-min.webp");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
   filter: saturate(0%);
   width: 50%;
   height: 80%;
   position: relative;
   z-index: 5
}

@media screen and (max-width: 1560px) {
   main div.s-content section.about-me div.content div.image {
      width: 50%;
      height: 100%;
      position: absolute;
      right: calc(10 * -5%)
   }
}

@media screen and (max-width: 700px) {
   main div.s-content section.about-me div.content div.image {
      display: none;
   }
}

main div.s-content section.skills {
   display: flex;
   align-items: center;
}

main div.s-content section.skills div.content {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   overflow: hidden;
   margin-left: calc(10 * 2%);
   padding: 50px 0
}

main div.s-content section.skills div.content p {
   width: max-content;
   display: block;
   text-transform: uppercase;
   margin: 10px 0;
   font-size: 2em;
   color: transparent;
   position: relative;
   top: -50px;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0, 0, 0, .35)
}

main div.s-content section.skills div.content p>span {
   color: black;
   opacity: .8
}

main div.s-content section.skills div.content p.to-left {
   align-self: flex-end
}

main div.s-content section.skills div.content p.to-right {
   align-self: flex-start
}



/* ! footer */

footer {
   margin-left: calc(10 * 2%);
   z-index: 3;
   position: relative;
}

footer h3 {
   font-size: 12vw;
   text-align: center;
   font-weight: normal;
   line-height: 0.9em;
   z-index: 15;
   color: black;
   background: linear-gradient(-127deg, #00b7ff 20%, #2600ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

footer ul {
   display: flex;
   flex-direction: row;
   list-style-type: none;
   justify-content: space-between;
   padding: 50px;
}

footer ul li {
   text-transform: uppercase;
   color: rgba(0, 0, 0, 0.5);
   transition: all ease-in-out .2s;
}

/* ! works */

div.work {
   margin-left: calc(10 * 2%);
   z-index: 3;
   position: relative;
}

div.work h3 {
   font-size: 12vw;
   text-align: left;
   margin: 100px 0;
   font-weight: normal;
   line-height: 0.9em;
   z-index: 15;
   color: black;
   background: linear-gradient(-127deg, #00b7ff 20%, #2600ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

div.work span.overlay {
   font-family: 'Mollie';
   font-size: 35vw;
   font-weight: normal;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0, 0, 0, .25);
   color: transparent;
   background: transparent;
   text-align: center;
   white-space: nowrap;
   position: absolute;
   top: calc(-35vw / 2);
   left: -20%;
}

div.work>div.content .images {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 50px;
   width: 87.5%;
   justify-content: space-between;
   align-items: center;
   position: relative;
   margin: 60px 0;
}

div.work>div.content .images.left {
   flex-direction: row-reverse;
}

div.work>div.content .images.left>div.text {
   text-align: left;
}

div.work>div.content .images>div.text {
   text-align: right;
}

div.work>div.content .images>div.text p {
   margin: 10px 0;
   font-size: 14px;
   opacity: 0.5;
   font-weight: 100;
   letter-spacing: 1px;
   line-height: 2em;
   margin-bottom: 25px;
}

div.work>div.content .images>div.text>div.softs {
   display: flex;
   flex-direction: row;
   margin: 15px 0;
   column-gap: 15px;
}

div.work>div.content .images.right>div.text>div.softs {
   justify-content: flex-end;
}

div.work>div.content .images>div.text>div.softs span {
   opacity: 0.25;
   text-transform: uppercase;
}

div.work>div.content .images>div.text h4 {
   position: relative;
   text-transform: uppercase;
   z-index: 10;
   font-size: 5vw;
   line-height: 4.5vw;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0, 0, 0, .35);
   z-index: 15;
   color: transparent;
   margin-bottom: 25px;
}

div.work>div.content>.images>div {
   display: inline-block;
   width: 50% !important;
   position: relative;
}


div.work>div.content>div.images>div.img {
   display: flex;
   gap: 25px;
   flex-direction: column;
}

div.work>div.content>div.images>div.img a {
   position: relative;
   top: -10px;
   opacity: .5;
   text-align: right;
   display: block;
   right: 30px;
   transition: all ease .2s;
   font-size: .8em;
}

div.work>div.content>div.images>div.img a:hover {
   opacity: 1;
   transition: all ease .2s;
}

div.work>div.content>div.images>div.img img {
   width: 100%;
   height: auto;
   display: block;
}

img.ar169 {
   aspect-ratio: 16/9;
}

div.work>div.content>div.images>div.img.web {
   margin: 1vw;
}

div.work>div.content>div.images>div.img.web img {
   border-radius: 25px;
   border: solid 4px black;
   box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1);
}


div.work>div.content>div.images>div.img.web::before {
   position: absolute;
   content: "";
   width: 120px;
   height: 14px;
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
   left: calc(50% - 60px);
   background-color: black;
}


@media screen and (max-width: 1560px) {
   div.work>div.content .images {
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      position: relative;
      margin: 0;
      margin-top: 20vh;
   }

   div.work>div.content>.images>div {
      display: inline-block;
      width: 80% !important;
      position: relative;
   }

   div.work>div.content .images.left>div.text,
   div.work>div.content .images>div.text {
      text-align: center;
      width: 70%;
   }

   div.work>div.content .images.left {
      flex-direction: column;
   }

}