/*
 * 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.
 */
html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

@font-face {
  font-family: "Chocolate Box";
  src: url("/assets/tessa-siegmund/C_BOX-3dbd7da8.ttf");
}

@font-face {
  font-family: "Parklane";
  src: url("/assets/tessa-siegmund/parklane-48b6732a.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "De Soto Engraved";
  src: url("/assets/tessa-siegmund/De-Soto-W00-Engraved-02e09ec9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.hero-background {
    background-image: url("/assets/tessa-siegmund/opera-67497-6165c9f0.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
}

.art-deco-border {
     border: 15px solid transparent;
     outline: 2px solid #d4af37;
     outline-offset: -10px;
     background: linear-gradient(#d4af37 0 0) top,
          linear-gradient(#d4af37 0 0) left, linear-gradient(#d4af37 0 0) bottom,
          linear-gradient(#d4af37 0 0) right;
     background-size: 200% 2px, 2px 200%;
     background-origin: padding-box;
     background-repeat: no-repeat;
}

.art-deco-lines {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.3), #000 80%),
    repeating-linear-gradient(135deg, #3b2a1a 0, #d6a85f 1px, transparent 3px, transparent 20px);
}

.hero-foreground {
    align-items: center;
    backdrop-filter: brightness(50%) blur(5px);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
    //font-family: "Chocolate Box";
}

h1, h2, h3, h4, h5, h6, h7, .navbar-brand {
    font-family: "De Soto Engraved";
    //font-family: "Chocolate Box";
}

.text-underline {
    text-decoration: underline #d4af37;
}

.repertoire-item {
    width: 100%;
    min-height: 50vh;
}

.border-gold {
    border-color: #d4af37 !important;
}

.text-gold {
    color: #d4af37;
}

section {
    scroll-margin-top: 3rem;
}

.nav-link.active {
    text-decoration: underline #d4af37;
}