@font-face {
  font-family: "Gravity";
  src: url("/assets/fonts/Gravity.woff2") format("woff2"), url("/assets/fonts/Gravity.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Social";
  src: url("/assets/fonts/Social.woff2") format("woff2"), url("/assets/fonts/Social.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
a {
  text-decoration: none;
  color: #2A2A2A;
}

a:hover {
  color: #0BB11E;
}

p a {
  text-decoration: underline;
}

html, body {
  margin: 0px;
  padding: 0px;
  background-color: #EBEBEB;
  font-family: "Social";
  color: #2A2A2A;
  overflow-x: hidden;
}

#landingContainer {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100vw - 48px);
  padding: 24px;
}
header a {
  text-decoration: none;
  color: #2A2A2A;
}
header a:hover {
  color: #0BB11E;
}
header #title {
  display: flex;
  align-items: center;
}
header #title a {
  text-decoration: none;
  color: #2A2A2A;
}
header #title a:hover {
  text-decoration: none;
  color: #0BB11E;
}
header #title h1 {
  margin: 0px;
  font-family: "Gravity";
  font-stretch: condensed;
}
header .left {
  flex-direction: row;
  justify-content: flex-start;
}
header .left h4 {
  margin: 0px;
  margin-left: 16px;
  font-weight: 100;
}
header .center {
  flex-direction: column;
  justify-content: center;
}
header .center h4 {
  margin: 0px;
  font-weight: 400;
}

header.landingHeader {
  justify-content: center;
}

footer {
  border-top: 0.5px solid darkgray;
  padding: 24px;
  background-color: #2A2A2A;
  color: #EBEBEB;
}
footer .footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
footer .footer-inner .footer-brand a {
  font-family: "Gravity";
  font-stretch: condensed;
  font-size: 32px;
  text-decoration: none;
  color: #EBEBEB;
}
footer .footer-inner .footer-brand a:hover {
  color: #0BB11E;
}
footer .footer-inner .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}
footer .footer-inner .footer-about, footer .footer-inner .footer-credits {
  flex: 1;
}
footer .footer-inner .footer-about h4 {
  margin: 0 0 8px 0;
  color: #EBEBEB;
}
footer .footer-inner .footer-about p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5em;
  color: darkgray;
}
footer .footer-inner .footer-about a {
  color: darkgray;
}
footer .footer-inner .footer-about a:hover {
  color: #0BB11E;
}
footer .footer-inner .footer-credits h4 {
  margin: 0 0 8px 0;
  color: #EBEBEB;
}
footer .footer-inner .footer-credits p {
  margin: 0 0 4px 0;
  font-size: 12px;
  line-height: 1.5em;
  color: darkgray;
}
footer .footer-inner .footer-credits a {
  color: darkgray;
}
footer .footer-inner .footer-credits a:hover {
  color: #0BB11E;
}
footer .footer-inner .footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
footer .footer-inner .footer-links a {
  text-decoration: none;
  color: #EBEBEB;
}
footer .footer-inner .footer-links a:hover {
  color: #0BB11E;
}

#landing-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
}
#landing-content p {
  line-height: 1.5em;
  max-width: 560px;
  margin-bottom: 20vh;
}

#episodeList a {
  text-decoration: none;
  color: #2A2A2A;
}
#episodeList .episode-item {
  display: grid;
  grid-template-columns: auto 2fr 1fr;
  column-gap: 16px;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 0.5px solid darkgray;
}
#episodeList .episode-item:hover {
  background-color: #DFF8DF;
}

#episodeContainer {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}
#episodeContainer #sliderNavBar {
  position: sticky;
  top: 0px;
  display: flex;
  flex-wrap: nowrap;
  background-color: #2A2A2A;
  padding-left: 24px;
  overflow-x: scroll;
  overflow-y: hidden;
  transition: height 0.3s ease;
}
#episodeContainer #sliderNavBar .sliderNavItem {
  width: 25vw;
  padding: 16px;
  padding-left: 0px;
  padding-right: 32px;
  padding-bottom: 0px;
  color: #EBEBEB;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  overflow: hidden;
  height: fit-content;
}
#episodeContainer #sliderNavBar .sliderNavItem .episodeTitle {
  margin-bottom: 16px;
  white-space: nowrap;
  width: fit-content;
}
#episodeContainer #sliderNavBar .sliderNavItem .description {
  display: none;
  text-wrap: wrap;
}
#episodeContainer #sliderNavBar .sliderNavItem:hover {
  opacity: 1;
}
#episodeContainer #sliderNavBar .active {
  opacity: 1;
}
#episodeContainer #sliderNavBar p {
  color: #EBEBEB;
  margin: 0px;
  line-height: 1.5em;
}
#episodeContainer #episodeContent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: fit-content;
}
#episodeContainer #episodeContent .leftColumn {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 24px;
  padding-top: 24px;
}
#episodeContainer #episodeContent .leftColumn .playerWrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#episodeContainer #episodeContent .leftColumn .playerWrapper .streamingLinks {
  display: flex;
  gap: 12px;
}
#episodeContainer #episodeContent .leftColumn .playerWrapper .streamingLinks a {
  font-size: 11px;
  text-decoration: none;
  color: darkgray;
}
#episodeContainer #episodeContent .leftColumn .playerWrapper .streamingLinks a:hover {
  color: #0BB11E;
}
#episodeContainer #episodeContent .leftColumn .episodeInfo h1 {
  font-size: 48px;
  font-family: "Gravity";
  font-style: italic;
  font-stretch: condensed;
  margin: 0px;
  margin-left: -4px;
}
#episodeContainer #episodeContent .leftColumn .episodeInfo h6 {
  font-size: 12px;
  margin: 0px;
  font-weight: 100;
}
#episodeContainer #episodeContent .leftColumn .episodeInfo p {
  margin-top: 24px;
}
#episodeContainer #episodeContent .leftColumn .player {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  border: #0BB11E dashed 1px;
}
#episodeContainer #episodeContent .leftColumn .player .controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#episodeContainer #episodeContent .leftColumn .player .controls button {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  border: none;
}
#episodeContainer #episodeContent .leftColumn .player .controls button img {
  width: 32px;
  height: 32px;
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range] {
  -webkit-appearance: none; /* Remove default styling in WebKit browsers */
  width: 100%; /* Full width */
  height: 4px; /* Height of the track */
  background: #2A2A2A; /* Track color */
  border-radius: 5px; /* Rounded corners */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Slightly transparent */
  transition: opacity 0.2s; /* Smooth transition for opacity */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range]:hover {
  opacity: 1; /* Fully opaque on hover */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range] {
  /* Style the thumb (the draggable part) */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default styling */
  appearance: none; /* Remove default styling */
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  border-radius: 50%; /* Make it circular */
  background: #0BB11E; /* Thumb color */
  border: none;
  cursor: pointer; /* Change cursor to pointer */
  transform: translateY(-8px);
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range]::-moz-range-thumb {
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  border-radius: 50%; /* Make it circular */
  background: #0BB11E; /* Thumb color */
  cursor: pointer; /* Change cursor to pointer */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range] {
  /* Style the track for Firefox */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range]::-moz-range-track {
  background: #2A2A2A; /* Track color */
  border-radius: 5px; /* Rounded corners */
  border: 0px solid rgba(0, 0, 0, 0);
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range] {
  /* Style the track for WebKit browsers */
}
#episodeContainer #episodeContent .leftColumn .player .controls input[type=range]::-webkit-slider-runnable-track {
  background: black; /* Track color */
  height: 4px;
  border-radius: 5px; /* Rounded corners */
}
#episodeContainer #episodeContent .leftColumn .player .controls #currentTime, #episodeContainer #episodeContent .leftColumn .player .controls #duration {
  padding-right: 8px;
  color: #2A2A2A;
  opacity: 0.7;
  font-size: 12px;
}
#episodeContainer #episodeContent .rightColumn {
  height: 50vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 24px;
  padding-top: 24px;
}
#episodeContainer #episodeContent .rightColumn img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
#episodeContainer #reader {
  width: calc(100vw - 48px);
  margin: 24px;
  border: 1px dashed #2A2A2A;
}
#episodeContainer #reader #readerNav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px dashed #2A2A2A;
}
#episodeContainer #reader #readerNav div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  transition: background-color 0.2s ease;
}
#episodeContainer #reader #readerNav .borderLeft {
  border-right: 1px dashed #2A2A2A;
}
#episodeContainer #reader #readerNav div:hover {
  background-color: #DFF8DF;
  cursor: pointer;
}
#episodeContainer #reader #readerNav .active {
  background-color: #2A2A2A;
  color: #EBEBEB;
}
#episodeContainer #reader #readerNav .active:hover {
  cursor: default;
  background-color: #2A2A2A;
}
#episodeContainer #reader #readerNav .disabled {
  color: darkgray;
  pointer-events: none;
}
#episodeContainer #reader #readerNav .disabled:hover {
  background-color: transparent;
  cursor: default;
}
#episodeContainer #reader #readerContent {
  overflow-y: scroll;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
}
#episodeContainer #reader #readerContent a {
  text-decoration: none;
  color: #2A2A2A;
}
#episodeContainer #reader #readerContent p {
  margin-top: 0px;
}
#episodeContainer #reader #readerContent #discussionQuestions {
  width: 40%;
}
#episodeContainer #reader #readerContent #readerText {
  width: 100%;
}
#episodeContainer #reader #readerContent #readerText .readerGrid {
  width: 100%;
}
#episodeContainer #reader #readerContent #readerText .readerGrid a {
  width: 100%;
}
#episodeContainer #reader #readerContent #readerText .readerGrid .readingItem {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5vw;
  padding-top: 8px;
  padding-bottom: 8px;
}
#episodeContainer #reader #readerContent #readerText .readerGrid .center {
  display: flex;
  justify-content: center;
}
#episodeContainer #reader #readerContent #readerText .readerGrid .end {
  display: flex;
  justify-content: flex-end;
  color: #F45959;
}
#episodeContainer #reader #readerContent #readerText .readerGrid div.readingItem:nth-child(even) {
  background-color: white;
}
#episodeContainer #reader #readerContent #readerText .readerGrid div.readingItem:nth-child(even):hover {
  background-color: #DFF8DF;
  cursor: pointer;
}
#episodeContainer #reader #readerContent #readerText .readerGrid .readingItem {
  padding-left: 16px;
  padding-right: 16px;
}
#episodeContainer #reader #readerContent #readerText .readerGrid .readingItem:hover {
  background-color: #DFF8DF;
  cursor: pointer;
}
@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
  body p {
    font-size: 12px;
  }
  header.siteHeader h4 {
    display: none;
  }
  header.siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #EBEBEB;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 12px 24px;
  }
  #episodeListContainer {
    padding-top: 60px;
  }
  #landingContainer {
    width: 100%;
  }
  #landingContainer header {
    width: calc(100% - 48px);
    padding-top: 16px;
  }
  #landingContainer header #title {
    width: 100%;
    padding: 0px;
  }
  #landingContainer #landing-content {
    width: calc(100% - 48px);
    padding-left: 24px;
    padding-right: 24px;
  }
  #episodeContainer #sliderNavBar {
    display: none;
  }
  #episodeContent {
    grid-template-columns: 1fr !important;
  }
  #episodeContent h1 {
    font-size: 28px !important;
    margin-left: 0px !important;
  }
  #episodeContent p {
    margin-top: 8px !important;
  }
  #episodeContent .leftColumn, #episodeContent .rightColumn {
    height: fit-content !important;
    padding: 16px !important;
  }
  #episodeContent .rightColumn {
    padding-top: 0px !important;
  }
  #episodeContent .player {
    display: none !important;
  }
  #title h4 {
    text-align: center;
    font-weight: 400;
  }
  #episodeList .episode-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    margin-bottom: 16px;
  }
  #episodeList .episode-item:first-child {
    grid-column: 1;
  }
  .mb2 {
    grid-column: 2;
    display: flex;
    flex-direction: column;
  }
  .description p {
    margin: 0px;
  }
  #discussionQuestions ul {
    padding-left: 24px;
  }
  #discussionQuestions {
    width: 100% !important;
    padding-right: 8px;
  }
  #reader {
    margin: 16px !important;
    width: calc(100vw - 32px) !important;
    margin-top: 0px !important;
  }
  #reader #readerNav div {
    text-align: center;
  }
  #reader .readerGrid div {
    grid-template-columns: 1fr auto !important;
    grid-column-gap: 16px !important;
    padding: 0px !important;
  }
  #reader .readerGrid .readingItem {
    gap: 0px !important;
    padding: 8px !important;
  }
  #reader .readerGrid div:nth-child(n+2) {
    grid-column: 1;
    justify-content: flex-start !important;
  }
  #reader .readerGrid div:nth-child(n+4) {
    grid-column: 2;
    justify-content: flex-end !important;
  }
  footer .footer-inner .footer-top {
    flex-direction: column;
  }
  footer .footer-inner .footer-links {
    flex-direction: column;
    gap: 12px;
  }
}

/*# sourceMappingURL=main.css.map */