:root {
  --pico-font-family: "Kreon";
  --odwyk-green: #9de64a;
  --odwyk-font-color-pale: #a0a0a0;
  --odwyk-text-alternative: #775905;
  --odwyk-text-alternative-pale: rgb(156, 117, 7);
  --odwyk-episode-background: #ffc850;
  --odwyk-text-border: #c3ff43;
  --odwyk-radius: 0.8rem;
}

.col-xs-hidden {
  display: none;
}
.col-xs-visible {
  display: block;
}
.col-xs-top-margin {
  margin-top: 2rem;
}

@media only screen and (min-width: 48em) {
  .col-sm-hidden {
    display: none;
  }
  .col-sm-visible {
    display: block;
  }
  .col-xs-top-margin {
    margin-top: 0px;
  }
}

@media only screen and (min-width: 62em) {
  .col-md-hidden {
    display: none;
  }
  .col-md-visible {
    display: block;
  }
}

@media only screen and (min-width: 75em) {
  .col-lg-hidden {
    display: none;
  }
  .col-lg-visible {
    display: block;
  }
}

@font-face {
  font-family: "Martin November";
  src:
    url("/fonts/MartinNovember-Regular.woff2") format("woff2"),
    url("/fonts/MartinNovember-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-family: "Martin November", cursive;
  --pico-font-weight: 700;
  --pico-typography-spacing-vertical: 1.2rem;
}

ul {
  padding-left: 0px;
}
ul li {
  list-style: none;
}
ul li::before {
  content: "";
  display: inline-block;
  height: 1.2rem;
  width: 1.2rem;
  background-size: cover;
  background-image: url("/images/bullet.png");
  background-repeat: no-repeat;
  margin-right: 0.3em;
  margin-top: -0.1em;
  background-position: center center;
  vertical-align: middle;
}

html,
body {
  background-color: var(--odwyk-green);
}

#header {
  position: fixed;
  top: 0;
  height: 400px;
  padding: 0;
  z-index: 100;
}
#playgroundFrame {
  overflow: none;
  z-index: -1000;
}

main {
  background-color: var(--odwyk-green);
  margin-top: 400px;
}

main #page {
  background-color: white;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 1rem;
}

main #page .section {
  margin-bottom: 3rem;
}

footer {
  margin: 1rem 1rem 1rem;
  padding: 1.5rem 4rem;
  font-size: 12px;
  align-content: center;
}

footer .copyright {
  text-align: center;
  margin-top: 1rem;
  padding: 0;
  font-size: 12px;
}

details .content {
  padding-bottom: 2rem;
}

.section.search h5 {
  font-size: 24px;
}

@media only screen and (min-width: 48em) {
  main #page {
    margin: 1rem 1rem;
    padding: 1.5rem 2rem;
    border-radius: var(--odwyk-radius);
  }
  footer {
    font-size: 14px;
  }
  .section.search h5 {
    font-size: 24px;
  }
}

.episodeThumb {
  margin: 0.6rem 0;
  padding: 0.75rem 1rem;
  background-color: var(--odwyk-episode-background);
  border-radius: var(--odwyk-radius);
  position: relative;
  overflow: hidden;
  height: 240px;
}
.episodeThumb .b img {
  width: 120px;
  height: 90px;
  margin-right: 0.7rem;
  object-fit: cover;
  border-radius: var(--odwyk-radius);
}
.episodeThumb a {
  text-decoration: none;
}
.episodeThumb h4 {
  font-family: "Kreon";
  font-size: 19px;
  color: #404040;
  text-align: left;
  font-weight: 400;
  margin-bottom: 10px;
}
.episodeThumb .b {
  position: relative;
  width: 100%;
}
.episodeThumb .fadeout {
  position: absolute;
  left: 0;
  top: 170px;
  width: 100%;
  height: 80px;
  z-index: 1;
  background: -webkit-linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    var(--odwyk-episode-background) 100%
  );
}
.episodeThumb .meta {
  text-align: left;
  font-size: 12px;
  padding: 0;
  margin-top: -6px;
  margin-bottom: 8px;
  margin-left: -0.6rem;
  color: var(--odwyk-text-alternative-pale);
}
.episodeThumb .meta i {
  margin-left: 0.6rem;
  margin-right: 0.1rem;
  height: 12px;
}
.episodeThumb .d {
  color: var(--odwyk-text-alternative);
  font-weight: 700;
  font-size: 14px;
}

@media only screen and (min-width: 48em) {
  .episodeThumb h4 {
    font-size: 21px;
  }
  .episodeThumb .d {
    font-weight: 700;
    font-size: 15px;
  }
}

.episode {
  padding-bottom: 2rem;
}
.episode h2 {
  margin-top: 1.5rem;
  margin-bottom: 32px;
  font-family: "Kreon";
  font-size: 21px;
}
.episode .meta {
  font-size: 14px;
  margin-top: -26px;
  color: var(--odwyk-font-color-pale);
  margin-left: -0.5rem;
}
.episode .meta i {
  margin-left: 0.6rem;
  margin-right: 0.1rem;
  height: 12px;
}
.episode .description {
  margin-top: 1rem;
}
@media only screen and (min-width: 62em) {
  .episode h2 {
    margin-top: 0;
  }
}

.comments {
  margin-top: 2rem;
  padding-bottom: 2rem;
}
.comments h3 {
  text-align: center;
  font-size: 36px;
}
.comments .c {
  margin: 0.6rem 0;
  padding: 1rem 1rem;
  background-color: var(--odwyk-episode-background);
  border-radius: var(--odwyk-radius);
}
.comments .c .t {
  width: 100%;
  display: flex;
  margin-bottom: 8px;
}
.comments .c .tl {
  flex: 1 0 auto;
}
.comments .c .tr {
  flex: 0 1 auto;
}
.comments .c .b {
  width: 100%;
  display: flex;
}
.comments .c .i {
  flex: 0 1 auto;
  margin-right: 8px;
}
.comments .c .m {
  flex: 0 1 auto;
}
.comments .c .d {
  font-size: 12px;
  color: var(--odwyk-font-color-pale);
}
.comments .c .n {
  font-size: 19px;
  font-weight: 700;
}
.comments .c .tl img {
  margin-left: 8px;
  margin-top: -4px;
  max-height: 24px;
}
.comments .c .i img {
  max-width: 32px;
  border-radius: 16px;
}
.comments .x {
  font-size: 13px;
  color: var(--odwyk-text-alternative-pale);
  text-align: right;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 16px;
}
.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}
.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.episodes {
  margin-top: 2rem;
  padding-bottom: 2rem;
}
.episodes h4 {
  font-family: "Kreon";
  font-size: 21px;
  margin-bottom: 10px;
}
.episodes a {
  text-decoration: none;
}
.episodes .e {
  margin: 0.6rem 0;
  padding: 0.75rem 1rem;
  background-color: var(--odwyk-episode-background);
  border-radius: var(--odwyk-radius);
  display: flex;
  flex-direction: column;
}
.episodes .e .t {
  width: 100%;
  margin-bottom: 0px;
}
.episodes .e .b {
  display: flex;
  flex-direction: row;
}
.episodes .e .i {
  flex: 0 0 auto;
  margin-right: 16px;
}
.episodes .e .i img {
  width: 190px;
}
.episodes .e .ip {
  flex: 0 0 auto;
  width: 180px;
  padding-right: 1rem;
  display: none;
}
@media only screen and (min-width: 48em) {
  .episodes .e .ip {
    display: block;
  }
}
.episodes .e .ip img {
  margin-right: 16px;
  width: 180px;
}
.episodes .e .d {
  font-size: 14px;
  flex: 1 1 auto;
}
.episodes .e .extra {
  margin-top: 1rem;
}
.episodes .meta {
  text-align: center;
  font-size: 12px;
  padding: 0;
  margin-top: 4px;
  margin-left: -0.6rem;
  color: var(--odwyk-text-alternative-pale);
}
.episodes .meta i {
  margin-left: 0.6rem;
  margin-right: 0.1rem;
  height: 12px;
}

.prevnext {
  padding-bottom: 3rem;
  font-size: 14px;
  color: var(--odwyk-text-alternative-pale);
}

.addComment {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.heroBox p {
  font-size: 14px;
}
.heroBox img {
  margin-right: 0.75rem;
  margin-bottom: 0.2rem;
  max-width: 75px;
  max-height: 70px;
}
@media only screen and (min-width: 48em) {
  .heroBox p {
    font-size: inherit;
  }
  .heroBox img {
    max-width: 60px;
    max-height: 60px;
  }
}
@media only screen and (min-width: 75em) {
  .heroBox img {
    max-width: 100px;
    max-height: 90px;
  }
}

.todoList #todoNew {
  cursor: pointer;
}

.todoItem {
  width: 100%;
  display: flex;
  flex: "0 1 auto";
}

.todoItem h4 {
  font-size: 22px;
  letter-spacing: -1px;
  margin-bottom: 0.2rem;
}

.todoItem h4.checked {
  text-decoration: line-through;
}

.todoItem img {
  margin-right: 0.2rem;
  margin-top: -0.2rem;
  height: 1.7rem;
}

.todoContainer {
  padding: 0.6rem 1.2rem;
}