@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Colors */
  --black: #282623;
  --warm-black-1: #201e1c;
  --warm-black-2: #282623;
  --grey: #bababa;
  --hard-grey-1: #757575;
  --hard-grey-2: #808080;
  --white: #fff;
  --hard-white-1: #faf8f7;
  --hard-white-2: #f2f2f2;
  --light-gold: #fff2a8;
  --gold: #ffd700;
  --dark-gold: #5c3d00;

  /* Animations */
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  --language-icon-animate-duration: 0.3s;
  --burger-icon-animate-duration: 0.3s;
  --mobile-menu-animate-duration: 1s;

  /* Dimensions */
  --header-height: 6rem;
}

/* Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "Noto Serif", serif;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  display: none;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE/Edge antiguo */
body {
  -ms-overflow-style: none;
}

.animate__animated {
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.animate__fadeInUp--hero-section {
  animation-delay: 0.5s;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
.animate__zoomIn--language-icon {
  -webkit-animation-duration: var(--language-icon-animate-duration);
  animation-duration: var(--language-icon-animate-duration);
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
.animate__zoomOut--language-icon {
  -webkit-animation-duration: var(--language-icon-animate-duration);
  animation-duration: var(--language-icon-animate-duration);
}

@keyframes shine {
  0% {
    background-position: -45% center;
  }

  50% {
    background-position: 155% center;
  }

  100% {
    background-position: 155% center;
  }
}

@-webkit-keyframes pullDown {
  from {
    max-height: 0px;
  }

  to {
    max-height: 200px;
  }
}
@keyframes pullDown {
  from {
    max-height: 0px;
  }

  to {
    max-height: 200px;
  }
}
.animate__pullDown {
  -webkit-animation-name: pullDown;
  animation-name: pullDown;
}
.animate__pullDown--mobile-menu {
  -webkit-animation-duration: var(--mobile-menu-animate-duration);
  animation-duration: var(--mobile-menu-animate-duration);
}

@-webkit-keyframes pullUp {
  from {
    max-height: 200px;
  }

  to {
    max-height: 0px;
  }
}
@keyframes pullUp {
  from {
    max-height: 200px;
  }

  to {
    max-height: 0px;
  }
}
.animate__pullUp {
  -webkit-animation-name: pullUp;
  animation-name: pullUp;
}
.animate__pullUp--mobile-menu {
  -webkit-animation-duration: var(--mobile-menu-animate-duration);
  animation-duration: var(--mobile-menu-animate-duration);
}