@font-face {
  font-family: "Futura Bk BT";
  src: url("../../src/fonts/FuturaBookBT.ttf");
}

@font-face {
  font-family: "Futura Md BT";
  src: url("../../src/fonts/Futura_20Medium_20BT.ttf");
}

* {
  font-family: "Futura Bk BT";
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #e10c2a -40.77%, #010101 121.34%);
  height: calc(100dvh - 57px);
  padding: 40px 0 17px 0;
  position: relative;
  margin: 0;
  overflow: hidden;
}

.form-inventory {
  padding: 20px;
}

.form-inventory input {
  margin-top: 20px;
}

.main-container {
  display: grid;
  justify-content: center;
}

.grand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.reload-button {
  position: absolute;
  right: 50px;
  display: none;
}

.reload-button a {
  text-decoration: none;
  cursor: pointer;
}

.reload-button button {
  all: initial;
  color: white;
  cursor: pointer;
}

.shadow {
  position: absolute;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  filter: blur(20px);
  height: 350px;
  width: 100%;
  bottom: 0;
  z-index: -1;
}

.container-grandencounter-logo {
  display: flex;
  justify-content: center;
  padding-top: 115px;
}

.container-two-columns {
  display: grid;
  grid-template-columns: 491px 491px;
  justify-items: center;
  gap: 44px;
}

.container-img1 {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  align-items: center;

  transform: translateX(-120%);
  /* animation: slideOut 1s ease-in-out forwards; */
}

.container-left-animation {
  animation: slideOut 1s ease-in-out forwards;
}

img.img-bottles {
  width: 491px;
  height: 647px;
}

.container-img2 {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  justify-content: start;
  height: 647px;
  align-items: center;

  transform: translateX(120%);
  /* animation: slideIn 1s ease-in-out forwards; */
}

.container-right-animation {
  animation: slideIn 1s ease-in-out forwards;
}

.align-container {
  display: flex;
  position: absolute;
  bottom: 15px;
  z-index: 1;
  flex-direction: column;
  align-items: center;
}

.container-age-date {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 30px;
  column-gap: 15px;
}

.input-age-date {
  width: 150px;
  height: 100px;
  font-size: 45px;
  text-align: center;
  font-family: "Futura Bk BT";
}

.input-age-date:focus, .input-age-date:active, .input-age-date:visited, .input-age-date:target {
  border: 2px solid #C9001C;
}

.error-span-21-years {
  color: #C9001C;
  margin-top: 10px;
}

/* ---------------------------- */


.buy-now-btn {
  all: initial;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  background-color: #c9001c;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  width: 320px;
  height: 28px;
  text-align: center;
  font-family: "Futura Md BT";
  font-size: 18px;
  vertical-align: middle;
  justify-content: center;
  cursor: pointer;
}

.buy-now-btn:hover {
  background-color: #cc0000;
}

.paragraph-width1 {
  width: 359px;
}

.paragraph-width2 {
  width: 303px;
}

.paragraph {
  color: #fff;
  font-family: "Futura Bk BT";
  font-size: 14px;
  text-align: center;
  line-height: 23.36px;
}

#big-image {
  /* transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
    height 0.3s ease-in-out;
  animation: hero 1s ease-in-out forwards; */
}

.animate-grand-logo {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
    height 0.3s ease-in-out;
  animation: hero 1s ease-in-out forwards;
}

.animate-grand-logo-age-gate {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
    height 0.3s ease-in-out;
  animation: heroAgeGate 1s ease-in-out forwards;
}

.animate-age-date {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
    height 0.3s ease-in-out;
  animation: slideUp 1s ease-in-out forwards;
}

.animate-age-date-out {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out,
    height 0.3s ease-in-out;
  animation: slideDown 1s ease-in-out forwards;
}

/* age gate */
.age-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 49%;
  width: 100%;
  transform: translateY(500%);
}

.age-gate p {
  width: 53%;
  margin: auto;
  color: #FFF;
  font-family: "Futura Bk BT";
  font-size: 27px;
  text-align: center;
}

@keyframes slideUp {
  to {
    transform: translate(0%, 1.5%);
  }
}

@keyframes slideDown {
  0% {
    transform: translate(0%, 1.5%);
  }

  100% {
    transform: translate(0%, 500%);
  }
}

@keyframes heroAgeGate {
  to {
    transform: translate(0%, -25.5%) scale(0.7);
  }
}

@keyframes hero {
  from {
    transform: translate(0%, -25.5%) scale(0.5);
  }

  to {
    transform: translate(0%, -36.5%) scale(0.35);
  }
}

@keyframes slideIn {
  to {
    transform: translate(0, 0);
  }
}

@keyframes slideOut {
  to {
    transform: translate(0, 0);
  }
}

.success {
  background-color: #0ABF30 !important;
}

.error {
  background-color: #E24D4C !important;
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}