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

@layer base {
  body {
    @apply bg-off-white font-futura text-dark-gray;
  }
  h1 {
    @apply text-3xl pb-4;
  }
  h2 {
    @apply md:text-2xl font-bold;
  }
  h3 {
    @apply font-bold pb-3;
  }
  a {
    @apply text-yellow-500 underline hover:text-yellow-800 focus:text-yellow-800;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    @apply w-full bg-off-white border-off-white border-b-light-gray focus:border-blue-500 focus:ring-0;
  }
}

@layer components {
  .title {
    @apply text-3xl pb-4;
  }
  .btn-text {
    @apply flex no-underline align-middle text-center text-light-gray cursor-pointer hover:text-dark-gray focus:text-dark-gray;
  }
  .btn-primary {
    @apply px-6 py-2 mb-6 bg-blue-500 text-off-white rounded-lg cursor-pointer select-none [box-shadow:0_10px_0_0_#3F80A0] border-[1px] border-blue-800 transition-all duration-150 active:translate-y-2 active:[box-shadow:0_0px_0_0_#3F80A0] active:border-b-[0px] hover:bg-blue-400 focus:bg-blue-400;
  }
  .btn-secondary {
    @apply px-6 py-2 mb-6 bg-off-white text-yellow-800 rounded-lg cursor-pointer select-none [box-shadow:0_10px_0_0_#B98B37] border-[1px] border-yellow-800 transition-all duration-150 active:translate-y-2 active:[box-shadow:0_0px_0_0_#EEB71E] active:border-b-[0px] hover:bg-yellow-200 focus:bg-yellow-200;
  }
  .alert {
    @apply p-4 flex items-center;
  }
  .alert-success {
    @apply bg-blue-200;
  }
  .alert-danger {
    @apply bg-yellow-400;
  }
  .field {
    @apply pb-3;
  }
  .active-tab {
    @apply border border-off-white border-b-yellow-500 px-4 py-2 cursor-pointer hover:border-yellow-500 focus:border-yellow-500;
  }
  .inactive-tab {
    @apply px-4 py-2 cursor-pointer hover:border-yellow-500 focus:border-yellow-500;
  }
  .modal-bg {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center;
  }
  .modal {
    @apply bg-off-white shadow-lg rounded-lg p-6 md:w-2/5;
  }
}
@font-face {
  font-family: "Futura";
  src: url(/assets/fonts/Futura-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: bold;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Futura";
  src: url(/assets/fonts/Futura-Medium.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
}
/*
 * 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.
 *


 */
@import "fonts";