body {
  background-image: url("background1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.page-layout {
  position: relative;
  width: 100%;
  height: 100vh;
}

.handbag-image {
  position: absolute;
  left: -170px;
  top: 100px;
  width: 900px;
  transform: rotate(35deg);
}

.logo-image {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 700px;
  transform: rotate(20deg);
}

/* CAMERA */

.camera-image {
  position: absolute;
  left: 430px;
  top: 60px;
  width: 430px;
  display: block;

  transform: rotate(-30deg);

  filter: drop-shadow(6px 6px 5px rgba(0,0,0,0.25));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.camera-image:hover {
  transform: rotate(-30deg) scale(1.08) translateY(-8px);

  filter: drop-shadow(12px 12px 10px rgba(0,0,0,0.75));

  cursor: pointer;
}

/* HEADPHONES */

.headphones-image {
  position: absolute;
  left: 230px;
  top: 300px;
  width: 190px;
  display: block;

  transform: rotate(20deg);

  filter: drop-shadow(6px 6px 5px rgba(0,0,0,0.25));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.headphones-image:hover {
  transform: rotate(20deg) scale(1.05) translateY(-10px);

  filter: drop-shadow(12px 12px 10px rgba(0,0,0,0.75));

  cursor: pointer;
}

/* KEYCHAIN */

.keychain-image {
  position: absolute;
  left: 450px;
  top: 200px;
  width: 460px;
  display: block;

  transform: rotate(12deg);

  filter: drop-shadow(6px 6px 5px rgba(0,0,0,0.25));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.keychain-image:hover {
  transform: rotate(12deg) scale(1.08) translateY(-8px);

  filter: drop-shadow(12px 12px 10px rgba(0,0,0,0.75));

  cursor: pointer;
}

/* NEWSPAPER / COFFEE / CIGARETTES */

.coffee-cigarette-newspaper-image {
  position: absolute;
  right: 160px;
  bottom: 40px;
  width: 420px;
  display: block;

  transform: rotate(-6deg);

  filter: drop-shadow(6px 6px 5px rgba(0,0,0,0.25));

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.coffee-cigarette-newspaper-image:hover {
  transform: rotate(-6deg) scale(1.08) translateY(-8px);

  filter: drop-shadow(12px 12px 10px rgba(0,0,0,0.75));

  cursor: pointer;
}

/* BOTTOM NAVIGATION */

.bottom-nav {
  position: absolute;
  left: 90px;
  bottom: 18px;

  display: flex;
  align-items: center;
  gap: 14px;

  font-family: "Arimo", sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
}

.nav-link {
  color: #ffde59;
  text-decoration: none;

  text-shadow:
    2px 2px 0px #3D0D00;

  padding-bottom: 4px;
  border-bottom: 2px solid transparent;

  transition:
    filter 0.2s ease,
    border-bottom 0.2s ease,
    box-shadow 0.2s ease;
}

.nav-bar {
  color: #FFCC00;

  text-shadow:
    2px 2px 0px #590000;
}

/* TEXT HOVER */

.nav-link:hover {
  filter: brightness(1.15);

  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}

/* IMAGE HOVER HIGHLIGHTS */

body:has(.headphones-image:hover) .music-nav {
  filter: brightness(1.15);
  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}

body:has(.camera-image:hover) .pitcher-nav {
  filter: brightness(1.15);
  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}

body:has(.coffee-cigarette-newspaper-image:hover) .column-nav {
  filter: brightness(1.15);
  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}

body:has(.handbag-image:hover) .reblog-nav {
  filter: brightness(1.15);
  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}

body:has(.keychain-image:hover) .naarm-nav {
  filter: brightness(1.15);
  border-bottom: 2px solid #FFCC00;
  box-shadow: 2px 2px 0px #590000;
}