@font-face {
  font-family: Akira;
  src: url("/assets/fonts/Akira.otf");
}

:root {
  font-size: 10px;
}

body {
  color: white;
  overflow: hidden;
  box-sizing: content-box;
}

#main {
  background-image: radial-gradient(
      ellipse at bottom left,
      rgba(0, 0, 0, 0.65) 25%,
      transparent
    ),
    url("/assets/img/vecteezy_old-paper-texture-in-square-frame-for-cover-art-grungy__131.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

#logo-text {
  position: relative;
}

#logo-sign {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("/assets/img/logo-sign.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
}

#social-media a {
  height: 100%;
  border: solid 0.2rem transparent;
  border-radius: 10px;
}

#social-media a:hover {
  height: 100%;
  border-color: white;
}

#social-media a > img {
  min-width: 5rem;
  max-width: 10rem;
  opacity: 0.6;
}

.icon-instagram {
  width: 90%;
}

.contact-link:hover {
  text-decoration: none;
}

#button-booking,
#button-press {
  font-family: Akira, Arial, sans-serif;
  font-size: 3rem;
}

.gutter-horizontal-double {
  position: relative;
  width: 100%;
  height: 10rem;
}

.gutter-horizontal {
  position: relative;
  width: 100%;
  height: 5rem;
}

@media (max-width: 576px) {
  #logo-sign {
    background-size: cover;
    background-repeat: no-repeat;
  }

  #button-booking,
  #button-press {
    font-size: 2rem;
  }

  #social-media a > img {
    max-width: 6rem;
  }
}