.site-wrapper{
  width: 1440px;
  margin: 0 auto;
  transform-origin: top center;
}

@media (max-width:1440px){
  .site-wrapper{
    transform: scale(calc(100vw/1440px*0.95));
  }
}

body {
  margin: 0;
  background: #fff;
  overflow-x: hidden;
}

html{
  scroll-behavior: smooth;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh; 
}

.title{
  position:absolute;
  top: 120px;
  left : 50%; 
  transform: translateX(-50%)rotate(-1deg);
  width: 900px;
}

.start-btn{
  position: absolute;
  top: 580px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.start-btn:hover{
  transform: translateX(-50%)scale(1.1);
}

/* About (top-left) */
.about {
  position: absolute;
  top: 25px;
  left: 50px;
  width: 100px;
}

/* Top-right star */
.top-star {
  position: absolute;
  top: 55px;
  right: 60px;
  width: 130px;
}

/* CDs → anchor bottom-left properly */
.cd {
  position: absolute;
  left: 20px;
  bottom: 5px;
  width: 360px;
}

.arrow {
  position: absolute;
  bottom: 57px;   /* 👈 SAME as pin */
  right: 150px;   /* 👈 left of pin */
  width: 310px;   /* slightly bigger */
  transform: rotate(10deg);
}

/* Pin → bigger and below arrow */
.pin1 {
  position: absolute;
  bottom: 37px;    /* 👈 not glued to edge */
  right: 55px;     /* 👈 some breathing space */
  width: 180px;    /* 👈 slightly bigger */
  transform: rotate(5deg);
}

.projects{
  position: relative;
  height: 200vh;
  background: #fff;
  border-top: 2px solid black;
}

.projects-title{
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
}

.folder{
  position: absolute;
  top: 80px;
  left: 120px;
  width: 110px;
  transform: rotate(-1deg);
}

.ascii-img{
  position: absolute;
  top: 240px;
  left: 70px;
  width: 610px;
  transform: rotate(-1deg);
}

.ascii-desc{
  position: absolute;
  top: 160px;
  right: 40px;
  width: 560px;
  transform: rotate(2deg);
}

.star2{
  position: absolute;
  top: 740px;
  right:70px;
  width: 140px;
}

.ray-title{
  position: absolute;
  top: 930px;
  left: 65px;
  width: 500px;
  transform: rotate(1deg);
}

.ray-desc{
  position: absolute;
  top:1070px;
  left: 60px;
  width: 920px;
  transform: rotate(1deg);
}

.ray-window{
  position: absolute;
  top: 1290px;
  right: 40px;
  width: 720px;
}

.cursor{
  position: absolute;
  top : 1640px;
  right: 100px;
  width: 60px;
  transform: rotate(2deg);
}

.xavier{
  position: absolute;
  top: 1400px;
  left: 120px;
  width: 175px;
}

.contact{
  position: relative;
  height: 100vh;
  background: #fff;
  border-top: 2px solid black;
}

.skills-title{
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
}

.skills-pc{
  position: absolute;
  top: 250px;
  left:300px;
  width: 820px;
}

.i-said{
  position: absolute;
  top: 75px;
  left: 75px;
  width: 130px;
}

.hein{
  position: absolute;
  top: 40px;
  right: 60px;
  width: 180px;
  transform: rotate(2deg);
}

.contact-title{
  position: absolute;
  top: 550px;
  left: 60px;
  width: 1150px;
  transform: rotate(1deg);
}

.github-title{
  position: absolute;
  top:730px;
  left : 60px;
  width: 650px;
  transform: rotate(1deg);
}

.sleep{
  position: absolute;
  top: 720px;
  right: 100px;
  width: 190px;
}