#page-container {
  &.imprint {
    h4 {
      padding-top: 2rem;
    }

    p {
      padding: .5rem 0;
    }
  }
}

#page-container content .progress-update {
  h4{
      font-size: 1.125rem;
      margin: 0;
      padding-left: .75rem;
      font-weight: 700;
    }
  hr{
    margin: 0;
    border-top-width: 1px;
  }
}

#page-container content {
  p {
    margin-top: 1rem;
    color     : #545454;
  }

  strong {
    color: #353535;
  }

  a {
    --text-opacity     : 1;
    color              : #667eea;
    color              : rgba(102, 126, 234, var(--text-opacity));
    text-decoration    : inherit;
    background-color   : transparent;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;

    strong {
      --text-opacity: 1;
      color         : #667eea;
      color         : rgba(102, 126, 234, var(--text-opacity))
    }
  }

  a:hover {
    opacity                   : .5;
    transition-duration       : 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  }

  h1 {
    font-size  : 3rem;
    font-weight: 600;
    color      : #000;
  }

  h2 {
    font-size     : 1.8rem;
    margin-top    : 2rem;
    font-weight   : 500;
    color         : #000;
    border-bottom : 1px solid #d7d7d7;
    padding-bottom: 0.5rem;
  }

  h3 {
    font-size  : 1.4rem;
    margin-top : 2.5rem;
    font-weight: 500;
    color      : #000;
  }

  h4 {
    font-size  : 1.2rem;
    margin-top : 1.5rem;
    font-weight: 500;
    color      : #000;
  }

  h5 {
    font-size  : 1.1rem;
    margin-top : 1.5rem;
    font-weight: 500;
    color      : #000;
  }

  h6 {
    font-size  : 1rem;
    margin-top : 1.5rem;
    font-weight: 500;
    color      : #000;
  }

  ul {
    padding-top    : 1.25rem;
    padding-left   : 1.85rem;
    list-style-type: disc;
    color          : #545454;

    li {
      padding-left: .25rem;

      li ul {
        padding-top    : 0.05rem;
        padding-left   : 1.25rem;
        list-style-type: disc;
        color          : #545454;
      }
    }
  }

  pre {
    padding         : 16px;
    overflow        : auto;
    font-size       : 10%;
    line-height     : 1.45;
    background-color: #f7f7f7;
    border-radius   : 3px;
    padding-top     : 1rem;
    display         : flex;
    margin-top      : 1rem;

    code {
      background-color: transparent;
      padding-left    : 0;
      padding-right   : 0;
      color           : black;
      font-size       : 0.8rem;
      font-weight     : 500;
      max-width       : 5rem;
      display         : inline;
    }
  }

  hr {
    margin-top      : 3rem;
    margin-bottom   : 3rem;
    border-top-width: 2px;
  }

  code {
    color      : #ba00bf;
    font-weight: 500;
    font-size  : .875rem;
    word-break : break-word;

    &::after {
      content: "`";
    }

    &::before {
      content: "`";
    }
  }

  em {
    font-weight: 400;
  }

  ol {
    padding-top    : 0.1rem;
    list-style-type: decimal;
    padding-left   : 1rem;
    color          : #545454;

    li {
      padding-top: 0.4rem
    }
  }

  blockquote {
    padding-left: 1rem;
    margin-top  : 1.55rem;
    color       : black;
    opacity     : 1;
    border-left : 4px solid #ddd;
}

  .content {
    max-width : 750px;
    margin    : auto;
    margin-top: 3rem;

    p img {
      --transform-translate-x: 0;
      --transform-translate-y: 0;
      --transform-rotate     : 0;
      --transform-skew-x     : 0;
      --transform-skew-y     : 0;
      --transform-scale-x    : 1.1;
      --transform-scale-y    : 1.1;
      transform              : translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
      box-shadow             : 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
      margin-top             : 5rem;
      max-width              : 100%;
      height                 : auto;
      border-radius          : .375rem;
      display                : block;
      margin-bottom          : 4rem;
      margin-top             : 5rem;
    }

    .podcast h2 {
      padding-top   : 1rem;
      font-weight   : 500;
      font-size     : 1rem;
      padding-bottom: 0.5rem;
    }

    audio {
      padding-bottom: 1.5rem;
    }
  }
}

.notification-podcast {
  font-size       : .85rem;
  background-color: #5c85ff;
  width           : fit-content;
  width           : -moz-fit-content;
  overflow-wrap   : break-word;
  padding-left    : 1.25rem;
  padding         : 1.25rem;
  margin-bottom   : 1.25rem;
  margin-top      : 1.25rem;
  display         : flex;
  border-radius   : .375rem;
  width           : 100%;

  p {
    color     : #fff !important;
    margin-top: 0 !important;
  }

  img {
    width       : 1.5rem;
    margin-right: 1.25rem;
    height      : 1.5rem;
    align-self  : center;
    max-width   : 100%;
    display     : block;
    border-style: solid;
  }

  a {
    color          : white !important;
    padding-left   : .25rem;
    padding-right  : .25rem;
    text-decoration: underline !important;
  }

  a:hover {
    opacity                   : .5;
    transition-duration       : 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}