/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* CSS variables */
:root {
  --primary-font: "Chivo", sans-serif;
  --secondary-font: "Inter", sans-serif;
  --primary-color: #5a3c5a;
  --secondary-color: #b4727f;
  --highlight-color: #E1B8E7;
  --highlight-color-light: #ead6d3;
}

/* Global styles */
body {
  font-family: var(--secondary-font);
  padding-top: 57.64px; /* pushes the top of the header down under fixed navbar*/
  padding: 0;
  margin-top: 54px;

}
 
h1,
h2{
    font-family: var(--primary-font);
}

h1{
    color: var(--primary-color);
}


h2{
 margin-top: 10px;
}

.sub-heading-color{
    color: var(--secondary-color);
}

.section {
  padding-top: 4rem; /* Prevent navbar overlap*/
}

html {
  scroll-behavior: smooth;
}

/* Buttons */
.custom-button-outline {
    width: 200px;
  padding: 7px 25px;
  border: 3px solid var(--primary-color);
  color: var(--primary-color);
}
.custom-button-outline:hover {
    border: 3px solid var(--primary-color);
  background-color: var(--primary-color);
  color: white;
}

/* Navbar */
#navbar{
    background-color: var(--primary-color);
}

#dropdown{
    background-color: var(--primary-color);
    height: 50vh;
    /* asked perplexity */
    overflow-y: auto; 
}
#navbar .logo {
  width: 50px;
  height: 50px;
}

#podcast-list h2 {
    scroll-margin-top: 100px;
}

/* Header */

/* Header/ Hero */
#hero{
  height: 30vh;
  width: 100%;
  background: url("../images/hero-image.webp") no-repeat center center/cover;
  position: relative;
}


/* Main */
/* Main / Community */
.bg-highlight{
    background-color: var(--highlight-color-light);
    padding: 20px;
}

.carousel-item {
  height: 32rem;
}
.carousel-inner img {
  height: 100%;
  object-fit: cover;
}


#community p{
    margin: 8px;
}

/* Main / Media */

#media iframe{
    width: 100%;
}

/* Main / Events */
#events .table *{
    background-color:  var(--highlight-color-light);
    color: black;
}


.table {
   --bs-table-border-color: black;
}

#events iframe{
  width: 100%;
  height: 300px;
}
/* Main / All episodes */

#all-episodes .btn{
    
    border: none;
    border-radius: 12px;
    margin: 10px;
    background-color: black;
}

#all-episodes .btn:hover {
    border: 3px solid var(--primary-color);
    background-color: var(--primary-color);
    color: white;
}
/* Main / Success page */
#success .larger{
    width: 250px;
}


/* Footer / Follow us */
#follow {
  background-color: var(--primary-color);
  color: white;
  padding-bottom: 3rem;
}

#follow h2{
    color: white;
    font-family: var(--secondary-font);
    margin-bottom: 20px;
    margin-top: 0;
}


#follow i{
    color: white;
    font-size: 1rem;
    margin: 20px 10px;
    transition: color 0.3s ease-in-out;
}


#follow a{
    text-decoration: none;
}

#follow i:hover {
  color: var(--secondary-color);
}

/* Media queries */

@media screen and (max-width: 576px) {
 #hero{
   background: url("../images/hero-image-mobile.webp") no-repeat center center/cover;;
 }
}