:root {
  --text-color: rgb(0, 75, 147);
  --mud-typography-default-size: 1em;
}

a {
  text-decoration: none;
}

.navigationBar {
  height: 100vh;
  position: fixed;
  font-weight: bold;
  background-color: #F7F7F7;
  overflow: auto;
}

.font-bold {
  font-weight: bold;
}

.grid {
    display:grid;
    gap:1em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    grid-auto-rows: minmax(10em, auto);
}

/* Fill column top to bottm with max 4 rows, then start next column.
  (max 6 columns -> 4*6 = 24 items with correct behaviour) */
.chaptersGrid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
}
.chapter {
  cursor: pointer;
}
  .chapter:hover {
    text-decoration: underline;
  }
  .chapter > .timestamp {
    color: var(--text-color);
  }


/* Scroll Bar*/
#style-1::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
  width: 8px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #6C757D
}


/* Card */
.card {
    background-color: white;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    border-radius: 4px;
    transition: all 500ms;
    padding: 1em;
 }
    .card > h1 {
        font-size: 18pt;
        margin-bottom: 1em;
    }


    .card > video {
      margin-bottom: 1.5em;
    }

    .card > img {
      margin-bottom: 1.5em;
    }
  
    .card:hover {
        box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
        transform: translateY(-2px) scale(1.005);
     }

.minimalcard {
  background-color: white;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  border-radius: 4px;
  transition: all 500ms;
  padding: 1em;
  aspect-ratio: auto;
  aspect-ratio: 16 / 9;
}

  .minimalcard > h1 {
    font-size: 18pt;
    margin-bottom: 1em;
  }

  .minimalcard > video {
    margin-bottom: 1.5em;
  }

  .minimalcard > img {
    margin-bottom: 1.5em;
  }


@media screen and (min-width: 1400px) {
    .card-tall {
        grid-row: span 2/auto;
    }
    .card-wide {
        grid-column: span 2/auto;
    }
}

@media screen and (max-width: 1000px) {
  .chaptersGrid {
    max-height: 20em;
    overflow: scroll;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(16, auto);
  }
}

@media screen and (max-width: 600px) {
  .chaptersGrid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(24, auto);
  }
}

.youtube {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex;
  overflow: hidden;
}
.youtube__background {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  pointer-events: none;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.front-image {
    margin-top: -4rem !important;
    margin-right: -4rem !important;
}