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

@layer base {
  html {
    font-family: 'ABCMarist', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-light;
  }

  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-lg;
  }
}

/* Button */

.btn-primary {
  @apply font-sans bg-white text-dark-green-500 py-2 px-4 border border-neutral-700 inline-flex items-center space-x-16 hover:bg-dark-green-500 hover:text-white;
}

/* .sticky #navbarCollapse li > a {
  @apply text-dark dark:text-white hover:text-primary dark:hover:text-primary hover:opacity-100;
} */

#navbarCollapse li .ud-menu-scroll.active {
  @apply opacity-70;
}

.navbarTogglerActive > span:nth-child(1){
  top: 7px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.navbarTogglerActive > span:nth-child(2){
  opacity: 0;
}

.navbarTogglerActive > span:nth-child(3){
  top: -8px;
  --tw-rotate: 135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* @font-face {
  font-family: 'ABCMarist';
  src: font_url(/assets/ABCMarist-Regular-2c6c1bb92b840b60937c79c22571df981670fa022084d268a239f1820a236440.woff2) format('woff2'),
       font_url(/assets/ABCMarist-Regular-98b8aab1995c03a7bfd8229e4c75079dce634b6f748d5745e9d9aa6142d69a14.woff) format('woff'),
       font_url(/assets/ABCMarist-Regular-844348fd43007eb43594e6af569c9d087eb79ffa35e0fd4c11fbb620580e5879.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
} */

@font-face {
  font-family: 'ABCMarist';
  src: url(/fonts/ABCMarist-Regular.woff2) format('woff2'),
       url(/fonts/ABCMarist-Regular.woff) format('woff'),
       url(/fonts/ABCMarist-Regular.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tartuffo-Light';
  src: url(/fonts/Tartuffo-Light.woff2) format('woff2'),
       url(/fonts/Tartuffo-Light.woff) format('woff'),
       url(/fonts/Tartuffo-Light.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Starborn";
  src: url(/fonts/Starborn.ttf);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.vh-main {
  height: calc(100vh - 64px);  /* 64px is the height of your navigation */
}

.max-vh-main {
  max-height: calc(100vh - 64px - 170px); /* 64px is the height of your navigation, 160px is additional height for footer */
}