@charset "UTF-8";
/* CSS Document */
/* Planet 12 Styles Copyright 2092*/





 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
    background-image: url("../_img/nebula-stars-backgrounder.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #000;
    color: #fff;
    /* Creates enough vertical height so you can scroll and see the effect */
    min-height: 250vh; 
    padding: 15vh 5vw;
  }


.barlow-semi-condensed-thin {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-semi-condensed-extralight {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-semi-condensed-light {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-semi-condensed-regular {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-semi-condensed-medium {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semi-condensed-semibold {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-semi-condensed-bold {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-semi-condensed-extrabold {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-semi-condensed-black {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-semi-condensed-thin-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.barlow-semi-condensed-extralight-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.barlow-semi-condensed-light-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-semi-condensed-regular-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-semi-condensed-medium-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-semi-condensed-semibold-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.barlow-semi-condensed-bold-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.barlow-semi-condensed-extrabold-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.barlow-semi-condensed-black-italic {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 900;
  font-style: italic;
}


  .parallax-grid {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}

  .column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    will-change: transform;
    /* Links the animation directly to the vertical page scroll */
    animation-timeline: scroll(root block);
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  .card {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }

  .toplogo {
    background-image: url("../_img/toplogo.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
    display: block;
    height: 70px;
    position: fixed;
  top: 40px;   /* Pulls 10px above the parent's top edge */
    z-index: 1000;
    left: 100px;
    right: 0;
    width: 600px;   /* Required for auto margins to work */
  }

    /* ILLUSTRATION */


  .watermelon-guy {
    background-image: url("../_img/illustration/watermelon-guy.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
    display: flex;
  }


   /* DESIGN */


  .greenrater {
    background-image: url("../_img/design/greenrater.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
    display: flex;
  }
  .laan-xang {
    background-image: url("../_img/design/laan-xang.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
    display: flex;
  }




  /* Assign different speeds/directions to each of the 4 columns */
  .col-1 { animation-name: speed-slow; }
  .col-2 { animation-name: speed-normal; }
  .col-3 { animation-name: speed-fast; }
  .col-4 { animation-name: speed-reverse; }

  /* Keyframes control how far each column shifts from top to bottom of scroll */
  @keyframes speed-slow {
    from { transform: translateY(0px); }
    to   { transform: translateY(150px); }
  }

  @keyframes speed-normal {
    from { transform: translateY(100px); }
    to   { transform: translateY(-100px); }
  }

  @keyframes speed-fast {
    from { transform: translateY(250px); }
    to   { transform: translateY(-250px); }
  }

  @keyframes speed-reverse {
    from { transform: translateY(-100px); }
    to   { transform: translateY(200px); }
  }

  /* Responsive fallback for smaller screens */
  @media (max-width: 768px) {
    .parallax-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }