/* Responsive Breakpoints
 * 
 * Mobile Devices:
 * - Extra small devices (phones): 320px - 480px
 * - Small devices (large phones): 481px - 767px
 * 
 * Tablets:
 * - Medium devices (tablets): 768px - 1023px
 * 
 * Desktops/Laptops:
 * - Large devices (laptops/desktops): 1024px - 1199px
 * - Extra large devices (large desktops): 1200px - 1599px
 * - Extra extra large devices (larger desktops): 1600px and up
 */

/* Base styles (applicable to all devices) */
:root {
  /* Your base variables and settings here */
  --font-size-base: 16px;
  --spacing-unit: 8px;
  /* Hero Carousel Variables - Added 2026-02-05 */
  --primary-green: #00ff88;  /* Cryptids brand green for progress bars */
  --dark-bg: #000000;        /* Dark background for carousel */
}

/* For all phones (up to 767px) */
@media only screen and (max-width: 767px) {
  /* Common styles for all phones */
}

/* Extra small devices (phones, 320px - 480px) */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  /* Styles for extra small phones */
}

/* Small devices (large phones, 481px - 767px) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Styles for larger phones */
}

/* Medium devices (tablets, 768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Styles for tablets */
}

/* Large devices (laptops/desktops, 1024px - 1199px) */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
  /* Styles for smaller desktops and laptops */
}

/* Extra large devices (large desktops, 1200px - 1599px) */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  /* Styles for large desktops */
}

/* Extra extra large devices (larger desktops, 1600px and up) */
@media only screen and (min-width: 1600px) {
  /* Styles for extra large desktops */
}

/* Usage example with a responsive container */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-unit);
}

/* Responsive container width adjustments */
@media only screen and (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media only screen and (min-width: 1024px) {
  .container {
    max-width: 970px;
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1540px;
  }
}

/* Custom Fonts */
@font-face {
  font-family: 'Gameria';
  src: url('/assets/fonts/custom/Gameria.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* This helps prevent FOIT (Flash of Invisible Text) */
}

/* You can also add additional styling to make your headings stand out */

/* Custom utility class for Gameria font */
.font-gameria {
  font-family: 'Gameria', sans-serif;
}

/* Custom Colors */
.cryptids-green {
  color: #3ab54a;
}

.cryptids-blue {
  color: #007bff;
}   

.cryptids-red {
  color: #dc3545;
}   

.cryptids-yellow {
  color: #ffc107;
}   

.cryptids-purple {
  color: #6f42c1;
}

.cryptids-orange {
  color: #fd7e14;
}   

.cryptids-pink {
  color: #e83e8c;
}

.cryptids-gray {
  color: #6c757d;
}

.cryptids-black {
  color: #000000;
}

.cryptids-white {
  color: #ffffff;
}