:root{
    --bg: #dcdada;
    --text: #1b1b1b;
    --temp: #dcdada;
    --light-text: #f5f5f5;
    --default-text: 2rem;
    --rough: #cfcfcf;
}
     
@font-face {
    font-family: 'sans-serif';
    src: url('../fonts/nm5.woff2') format('woff2');
}

@font-face {
    font-family: 'sans-serif light';
    src: url('../fonts/nm5.woff2') format('woff2');
}

@font-face {
  font-family: 'yass';
  src: url('../fonts/uu.woff2') format('woff2');
}


@font-face {
    font-family: 'sans-serif lighter';
    src: url('../fonts/nm4.woff2') format('woff2');
}

@font-face {
    font-family: 'serif';
    src: url('../fonts/tn5.woff2') format('woff2');
}


html.lenis, html.lenis body {
    height: auto;
  }
  
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }
  
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  
  .lenis.lenis-smooth iframe {
    pointer-events: none;
  }
  


*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

  .tint{
    opacity: 0.05;
    background: #514e00;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    pointer-events: none;
    top: 0;
    z-index: 999999999999;
  }
  
  a{
    color: inherit;
    text-decoration: none;
  }


  
  @keyframes bg-animation {
      0% { transform: translate(0,0) }
      10% { transform: translate(-5%,-5%) }
      20% { transform: translate(-10%,5%) }
      30% { transform: translate(5%,-10%) }
      40% { transform: translate(-5%,15%) }
      50% { transform: translate(-10%,5%) }
      60% { transform: translate(15%,0) }
      70% { transform: translate(0,10%) }
      80% { transform: translate(-15%,0) }
      90% { transform: translate(10%,5%) }
      100% { transform: translate(5%,0) }
  }

  .fade-in{
    opacity: 1;
    animation: fadeIn 0s ease forwards;
  }
  
  
  @keyframes fadeIn {
    0% {
        opacity: 1;
    
    }
  
  
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
  }
  

html {
    margin: 0;
    padding: 0;
    font-family: 'sans-serif';
    background-color: var(--bg);
    color: var(--text);
    font-size: calc(100vw / 1512 * 10);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
}


body {
  font-size: 2rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  width: 100vw;
  height: 100vh; 
  overscroll-behavior: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
        
#ios-scrolling {
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  behavior: smooth;
  overflow-y: auto;
}

::-webkit-scrollbar{
    width: 0;
  }
      

  img{
    height: 100%;
    width: 100%;
    object-fit: cover;

}

.bg {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    background: transparent url('../images/noise.png') repeat 0 0;
    background-repeat: repeat;
    animation: bg-animation .2s infinite;
    opacity: 1;
    visibility: visible;
    z-index: 10;
    pointer-events: none;
  }

  h1{
    display: none;
  }

  


  .turn-dark{
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: 9;
    background: #1b1b1b;
}

  .first{
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .big-name{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    font-size: 35rem;
  }

  .big-name p{
    text-align: right;
    line-height: 90%;
  }

  .profile-pic{
    position: absolute;
    height: 37rem;
    width: 35rem;

    bottom: 2rem;
    left: 2rem;
  }

  .nav{
    position: absolute;
    height: 10rem;
    top: 0;
    width: calc(100vw - 8rem);
    margin-left: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav2{
    position: fixed;
    top: 5rem;
    width: 10rem;
    margin-left: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    mix-blend-mode: difference;
    color: var(--temp);
    display: none;
  }

  .menu{
    overflow: hidden;
  }
  
  
  
  .menu .menu-move{
    transform: translateY(120%);
  
  }


.nav-left:hover .bottom-line3 {
  transform: scaleX(1);
}

.nav-left:not(:hover) .bottom-line3 {
  transform-origin: right;
}


  .nav-item{
    position: relative;
    cursor: pointer;
  }

  .nav-left{
    position: absolute;
    left: 0;
  }

  .nav-right{
    position: absolute;
    right: 0;
    cursor: pointer;
  }

  .nav-center{
    position: absolute;
    gap: 1.2rem;
    display: flex;
  }

  .about-mini{
    position: absolute;
    left: 63rem;
    font-size: 7rem;
    top: calc(39rem - 18.3rem);
    font-family: 'yass';
  }

  .about-mini p{
    width: 85rem;
  }

  sup{
    font-family: 'serif';
    font-size: 1.2rem;
  }

  .bottom-name{
    position: absolute;
    bottom: 1rem;
    left: 4rem;
    font-size: 30rem;
    line-height: 70%;
    width: 100vw;
  }

  .tag{
    position: absolute;
    top: -22rem;
    left: 10rem;
    background: var(--rough);
    height: 25rem;
    width: 25rem;
    border: 0.1rem dashed #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
  }

  .tag-display{
    position: absolute;
    top: 1.5rem;
    width: calc(100% - 3rem);
    height: 17rem;
    border: 0.1rem dashed #333;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tag-display img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }


  .lol{
    font-family: 'serif';
  }

  .tag-text{
    font-size: 1.5rem;
    position: absolute;
    bottom: 0rem;
    left: 1.5rem;
    line-height: normal;
    height: 6.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .random-circle{
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    height: 1rem;
    width: 1rem;
    background: var(--text);
    border-radius: 50%;
  }

  .mini-above{
    display: flex;
    gap: 0.7rem;
    align-items: center;
  }

  .tiny-dash{
    height: 0.1rem;
    width: 2rem;
    background: var(--text);
  }
  

  .bottom-contra{
    position: absolute;
    bottom: 4rem;
    right: 4rem;
    display: flex;
    gap: 3rem;
    flex-direction: column;
  }

  .contra-hint{
    width: 35rem;
  }
  .contra-hint p{
    text-align: justify;
  }



.bottom-line{
  position: absolute;
  width: 100%;
  bottom: -0.5rem;
  height: 0.1rem;
  background: var(--text);
  pointer-events: none;
}


.bottom-line1 {
  width: 100%;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bottom-line2 {
  width: 0%;
  transition: width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}



.bottom-line3 {
  width: 80%;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.strict{
  background: var(--temp);
}

.nav-item:hover .bottom-line3 {
  transform: scaleX(1);
}

.nav-item:not(:hover) .bottom-line3 {
  transform-origin: right;
}




.nav-right:hover .bottom-line1 {
  transform: scaleX(0);
}

.nav-right:hover .bottom-line2 {
  width: 100%;
}


.nav-right:not(:hover) .bottom-line1 {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; 
}

.nav-right:not(:hover) .bottom-line2 {
  width: 0%;
  transition: width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.contra-action{
  width: 23rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}

.contra-action:hover .bottom-line1 {
  transform: scaleX(0);
}

.contra-action:hover .bottom-line2 {
  width: 100%;
}


.contra-action:not(:hover) .bottom-line1 {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; 
}

.contra-action:not(:hover) .bottom-line2 {
  width: 0%;
  transition: width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.contra-arrow {
  height: 3rem;
  width: 1.7rem;
  overflow: hidden;
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.contra-arrow p {
  font-family: 'yass';
  text-align: center;
  position: absolute;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) ;
  white-space: nowrap;
}


.second-arrow{
  padding-right: 2rem;
}

.contra-arrow p:nth-child(2) {
  transform: translateX(-100%);
}

.contra-action:hover .contra-arrow p:nth-child(1) {
  transform: translateX(150%);
}

.contra-action:hover .contra-arrow p:nth-child(2) {
  transform: translateX(30%);
}

.featured-boss{
  height: 35rem;
  width: 100vw;
  background: var(--bg);
  display: flex;
  align-items: center;
  border-top: 0.1rem dashed #333;
}


.featured{
  position: absolute;
  left: 4rem;
  font-size: 17rem;
  bottom: 2rem;
}

.featured span{
  font-family: 'serif';
  font-size: 13.5rem;
}


.featured sup{
  font-size: 3.2rem;
}

.small-extra-text{
  height: 20rem;
  width: 100vw;
  background: var(--bg);
  display: flex;
  align-items: center;
  position: relative;
}

.small-extra-text2{
  height: 30rem;
  width: 100vw;
  background: var(--bg);
  display: flex;
  align-items: center;
  position: relative;
}

.the-extra-text{
  position: absolute;
  right: 4rem;
  font-size: 1.7rem;
  width: 30rem;
}

.the-extra-text p{
  text-align: justify;
}

.seo-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; 
  background: transparent;
  z-index: 10;
}


.box-boss{
  height: 78rem;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box{
  height: 100%;
  width: calc(100% - 8rem);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem dashed #333;
  background: var(--rough);
  cursor: pointer;
}

.na-d{
  pointer-events: none;
}


.dot{
  position: absolute;
  right: 2.5rem;
  top: 2.5rem;
  height: 1.5rem;
  width: 1.5rem;
  background: var(--text);
  border-radius: 50%;
}


.box-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 35rem;
  width: fit-content;
  overflow: hidden;
  border: 0.1rem dashed #333;
}


.is-safari .box-inner img {
  height: 35rem;
  width: 60rem;
}

.is-safari .box-inner2 img {
  width: 43rem;
}

.is-safari .box-inner3 img {
  width: 34rem;
}

.is-safari .box-inner4 img {
  width: 51.5rem;
}


.is-safari .up-next-inner img {
  width: 15.3rem;
}



.box-inner video {

  height: 35rem;
  width: fit-content;

}

.box-inner2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 25rem;
  width: fit-content;
  overflow: hidden;
  border: 0.1rem dashed #333;
}




.second-version{
  height: 10rem;
  width: 100vw;
  background: var(--bg);
  position: relative;
}

.two{
  position: absolute;
  left: 4rem;
}

.whats-used{
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.box-description{
  height: 48rem;
  width: 100vw;
  position: relative;
}

.desc-at-left{
  position: absolute;
  top: 12rem;
  left: 4rem;
}

.desc-at-right{
  position: absolute;
  top: 12rem;
  right: 4rem;
}

.desc-at-middle{
  position: absolute;
  top: 12rem;
  left: 50%;
  transform: translateX(-50%);
  width: 46rem;
}

.desc-at-middle p{
  line-height: 150%;
  text-align: justify;
}

.box-spacer{
  height: 20rem;
}

.parallaxy{
  height: 85rem;
  width: calc(100vw - 8rem);
  margin-left: 4rem;
  overflow: hidden;
  position: relative;
  filter: grayscale();
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #333;
}

.parallaxy img{
  height: 128%;
  position: absolute;
  top: -28%;

}

.boxy{
  height: 30rem;
  width: 40rem;
  background: var(--bg);
  z-index: 11;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  border: 0.1rem dashed #333;
}



.boxy .intro p{
  font-size: 6rem;
}




.contact-stuff{
  height: 6rem;
  width: calc(100% - 8rem);
  display: flex;
  align-items: center;
  border-top: 0.1rem dashed #333;
  border-bottom: 0.1rem dashed #333;
}

.contact-bar {
  position: absolute;
  left: 4rem;
}

.contact-bar input{
  width: 100%;
}

input {
  all: unset;
  box-sizing: border-box; 
  appearance: none;
  font-size: 1.5rem;
}

input::placeholder {
  color: var(--text);
  opacity: 0.7; 
  font-size: 1.5rem;
}

.bottom-footer{
  height: 110vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.botom-name{
  position: absolute;
  bottom: 1rem;
  left: 4rem;
  font-size: 30rem;
  line-height: 70%;
  width: 100vw;
}

.botom-name p{
  line-height: 70%;
}

.social-media{
  position: absolute;
  left: 103rem;
  top: calc(20rem);
}


.footer-pages{
  position: absolute;
  left: 63rem;
  top: calc(20rem);
}

.bottom-lists{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}



.link{
  position: relative;
  width: fit-content;
  cursor: pointer;
  font-size: 7rem;
  font-family: 'yass';
}


.bottom-line4 {
  width: 100%;
  position: absolute;
  transform: scaleX(0);
  bottom: -0.3rem;
  height: 0.3rem;
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.link:hover .bottom-line4 {
  transform: scaleX(1);
}

.link:not(:hover) .bottom-line4 {
  transform-origin: right;
}

.back-to-top{
  position: absolute;
  display: flex;
  gap: 0.5rem;
  bottom: 2.5rem;
  left: 63rem;
  font-size: 1.5rem;
  cursor: pointer;
}




.date-of{
  position: absolute;
  display: flex;
  gap: 0.7rem;
  bottom: 2.5rem;
  left: 103rem;
  font-size: 1.5rem;
}

.tag-text2{
  gap: 0.7rem;
}

.t-d2{
  filter: grayscale(20%);
}

.back-to-top-arrow {
  height: 1.5rem;
  width: 3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
  align-items: center;
}

.back-to-top-arrow p {
  font-family: 'yass';
  text-align: center;
  position: absolute;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) ;
  white-space: nowrap;
}


.third-arrow{
  padding-top: 1.2rem;
}

.back-to-top-arrow p:nth-child(2) {
  transform: translateY(100%);
}

.back-to-top:hover .back-to-top-arrow p:nth-child(1) {
  transform: translateY(-150%);
}

.back-to-top:hover .back-to-top-arrow p:nth-child(2) {
  transform: translateY(-20%);
}

.desc-at-right{
  font-family: 'serif';
}

/* case.html */

.page-top{
  height: 54rem;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.topic{
  font-size: 15rem;
  position: absolute;
  left: 4rem;
  bottom: 12rem;
}

.display{
  height: 70rem;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.inside-display{
  position: absolute;
  right: 4rem;
  height: 100%;
  width: 100rem;
  background: var(--rough);
  border: 0.1rem dashed #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask{
  height: fit-content;
}

.topic-number{
  position: absolute;
  bottom: 4rem;
  right: 4rem;
  overflow: hidden;
  font-family: 'serif';
}

 
.break{
  height: 24rem;
  width: calc(100vw - 8rem);
  margin-left: 4rem;
  background: var(--rough);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
  border: 0.1rem dashed #333;
}

.break p{
  position: absolute;
  left: calc(43rem + 4rem);
}

.exact-spacer{
  height: 15rem;
  position: relative;
}

.exact-spacer2{
  height: 10rem;
  position: relative;
}

.exact-spacer3{
  height: 4rem;
  position: relative;
}

.exact-spacer4{
  height: 5rem;
  position: relative;
}


.major-text{
  height: 35.8rem;
  width: 100vw;
  position: relative;
  display: flex;
  font-size: 7rem;
  font-family: 'yass';
  overflow: hidden;
}


.inside-major-text{
  height: fit-content;
  width: 100rem;
  position: absolute;
  right: 4rem;
  top: 0;
}

.title-right{
  height: 13rem;
  width: 100vw;
  position: relative;
}

.title-right2{
  height: 15rem;
  width: 100vw;
  position: relative;
}

.inside-title-right{
  position: absolute;
  left: calc(43rem + 4rem);
  font-size: 7rem;
}

.brief{
  height: 31rem;
  width: 100vw;
  position: relative;
}

.get-in-contact2{
  position: absolute;
  left: calc(43rem + 8rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.inside-brief{
  position: absolute;
  left: calc(43rem + 8rem);
  width: 53rem;
}

.inside-brief p{
  text-align: justify;
}


.up-next{
  position: relative;
  height: 50rem;
  font-size: 15rem;
  display: flex;
  align-items: center;
}

.u-n-topic{
  position: absolute;
  left: 4rem;
  cursor: pointer;
}

.bottom-line5 {
  width: 98%;
  position: absolute;
  transform: scaleX(0);
  bottom: -0.3rem;
  height: 0.5rem;
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.u-n-topic:hover .bottom-line5 {
  transform: scaleX(1);
}

.u-n-topic:not(:hover) .bottom-line5 {
  transform-origin: right;
}

.up-next-framer{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 4rem;
  height: 22rem;
  width: 32rem;
  background: var(--rough);
  border: 0.1rem dashed #333;
  opacity: 0;
  transition: 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  scale: 0.9;
}

.up-next-inner{
  position: absolute;
  height: 9rem;
  width: fit-content;
  overflow: hidden;
  border: 0.1rem dashed #333;
  display: flex;
  align-items: center;
  scale: 1.15;
  transform-origin: center;
  transition: 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* about-page */

.page-top-spacer{
  position: relative;
  width: 100vw;
  height: 20.75rem;
}

.continuation{
  height: 86rem;
  width: 100vw;
  position: relative;
}



.continuation-text{
  height: fit-content;
  position: absolute;
  left: 63rem;
  font-family: 'yass';
  font-size: 7rem;
  display: flex;
  flex-direction: column;
  gap: 8rem;
}


.a-random-image{
  height: 23rem;
  width: 100vw;
  position: relative;
}

.inside-a-random-image{
  height: 100%;
  width: 84rem;
  position: absolute;
  right: 4rem;
  background: var(--rough);
  overflow: hidden;
  border: 0.1rem dashed #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
}




.inside-title-right2{
  position: absolute;
  left: calc(63rem);
  font-size: 7rem;
}

.the-principles{
  height: 50rem;
  width: 100vw;
  position: relative;
}


/* circle */

.circle{
  height: 20rem;
  width: 20rem;
  border-radius: 50%;
  background: #e2e2e2;
  mix-blend-mode: difference;
}

.circle1{
  animation: left 1.5s infinite alternate ease-in-out;
}


@keyframes left {
  from{
    transform: translateX(35%);
  }

}


.circle2{


  animation: right 1.5s infinite alternate ease-in-out;
}



@keyframes right {
  from{
    transform: translateX(-35%);
  }

}


/* box */

.boxintus{
  height: 18rem;
  width: 18rem;
  background: #e2e2e2;
  mix-blend-mode: difference;
  transition: border-radius 0.3s  ease;
  animation: bounce 2s  1.5s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
}
40% {
  transform: translateY(-7.5rem);
}
60% {
  transform: translateY(-3.25rem);
}
}

.boxintus:hover{
  border-radius: 50%;
  animation: none;
}

/* eye */

.eye {
  background-color: transparent;
  width: 20rem;
  height: 20rem;
  border-radius: 0%;
  border-radius: 50%;
  position: relative;
  background: var(--text);
  overflow: hidden;
}
.pupil {
  background: var(--rough);
  opacity: 1;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin-left: -5rem;
  margin-top: -5rem;
  position: absolute;
  transition: all 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform-origin: center;
}

.the-principle-mobile-lisa{
  font-size: 10rem;
  margin-left: 6rem;
}

.animatetext{
  animation: text 1.5s infinite alternate ease-in-out;
  font-size: 7rem;
}

@keyframes text {
  0% {
      font-weight: 350;
  }



  100% {
      font-weight: 100;
  }
}


.what-was-done{
  width: 100vw;
  height: 18rem;
  position: relative;
}

.wrapping-foil{
  position: absolute;
  left: 67rem;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

.the-job{
  font-size: 3.5rem;
}

.get-in-contact-body{
  width: 100vw;
  height: 30rem;
  position: relative;
}

.get-in-contact{
  position: absolute;
  left: 67rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.item{
  transition: opacity 0.5s ease;
  opacity: 1;
  width: fit-content;
}

.item:hover{
  opacity: 0.5;
}

.minimap{
  position: fixed;
  left: 12rem;
  font-size: 7rem;
  top: 22rem;
  height: 1rem;
  width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; 
  z-index: 9;
}

.map-link{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 2rem;
  cursor: pointer;
}

.stroke{
  height: 0.1rem;
  width: 0rem;
  background: var(--text);
  transition: width 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}

.active-stroke{
  width: 2rem;
}


.grayscale{
  filter: grayscale(0.4);
}

/* projects page*/
.grid{
  height: 78rem;
  width: calc(100vw - 8rem);
  margin-left: 4rem;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 4rem;
}

.block{
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.inside-block{
  height: 70rem;
  width: 100%;
  background: var(--rough);
  border: 1px dashed #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-part{
  height: 8rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.right{
  font-family: 'serif';
}

.box-inner3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20rem;
  width: fit-content;
  overflow: hidden;
  border: 0.1rem dashed #333;
}


.box-inner3 video {
  height: 20rem;
  width: fit-content;

}


.box-inner4{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30rem;
  width: fit-content;
  overflow: hidden;
  border: 0.1rem dashed #333;
}

.whats-used2{
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}


.tiny-dash2{
  height: 0.1rem;
  width: 2rem;
  background: var(--text);
}

/* contact */


.contact-section{
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.right-hand-side{
  position: absolute;
  right: 0rem;
  height: calc(100%);
  width: 70rem;
  filter: grayscale();
  overflow:hidden;
  border: 0rem dashed #333;
}

.cvs {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


.left-hand-side{
  position: absolute;
  left: 0;
  height: 100%;
  width: 80rem;
}


.contact-block{
  position: absolute;
  left: 12rem;
  top: 18rem;
  height: 40rem;
  width: 70rem;
  display: flex;
  flex-direction: column;
}

.get-in-touch-word{
  height: 15rem;
  position: relative;
  font-size: 7rem;
}

.get-in-contact-body3{
  width: 100%;
  height: 30rem;
  position: relative;
}


.get-in-contact3{

  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: 4rem;

}


.dashed-statement{
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  gap: 0.7rem;
}

.notice-text{
  position: absolute;
}

.one-hunnid{
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;

}

.great-text{
  font-size: 15rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.great-text p{
  text-wrap: nowrap;
}

.mobile{
  display: none;
}



/* mobile styles */

.mobile{
  animation: fade-In 1.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  opacity: 0;
}



.nav-mobile{
  position: absolute;
  top: 10rem;
  width: 100vw;
  z-index: 999;

  color: var(--text);
}

.l-h-s{
  position: absolute;
  left: 7rem;
  overflow: hidden;
}

.l-h-s a{
  transform: translateY(100%);
  display: inline-block;
  animation: come-up 1.3s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes come-up {
  to {
    transform: translateY(0%);
  }
}


.r-h-s{
  position: absolute;
  right: 8rem;
  overflow: hidden;
}

.r-h-s a{
  transform: translateY(100%);
  display: inline-block;
  animation: come-up 1.3s 0.23s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.r-w{
    overflow: hidden;
    width: 100vw;
}

.r-w p{
  transform: translateY(100%);
  animation: come-up 1.5s 0.4s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
  line-height: 90%;
}

.first-spacer-mobile{
  height: 100rem;
  width: 100vw;
  position: relative;
}

.spacer-mobile{
  height: 10rem;
  width: 100vw;
  position: relative;
}


.fade-up{
  animation: fade-up 1.3s 0.5s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
  transform: translateY(8.5rem);
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translate(0);
  }
}



.the-principle-mobile{
  font-size: 15rem;
  margin-left: 6rem;
}

.lil-text-mobile{
  margin-left: 6rem;
  width: 120rem;
}

.lil-text-mobile p{
  font-family: 'sans-serif';
}


.lil-spacer-mobile{
  height: 20rem;
  width: 100vw;
  position: relative;
}


.projects-mobile{
  display: flex;
  flex-direction: column;
  gap: 22rem;
  width: calc(100vw - 12rem);
  margin-left: 6rem;
  height: fit-content;
}

.first-mobile{
  height: 140rem;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rem;
}



.project-mob-wrap{
  height: 238rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.project-display{
  height: 185rem;
  background: var(--rough);
  border: 0.1rem dashed #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
}


.project-display-p-f{
  height: 185rem;
  width: calc(100vw - 12rem);
  margin-left: 6rem;
  background: var(--rough);
  border: 0.1rem dashed #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}




.project-name-mobile{
  display: flex;
  justify-content: center;
  height: 63rem;
  align-items: center;
}

.yo-m{
  font-size: 15rem;
}

.yo-m2{
  font-size: 18rem;
}

.project-discover-mobile{
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 67rem;
}

@keyframes fade-In {
  0% {
      opacity: 0;

  }

  100% {
      opacity: 1;

  }
}


.box-inner-mobile{
  position: absolute;
  height: 35rem;
  width: fit-content;
  overflow: hidden;
  border: 0.01rem dashed #333;
  scale: 1.7;
  transform: translateZ(0);
}

.is-safari .box-inner-mobile img {
  height: 35rem;
  width: 60rem;
}


.is-safari .box-inner-mobile video {
  height: 35rem;
  width: 60rem;
}


.box-inner-mobile video {
  height: 35rem;
  width: 60rem;
}

.spacing-mobile{
  height: 50rem;
}


.spacing-mobile2{
  height: 75rem;
}


.b-f-t-mobile{
  height: 45rem;
  background: var(--rough);
  width: calc(100vw - 12rem);
  margin-left: 6rem;
  border: 0.1rem dashed #333;
  font-size: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
}


.profile-pic-mobile{
  height: 145rem;
  background: var(--rough);
  width: calc(100vw - 12rem);
  margin-left: 6rem;

  font-size: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale();
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}

.b-f-t-mobile2{
  height: 45rem;
  background: var(--rough);
  width: calc(100%);

  border: 0.1rem dashed #333;
  font-size: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


.c-i-mobile{
  height: 160rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2.1rem;
  position: relative;
}

.link-mobile{
  font-size: 15rem;
}

.move-m{
  text-align: left;
  margin-left: 8rem;
}


.desktop{
  animation: fade-In 1.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  opacity: 0;
}


@media (max-width: 900px) and (orientation: landscape) {
  .mobile{
    display: none;
 
  }
}


@media (max-width: 900px) and (orientation: portrait) {


  body {
    font-size: 5.7rem;
  }   
  
  


  .desktop {
    display: none;
}
 .mobile{
   display: block;

 }

 .change{
  scale: 3;
 }

 .back-to-top{
  left: 74rem;
  bottom: 12rem;
 }

 .tiny-dash{
  height: 0.1rem;
  width: 4rem;
  background: var(--text);
}


.whats-used{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6rem;
  font-size: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.7rem;
}


.the-principles{
  height: 100rem;
  width: 100vw;
  position: relative;
  transform: translateZ(0);
}


.inside-a-random-image{
  height: 100%;
  width: calc(100vw - 12rem);
  position: absolute;
  right: 6rem;
}


.circle{
  height: 35rem;
  width: 35rem;

}


.boxintus{
  height: 30rem;
  width: 30rem;
}


.eye {
  width: 40rem;
  height: 40rem;
}
.pupil {
  width: 20rem;
  height: 20rem;
}


.bg {
  width: 200%;
  height: 200%;
}

.dot{
  right: 4.5rem;
  top: 4.5rem;
  height: 3.5rem;
  width: 3.5rem;
}

  :root{
    --bg: #fff;
    --text: #333;
    --temp: #dcdada;
    --rough: #f5f5f5;
}

.tint{
  display: none;
}

}

@media (pointer: coarse) {
  html, body {
    overscroll-behavior: auto;
  }

  :root{
    --bg: #fff;
    --text: #333;
    --temp: #dcdada;
}

    
}