@import "tailwindcss";

@theme {
  /* Custom screens */
  --breakpoint-xs: 320px;
  --breakpoint-ms: 375px;
  --breakpoint-s: 425px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Custom colors */
  --color-olive-light: #3D9970;
  --color-olive: #00966C;
  --color-olive-dark: #1b5e20;
  --color-reyellow: #f3ec18;
}

.menu-option-active {
  /* border-bottom: 2px solid #3D9970; */
  background-color: lightgreen;
  font-weight: bold;
  /* color: yellow; */
}

#pagination-navigation {
  margin: 20px 0px;
  text-align: center;
}

#pagination-navigation .page {
  border: 1px solid rgb(61, 153, 122);
  font-weight: bold;
  padding: 2px 8px;
}

#pagination-navigation .page.active {
  background-color: rgb(61, 153, 122);
  color: white;
}

#pagination-navigation .page.disabled {
  background-color: rgb(61, 153, 122);
  color:rgb(61, 153, 122);
}

.g-recaptcha {
  width: 35%;
  margin: 0px auto;
  transform: scale(0.77);
  transform-origin: 0 0;
}
@media only screen and (max-width: 425px) {
  .g-recaptcha {
    width: 64%;
  }
}

@media only screen and (max-width: 375px) {
  .g-recaptcha {
    width: 80%;
  }
}

@media only screen and (max-width: 320px) {
  .g-recaptcha {
    width: 90%;
  }
}
/*

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

*/
@font-face {
  font-family: "Berlin";
  src: url(/assets/fonts/berlin_sans_fb_demi_bold.ttf) format("ttf");
  font-weight: bold;
  font-style: normal;
}
/* Inter font placeholder for backward compatibility */
/* Inter is now included in Tailwind CSS v4 by default */
/*
 * 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 "custom_fonts";

#language-selector select option {
  display: none;
  background-color: red;
}

.berlin-font {
  font-family: 'MyCustomFont', sans-serif;
}