:root {
  --pico-font-family: "Kreon";
  --odwyk-green: #90df38;
  --odwyk-font-color-pale: #a0a0a0;
  --odwyk-green-alternative: #254105;
  --odwyk-green-alternative-pale: #223b0580;
  --odwyk-text-border: #c3ff43;
  --odwyk-radius: 0.8rem;
}

.col-xs-hidden {
  display: none;
}
.col-xs-visible {
  display: block;
}

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

@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;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --pico-font-family: "Caveat Brush", cursive;
  --pico-font-weight: 400;
  --pico-typography-spacing-vertical: 0.6rem;
}

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;
}
@media only screen and (min-width: 48em) {
  main #page {
    margin: 1rem 1rem;
    padding: 1.5rem 2rem;
    border-radius: var(--odwyk-radius);
  }
}
main #page .section {
  margin-bottom: 3rem;
}

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

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

.episodeThumb {
  margin: 0.6rem 0;
  padding: 0.75rem 1rem;
  background-color: #e0ffcd;
  border-radius: var(--odwyk-radius);
  display: flex;
  overflow: hidden;
  height: 240px;
}
.episodeThumb .l {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.episodeThumb .i {
  flex: 0 1 auto;
  margin-bottom: 16px;
}
.episodeThumb .i img {
  width: 190px;
  border-radius: var(--odwyk-radius);
}
.episodeThumb a {
  text-decoration: none;
}
.episodeThumb h4 {
  text-align: left;
  font-weight: 700;
  color: var(--odwyk-green-alternative);
}
.episodeThumb .b {
  display: flex;
}
.episodeThumb .r {
  position: relative;
  text-align: left;
  color: var(--odwyk-green-alternative);
  padding-left: 12px;
  font-weight: 400;
  font-size: 17px;
  overflow: hidden;
}
.episodeThumb .meta {
  text-align: center;
  font-size: 12px;
  padding: 0;
  margin-top: -12px;
  margin-left: -0.6rem;
  color: var(--odwyk-green-alternative-pale);
}
.episodeThumb .meta i {
  margin-left: 0.6rem;
  margin-right: 0.1rem;
  height: 12px;
}
.episodeThumb .d {
  font-weight: 700;
  font-size: 14px;
}
.episodeThumb .fadeout {
  position: absolute;
  top: 100px;
  width: 100%;
  height: 100px;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #e0ffcd 100%);
}

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

.episode {
  padding-bottom: 2rem;
}
.episode h2 {
  margin-top: 1.5rem;
}
.episode .meta {
  font-size: 14px;
  margin-top: -8px;
  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;
}
.comments .c {
  margin: 0.6rem 0;
  padding: 1rem 1rem;
  background-color: #e0ffcd;
  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-green-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 a {
  text-decoration: none;
}
.episodes .e {
  margin: 0.6rem 0;
  padding: 0.75rem 1rem;
  background-color: #e0ffcd;
  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-green-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-green-alternative-pale);
}

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