/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative; /* normal flow */
  z-index: 1; /* content above the background */
}

.background-bg {
  position: fixed;
  inset: 0;
  background: url("https://sleepybardstudios.s3.amazonaws.com/images/background_bg.png") center / cover no-repeat;
  z-index: 0;
}
/* Paper image */
.paperbg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 1;
}

/* Header */
.header-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  z-index: 4;
}

/* Logo */
.logo-image {
  position: absolute;
  top: 40px;
  left: 70px;
  max-width: 20%;
  height: auto;
  z-index: 3;
}

/* Video frame */
.vidframe-image {
  position: relative;
  top: 170px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60%;
  height: auto;
  z-index: 2;
}

/* Divider */
.divider-gnomes-image {
  position: relative;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50%;
  height: auto;
  z-index: 3;
}

/* Navigation buttons */
.home-button,
.contact-button,
.about-button {
  position: fixed;
  left: 10px;
  z-index: 5;
}

.home-button {
  top: 50%;
  transform: translateY(-50%);
}

.contact-button {
  top: 520px;
}

.about-button {
  top: 650px;
}

.home-button img,
.contact-button img,
.about-button img {
  width: 200px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s;
}

.home-button img:hover,
.contact-button img:hover,
.about-button img:hover {
  transform: scale(1.1);
}