/* make text look nice */
.mdc-typography--headline3, .mdc-typography--subtitle1 {
    text-transform: capitalize;
}
.mdc-typography--headline3, .mdc-typography--subtitle1, figure {
   margin: 5px;
}
.mdc-typography--caption-text {
    font-style: italic;
    margin: 5px;
}
.mdc-typography--headline5 {
    margin-bottom: 5px;
}

/* change background */
.article-content {
    background-color: var(--mdc-theme-background);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* hide empty black bar if there is no content to the page */
.article-content:empty {
    display: none;
}

/* position headline in middle of image */
.parallax-section {
    text-align: center;
    vertical-align: middle;
    padding: 200px 15px;
}

/* audio */
.article-content audio {
    width: 100%;
}

/* video/podcast */
iframe {
    width: 100%;
    overflow: hidden;
    border: none;
}

/* adjust video dimensions depending on screen size */
.video {
    height: calc(68.8vw / 16 * 9);
}
@media screen and (max-width: 1550px) {
    .video {
      width: 100%;
        height: calc(70vw / 16 * 9 - 6px);
    }
}
@media screen and (max-width: 800px) {
    .video {
      height: calc(90vw / 16 * 9 - 5px);
    }
    .mdc-typography--headline3, .mdc-typography--headline5 {
        font-size: 2.5rem;
        line-height: 2.625rem;
    }
}
@media screen and (max-width: 400px) {
    .mdc-typography--headline3, .mdc-typography--headline5 {
        font-size: 2rem;
        line-height: 2.125rem;
    }
}
@media screen and (max-width: 600px) {
    .video {
        height: calc(93.5vw / 16 * 9);
    }
}

/* scroll-to-top button */
.top-scroll-button {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #273967;
    display: none;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
}
.top-scroll-button-image-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-scroll-button img {
    width: 35px;
    height: auto;
    position: relative;
    bottom: 2px;
    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
    background-color: #1C2E56;
}
.top-scroll-button:hover img {
    bottom: 5px;
}