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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *


*/

:root {
  --amr-black: #000000;
  --amr-dark-gray: #212427;
  --amr-red: #BA2C44;
}

::selection {
  color: var(--amr-black);
  background: var(--amr-red);
}

html, body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.bg-amr-black {
  background-color: var(--amr-black);
}
.hover\:bg-amr-black:hover {
  background-color: var(--amr-black);
}
.bg-amr-dark-gray {
  background-color: var(--amr-dark-gray);
}
.hover\:bg-amr-dark-gray:hover {
  background-color: var(--amr-dark-gray);
}
.bg-amr-red {
  background-color: var(--amr-red);
}

.border-amr-red {
  border-color: var(--amr-red);
}
.border-amr-dark-gray {
  border-color: var(--amr-dark-gray);
}
.focus\:border-amr-red:focus {
  border-color: var(--amr-red);
}

.border-bottom-amr-red {
  border-bottom: 5px solid var(--amr-red);
}

.text-amr-black {
  color: var(--amr-black);
}
.hover\:text-amr-black:hover {
  color: var(--amr-black);
}
.text-amr-dark-gray {
  color: var(--amr-dark-gray);
}
.hover\:text-amr-dark-gray:hover {
  color: var(--amr-dark-gray);
}
.text-amr-red {
  color: var(--amr-red);
}
.hover\:text-amr-red:hover {
  color: var(--amr-red);
}

.dropdown:hover .hidden {
  display: initial !important;
}

.leading-20 {
  line-height: 5rem;
}
.leading-24 {
  line-height: 6rem;
}

.no-underline {
  text-decoration: none !important;
}

@media (min-width: 768px) {

  .md\:border-amr-red {
    border-color: var(--amr-red);
  }

  .md\:leading-24 {
    line-height: 6rem;
  }

}

div div div div p a { font-weight:bold; text-decoration:underline; }

div div.text-justify div div.w-full { margin-right:24px; }