/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Font Face Declarations - Rails 8 Propshaft Asset Pipeline */

/* Cera Pro Font Face Declarations */
@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Thin-3564e2f3.otf") format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Light-d2524a41.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Regular-0effa79a.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Medium-c0ff0105.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Bold-b98b6b65.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url("/assets/Cera-Pro-Black-17135b97.otf") format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Basier Circle Font Face Declarations */
@font-face {
  font-family: 'Basier Circle';
  src: url("/assets/basiercircle-regular-webfont-edd73262.woff2") format('woff2'),
       url("/assets/basiercircle-regular-webfont-5737483d.woff") format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Circle';
  src: url("/assets/basiercircle-medium-webfont-f5f4b1e0.woff2") format('woff2'),
       url("/assets/basiercircle-medium-webfont-3483e15f.woff") format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Circle';
  src: url("/assets/basiercircle-semibold-webfont-9d5af315.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Basier Circle';
  src: url("/assets/basiercircle-bold-webfont-9436cd35.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom Sounds Page Styles */
.list-view-artwork {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: cover;
  margin-right: 15px;
}

.text-red-500 {
  color: #fb4b4d !important;
}

.hero-section {
}



/* MOBILE STYLES */

@media (max-width: 640px) {
  /* sm: Small tablets */
  .hero-section {
    align-items: normal;
  }
}

@media (min-width: 640px) {
  /* sm: Small tablets */
  .hero-section {
    align-items: normal;
  }
}

@media (min-width: 768px) {
  /* md: Tablets */
  .hero-section {

  }
}

@media (min-width: 1024px) {
  /* lg: Desktops */
  .hero-section {

  }
}