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

  .table {
    width                  : fit-content;
    --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);
    max-width              : 100%;
    height                 : auto;
    border-radius          : .375rem;
    display                : block;
    margin-bottom          : 4rem;
    margin-top             : 4rem;
    margin-left            : auto;
    margin-right           : auto;

    padding-left : 2rem;
    padding-right: 2rem;

    table {
      table-layout: auto;
      text-align  : left;
      margin-left : 1.5rem;
      margin-right: 1.5rem;

      colgroup>col {
        width: 220px;
      }

      colgroup .highlight {
        background-color: #f7f9ff;
      }

      thead {
        margin-top: 1.5rem;

        tr {
          text-align   : center;
          border-bottom: 2px solid rgba(0, 0, 0, 0.19);
        }

        tr>th {
          padding-top   : 1.4rem;
          padding-bottom: 1.4rem;
        }
      }

      tbody {
        margin-bottom: 1.5rem;
        text-align   : center;

        tr {
          border-bottom: 2px solid rgba(0, 0, 0, 0.06);
        }

        tr>td {
          height   : 4.5rem;
          font-size: 0.9rem;

          >* {
            margin-left : auto;
            margin-right: auto;
          }

          img[src*="tick.svg"],
          img[src*="cross.svg"],
          img[src*="windows.svg"],
          img[src*="linux.svg"] {
            width: 1.4rem;
          }

          img[src*="docker.svg"] {
            width: 2rem;
          }
        }

        tr:last-child {
          border-bottom: 0px;
        }

        tr td:first-child {
          text-align: left;
          opacity   : 0.65;
        }

        .link {
          position: relative;

          a:hover {
            opacity: 1 !important;

            img {
              opacity: 1;
            }
          }

          a {
            display    : flex;
            align-items: center;
            height     : 100%;

            div {
              width       : fit-content;
              display     : flex;
              margin-left : auto;
              margin-right: auto;

              >* {
                margin: 6px;
              }
            }

            >img {
              position    : absolute;
              right       : 15px;
              width       : 0.75rem;
              margin-right: auto;
              margin-top  : -3px;
              opacity     : 0.5;
            }
          }
        }
      }
    }

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