@charset "utf-8";
/*@font-face {
font-family: "ivyora-display", serif;
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "ivyora-display", serif;
font-weight: 500;
font-style: italic;
}

@font-face{
font-family: "dm-sans", sans-serif;
font-weight: 400;
font-style: normal;
}*/

body {
	margin: 0;
  padding: 0;
  overflow-x: hidden;
}

:root { --col-w: 240px; --gap: 12px; }              /* desktop (over 1000px) */
@media (min-width: 501px) and (max-width: 1000px) {  /* tablet */
  :root { --col-w: 200px; --gap: 10px; }
}
@media (max-width: 500px) {                          /* mobile */
  :root { --col-w: 150px; --gap: 8px; }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: #ffffff; }

/* ---------- Menu ---------- */
.menu {
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  justify-content: space-around;
  background: white;
  padding: 1%;
  list-style: none;
  font-family: "ivyora-display", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: #231F20;
  z-index: 20;
}

a {
  color: #231F20;
  text-decoration: none;
  transition: 0.4s ease;
}
a:hover {
  color: #5b79ff;
  transition: 0.4s ease;
}

.viewport {
  position: fixed; inset: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.viewport.dragging { cursor: grabbing; }

.world { position: absolute; left: 0; top: 0; will-change: transform; }

.item {
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  background: #f0f0f0;
}
.item img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform .5s ease;
}
.item:hover img { transform: scale(1.05); }