body {
  margin: 0;
  background: #6e93af url('floor.jpg');
  background-size: cover;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

nav {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 10;
  background-color: #6e93af;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  text-decoration: underline;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Floor images layer beneath everything */
.floor.items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Absolutely position each floor image */
.floor img {
  position: absolute;
  width: 80px;
  transition: transform 0.3s ease;
}

/* Center the box over the floor */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 90vh;
  z-index: 1;
  cursor: pointer;
}

/* The box image */
.box-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.3);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* DVD collection shows above box image */
.dvd-collection {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -50%);
  width: 45%;
  height: 50%;
  overflow-y: visible;
  display: grid;
  grid-template-columns: repeat(8, auto);
  gap: 0;
  z-index: 2;
}

/* DVD item and hover */
.dvd-poster {
  width: 50px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.dvd-poster:hover {
  transform: scale(4);
  z-index: 10;
}

.on-floor {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* All images will be absolutely positioned */
.floor img {
  position: absolute;
  width: 100px; /* adjust as needed */
  transition: transform 0.3s ease;
  filter: drop-shadow(2px 2px 8px #222);
}

/* Random-ish placement */
.floor img.cdplayer {
  top: 1%;
  left: 1%;
  width:300px;
  height: auto;
}

.floor img.madmens1 {
  top: 60%;
  left: 70%;
  width:260px;
  transform: rotate(-12deg);
  height: auto;
}

.floor img.theocs1 {
  top: 52%;
  left: 84%;
  width:130px;
  transform: rotate(-10deg);
  height: auto;
}

.floor img.theocs2 {
  top: 66%;
  left: 88.6%;
  width:130px;
  transform: rotate(8deg);
  height: auto;
}

.floor img.hanger {
  top: 66%;
  left: -4%;
  width:320px;
  transform: rotate(-40deg);
  height: auto;
}

.floor img.tee {
  top: 66%;
  left: 14%;
  width:360px;
  transform: rotate(0deg);
  height: auto;
}

.floor img.journal {
  top: 28%;
  left: 70%;
  width:192px;
  transform: rotate(4deg);
  height: auto;
}

.floor img.nfr {
  top: -4%;
  left: 19.6%;
  width: 160px;
  transform: rotate(20deg);
}

.floor img.bobdylan {
  top: 18%;
  left: 17.4%;
  width: 200px;
  transform: rotate(-10deg);
}

.floor img.lipstick {
  top: 74%;
  left: 64%;
  width: 160px;
  transform: rotate(-38deg);
  filter: drop-shadow(1px 1px 4px #222) !important;
}

.postit-note {
  position: absolute;
  top: 64%;   /* adjust */
  left: 80.6%; /* adjust */
  width: 100px;
  height: 100px;
  background: #FFFF99;
  color: #333;
  padding: 0.8rem;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  font-family: "Gloria Hallelujah", cursive;
  display: flex; /* enables flexbox */
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  transform: rotate(-4deg);
  border: 1px solid #d6d6a8;
  z-index: 0;
}