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

@layer components {
  .bg-alarm {
    background-color: #FEFB00;
  }

  .bg-inuvet {
    background-color: #78b41b;
  }

  .bg-inuvet-light {
    background-color: #e0eeca;
  }

  .border-inuvet-light {
    border-color: #e0eeca;
  }

  .suggestion:not(:first-child) {
    @apply border-t;
    @apply border-gray-100;
  }

  .suggestion:first-child {
    @apply rounded-t-md;
  }

  .suggestion:last-child {
    @apply rounded-b-md;
  }

  .mapboxgl-popup-content {
    @apply font-sans;
  }
}
/*
 * 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.
 *


 */

@font-face {
  font-family: "Hind";
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Hind-Regular.ttf) format("truetype");
}

@font-face {
  font-family: "Hind";
  font-style: semi-bold;
  font-weight: 600;
  src: url(/fonts/Hind-SemiBold.ttf) format("truetype");
}

@font-face {
  font-family: "Hind";
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/Hind-Bold.ttf) format("truetype");
}

@font-face {
  font-family: "Schnebel";
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Schnebel-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Schnebel";
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/Schnebel-Bold.otf) format("opentype");
}

@font-face {
  font-family: "ReenieBeanie";
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/ReenieBeanie-Regular.ttf) format("truetype");
}

*:not(html),
*:not(html)::before,
*:not(html)::after {
  font-family: inherit !important;
}

html,
body {
  height: fit-content;
  margin: 0;
  padding: 0;
  font-family: schnebel;
}

.font-reenie {
  font-family: "ReenieBeanie" !important;
  font-size: 1.75rem;
}

.winners-container {
  width: min(80vw, 42rem);
  height: 100%;
}

.modal {
  width: min(75vw, 30rem);
}

.mapbox-container {
  width: 100%;
  height: min(120vw, min(80vh, 42rem));
}

.mapboxgl-canvas {
  border-radius: 0.25rem;
}

#map {
  width: 100%;
  height: 100%;
}

.mapboxgl-popup-close-button {
  padding: 0.25rem !important;
}

.map-h {
  margin-bottom: 0.5rem;
  padding-right: 0.5rem;
}

.mapboxgl-ctrl-attrib {
  background-color: white !important;
  border-radius: 5px 0 0 0;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact {
  background-color: rgba(0, 0, 0, 0) !important;
  min-height: 24px !important;
  margin: 6px !important;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact.mapboxgl-compact-show {
  background-color: white !important;
  border-radius: 12px;
}

input:focus-visible, input:focus, textarea:focus-visible, textarea:focus, select:focus-visible, select:focus {
  --tw-ring-color: #78b41b !important;
  border: 1px solid #78b41b !important;
}

input:not([type="submit"]):not(#search-query):not(#winner_vet_description):valid {
  background-color: #e0eeca;
}

.winners-shadow {
  box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.5);
}

.square {
  aspect-ratio: 1 / 1;
}