/* base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, Arial, sans-serif;

  /* шпалери */
  background: url("images/wallpaper.png") center / cover no-repeat fixed;
}

/* HOME */
.home{
  position: fixed;
  top: 18px;
  left: 70px;
  z-index: 50;

  font-family: "Anton", system-ui, sans-serif;
  font-size: clamp(15px, 3.6vw, 34px);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: rgba(225, 202, 214, 0.8);
  /*text-shadow: 2px 6px 12px rgba(0,0,0,0.25);*/
}
.home:hover {
  color: rgba(222, 132, 178, 0.8);
}

/* сцена */
.scene{
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* “стіл” знизу */
.table{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(110px, 16vh, 190px);
  background: url("images/table.png") center bottom / cover no-repeat;
  z-index: 5;
}

/* клікабельні рамки */
.item{
  position: absolute;
  z-index: 10;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}
.item img{
  display: block;
  width: 100%;
  height: auto;
}
.item:active{
  transform: scale(0.97);
  filter: brightness(1.02);
}

/* Розкладка 3 рамок як на скріні (відсотки + адаптив по ширині) */
.item-linkedin{
  width: min(32vw, 320px);
  left: 7vw;
  top: 18vh;
}
.item-gmail{
  width: min(28vw, 280px);
  left: 50%;
  transform: translateX(-50%);
  top: 10vh;
}
.item-instagram{
  width: min(32vw, 320px);
  right: 7vw;
  top: 18vh;
}

/* губи-телефон по центру, на стику зі столом */
.lips{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(clamp(70px, 9vh, 110px) - 150px); /* щоб сиділо “на столі” */
  width: min(36vw, 360px);
  height: auto;
  z-index: 20;
  pointer-events: none;
}

/* ===== мобільна підстройка (без svh/dvh — тільки vh) ===== */
@media (max-width: 560px){

  .home{
    top: 14px;
    left: 14px;
    font-size: 26px;
  }

  .item-linkedin{
    width: min(40vw, 220px);
    left: 6vw;
    top: 33vh;
  }
  .item-gmail{
    width: min(36vw, 200px);
    top: 12vh;
  }
  .item-instagram{
    width: min(40vw, 220px);
    right: 6vw;
    top: 36vh;
  }

  .lips{
    width: min(56vw, 300px);
    bottom: 3vh;
  }

  .table{
    height: 18vh;
  }
}

/* дуже низькі екрани (щоб нічого не вилізло) */
@media (max-height: 680px){
  .item-linkedin{ top: 16vh; }
  .item-instagram{ top: 16vh; }
  .lips{ bottom: 7vh; }
}