/* Responsive Full Background Image Using CSS
 * Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
*/
html, body {
  height: 100%;
  margin: 0;
}

:root {
  /* Base gap between adjacent links, and the extra gap added before/after
     the logo and the store link. Overridden smaller on mobile below so
     the spacing scales down along with the images instead of staying
     pinned to a fixed text line-height. */
  --link-gap: 10px;
  --logo-gap-extra: 20px;
  --store-gap-extra: 8px;
}

body {
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;

  position: relative;

  /* Center the .container both horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Use the real, dynamic mobile viewport height (accounts for the
     address bar showing/hiding) instead of the static 100% above */
  min-height: 100vh;
  min-height: 100dvh;
}

/* The background lives on a fixed-position layer instead of directly on
   body. body's own box height can be miscalculated during iOS Safari's
   address-bar show/hide animation, which leaves the background-color
   showing through as gray bars. A position:fixed layer always exactly
   matches the real visible screen instead, so it can't happen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  width: 100%;
}

.content {
  text-align: center;
  color: #ffffff;
  padding: 0 20px;
  box-sizing: border-box;
}

.content img {
  display: block;
  width: 100%;
  height: auto;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--link-gap);
  width: fit-content;
  margin: 0 auto;
}

.site-logo {
  max-width: 260px; /* was 350px */
  margin-bottom: var(--logo-gap-extra); /* on top of the flex gap = the larger logo->first-icon spacing */
}

.social-icon {
  max-width: 220px; /* was 300px */
}

.mbl-link {
  margin-top: var(--store-gap-extra); /* on top of the flex gap = the larger tiktok->store spacing */
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body::before {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(images/background-photo-mobile-devices.jpg);
  }

  .site-logo {
    max-width: 190px; /* was 245px */
  }

  .social-icon {
    max-width: 160px; /* was 210px */
  }

  :root {
    --link-gap: 8px;         /* was 14px - tighter gap between Instagram/TikTok/Modern Boldline */
    --logo-gap-extra: 12px;  /* was 14px */
    --store-gap-extra: 4px;  /* was 6px */
  }
}

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
.fade-in2 {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}