:root {
  color-scheme: dark;
  --poster-width: 941;
  --poster-height: 1672;
  --focus: #f0b323;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #030303;
}

body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.94)),
    url("assets/background.png") center top / min(100vw, 941px) auto repeat-y,
    #050505;
  overflow-x: hidden;
}

.page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  display: grid;
  justify-items: center;
  overflow-x: hidden;
}

.poster {
  position: relative;
  width: 100%;
  max-width: 941px;
  aspect-ratio: var(--poster-width) / var(--poster-height);
  overflow: hidden;
  background: url("assets/background.png") center top / 100% 100% no-repeat;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.86);
}

@supports (background-image: image-set(url("assets/background.webp") type("image/webp"))) {
  body {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.94)),
      image-set(url("assets/background.webp") type("image/webp")) center top / min(100vw, 941px) auto repeat-y,
      #050505;
  }

  .poster {
    background: image-set(url("assets/background.webp") type("image/webp")) center top / 100% 100% no-repeat;
  }
}

.section {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.top {
  top: 0;
  height: 39.952%;
}

.burger-art {
  top: 69.498%;
  height: 18.002%;
}

.footer-art {
  top: 87.5%;
  height: 12.5%;
}

.links,
.footer-links {
  position: absolute;
  inset: 0;
  margin: 0;
  font-style: normal;
  pointer-events: none;
  z-index: 2;
}

.button-link,
.footer-links a {
  position: absolute;
  display: block;
  border-radius: 999px;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 179, 35, 0.22);
}

.button-link {
  left: 11.48%;
  width: 77.58%;
  height: 5.862%;
  line-height: 0;
}

.button-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.button-link picture {
  display: block;
  width: 100%;
  height: 100%;
}

.whatsapp {
  top: 40.19%;
}

.menu {
  top: 46.41%;
}

.ifood {
  top: 52.57%;
}

.instagram {
  top: 58.73%;
}

.location {
  top: 64.89%;
}

.button-link:focus-visible,
.button-link:hover,
.footer-links a:focus-visible,
.footer-links a:hover {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
  box-shadow: 0 0 28px rgba(240, 179, 35, 0.7);
}

.phone {
  left: 25.7%;
  top: 89.25%;
  width: 27.6%;
  height: 3.1%;
}

.address {
  left: 25.7%;
  top: 92.25%;
  width: 23%;
  height: 3.1%;
}

.social {
  top: 91.05%;
  width: 5%;
  height: 3.1%;
}

.instagram-social {
  left: 61.2%;
}

.tiktok-social {
  left: 69.9%;
}

.facebook-social {
  left: 78.3%;
}

@media (max-width: 560px) {
  body {
    background:
      url("assets/background.png") center top / 100vw auto repeat-y,
      #050505;
  }

  @supports (background-image: image-set(url("assets/background.webp") type("image/webp"))) {
    body {
      background:
        image-set(url("assets/background.webp") type("image/webp")) center top / 100vw auto repeat-y,
        #050505;
    }
  }

  .poster {
    width: 100vw;
    height: max(calc(100vw * var(--poster-height) / var(--poster-width)), 100vh);
    height: max(calc(100vw * var(--poster-height) / var(--poster-width)), 100svh);
    max-width: 100vw;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .button-link:focus-visible,
  .button-link:hover,
  .footer-links a:focus-visible,
  .footer-links a:hover {
    outline-width: 2px;
    outline-offset: 2px;
  }
}