/* Change Bootstrap's Colors */
:root {
  --bs-primary: #B7410E;
  --bs-secondary: #418289;
  --bs-light: #F1E9D2;
  --bs-dark: #312019;
}

/* Force Button's use of Primary */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  filter: brightness(90%);
}

.badge-primary {
  background-color: var(--bs-secondary);
  color: var(--bs-light);
}

.badge-pill {
  border-radius: 2rem;
}

/* Change Default Typefaces */
body {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  /* font-weight: 300-700 */
  background-color: var(--bs-light);
  color: var(--bs-dark);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cal Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.mea-culpa-regular {
  font-family: "Mea Culpa", cursive;
  font-weight: 400;
  font-style: normal;
}

/* General */
#pageImage {
  border-radius: 2rem;
}

.wavy-section {
  position: relative;
}

.wavy-section-dark {
  background-color: var(--bs-dark);
  color: var(--bs-light);
  position: relative;
}

/* Navbar */
.navbarFixed {
  position: sticky;
  background-color: var(--bs-primary) !important;
}

.navbarHero {
  position: absolute;
  background-color: transparent !important;
  transition: background-color 0.3s;
}

.navbarScroll {
  position: fixed;
  background-color: var(--bs-primary) !important;
  animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.navbar-brand,
.nav-item,
.nav-link {
  color: var(--bs-light);
}

.navbar-brand:hover,
.nav-item:hover,
.nav-link:hover {
  color: var(--bs-dark);
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  color: var(--bs-light);
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.wavy-border-hero {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  margin-bottom: -1px;
}

.wavy-border-hero svg {
  position: relative;
  display: block;
  width: calc(114% + 1.3px);
  height: 65px;
  transform: rotateY(180deg);
}

.wavy-border-hero .shape-fill {
  fill: var(--bs-light);
}

.scroll-down-arrow {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  color: var(--bs-light);
  text-decoration: none;
}

.scroll-down-arrow:hover {
  color: var(--bs-secondary);
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}



/* Projects Section */
.splide__slide .card {
  box-shadow: none;
  border-radius: 0;
}

.card {
  background-color: var(--bs-light);
}

.card-text {
  font-style: italic;
}

.card-img-top {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

.splide__slide {
  border-radius: 2rem;
  overflow: hidden;
}

.wavy-border-projects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px;
}

.wavy-border-projects svg {
  position: relative;
  display: block;
  width: calc(164% + 1.3px);
  height: 57px;
}

.wavy-border-projects .shape-fill {
  fill: var(--bs-light);
}

/* News Section */
.wavy-border-news {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  margin-top: -1px
}

.wavy-border-news svg {
  position: relative;
  display: block;
  width: calc(169% + 1.3px);
  height: 39px;
}

.wavy-border-news .shape-fill {
  fill: var(--bs-dark);
}

/* Contact Section */
.curvy-border-contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curvy-border-contact svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 31px;
}

.curvy-border-contact .shape-fill {
    fill: #F1E9D2;
}

.curvy-border-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curvy-border-footer svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20px;
    transform: rotateY(180deg);
}

.curvy-border-footer .shape-fill {
    fill: var(--bs-primary);
}

.form-control {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

.form-control:focus {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-light-rgb), 0.25);
  border-color: var(--bs-dark);
}

/* Footer Section */
.footer-section {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}


/* /// /// /// ABOUT.HTML /// /// /// */

/* What is Studio Sabia */
.curvy-border-about0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curvy-border-about0 svg {
    position: relative;
    display: block;
    width: calc(120% + 1.3px);
    height: 17px;
}

.curvy-border-about0 .shape-fill {
    fill: var(--bs-primary);
}

.curvy-border-about1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curvy-border-about1 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 88px;
}

.curvy-border-about1 .shape-fill {
    fill: var(--bs-dark);
}

/* My Process */
.curvy-border-about2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curvy-border-about2 svg {
    position: relative;
    display: block;
    width: calc(119% + 1.3px);
    height: 71px;
    transform: rotateY(180deg);
}

.curvy-border-about2 .shape-fill {
    fill: var(--bs-dark);
}


/* /// /// /// MUSIC.HTML /// /// /// */

.project-card {
  border-radius: 2rem;
}

.project-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-select {
  background-color: var(--bs-light);
}

.embed-link {
  /*height: 400px;*/
  border: 0;
}

.modal-header {
  color: var(--bs-dark);
  background-color: var(--bs-light);
  border-bottom: 1px solid var(--bs-dark);
}

.modal-body {
  color: var(--bs-dark);
  background-color: var(--bs-light);
}

.table {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}


/* /// /// /// NEWS.HTML /// /// /// */

.postCell {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  border-radius: 2rem;
}

.postPreview {
  line-clamp: unset;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

h2 a {
  color: inherit;        /* use the header's color */
  text-decoration: none; /* remove underline */
}

.fill-viewport {
  min-height: calc(100vh - 170px);
}