@font-face
{
    font-family: MajorMonoDisplay;
    src: url("../ttf/MajorMonoDisplay-Regular.ttf");
}

*
{
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  color: white;
  font-family: MajorMonoDisplay, sans-serif;
}

body
{ 
  width: 100%; 
  height: calc(10000px + 200vh); 
  background-color: #000;
}

canvas 
{ 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100dvh; 
  z-index: 1;
}

a
{
  text-decoration: none;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.3;
}

body > div
{
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100dvh;
  transform-origin: left top;
}

div > h1
{
  font-size: 10vw;
  font-weight: normal;
  white-space: nowrap;
  line-height: 1.2;
}

div.fullname
{
  left: 2rem;
  top: 2rem;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: all 900ms ease;
  opacity: 0;
}

div.fullname.show
{
  opacity: 1;
  clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%);
}


div.tasarimci > h1, div.gelistirici > h1
{
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -85%);
  font-size: 12vw;
}



div.scroll
{
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  transition: all 900ms ease;
  opacity: 0;
}

div.scroll.show
{
  opacity: 1;
  clip-path: polygon(0% 0%, 200% 0%, 100% 100%, 0% 100%);
}

div.scroll > div
{
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

@keyframes opacity
{
  0% { opacity: 0; transform: rotate(90deg); }
  50% { opacity: 1; transform: rotate(90deg) translateX(50%); }
  100% { opacity: 0; transform: rotate(90deg); }
}

div.scroll > div::before
{
  transform-origin: center center;
  position: absolute;
  content: ">";
  font-size: 2rem;
  margin-left: 0.9rem;
  animation: opacity 2s linear infinite;
}

@keyframes spin
{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

div.scroll > div > div.circle
{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px dashed #fff;
  animation: spin 6s linear infinite;
}

div.scroll > div > p
{
  font-size: 1.25rem;
  line-height: 1.4;
}





div.schekiller > img
{
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: -25%;
}




div.images
{
  position: fixed;
  display: flex;
  flex-direction: column;
  will-change: transform;
  opacity: 0;
  height: fit-content;
  width: 100%;
}

div.images img
{
  width: 100vw;
  height: 100vw;
  object-fit: contain;
  flex-shrink: 0;
}


body > div.recentWorks
{
  padding: 2rem;
  padding-top: 100vh;
  display: none;
  opacity: 0;
  flex-direction: column;
  gap: 0.5rem;
  position: fixed;
  z-index: 3;
  will-change: transform;
  height: fit-content;
}

div.recentWorks > div
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px dashed #666;
}

div.recentWorks > div > a
{
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-basis: 75%;
}

div.recentWorks > div > a > img
{
  width: 300px;
}


div.recentWorks > div:last-child,
div.recentWorks > div:last-child:hover
{
  padding-top: 3rem;
  border-bottom: none;
}

div.recentWorks > div:hover
{
  border-bottom: 1px dashed #fff;
}

div.recentWorks > div > h3
{
  font-size: 1.25rem;
  font-weight: normal;
}


@media screen and (max-width: 500px)
{
  a
  {
    font-size: 1.5rem;
  }
  div > h1
  {
    font-size: 25vw;
  }

  div.schekiller > img
  {
    top: -18%;
  }

  body > div.recentWorks
  {
    padding-top: 50vh;
  }

  div.recentWorks > div
  {
    flex-direction: column;
    flex-flow: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
  }

  div.recentWorks > div > a
  {
    flex-direction: column;
    align-items: flex-start;
  }

  div.recentWorks > div > a > img
  {
    width: 100%;
  }

  div.recentWorks > div > h3
  {
    font-size: 0.85rem;
  }

}