body
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 150%;
    color: #4d4d4d;
    background-color: #b0c6b0;
}

.mp3FileHashContainer
{
    word-break: break-all;
    font-size:11pt;
    padding-right:25px;
}

div, img
{
    box-sizing: border-box;
}

h1
{
    font-size: 2vw;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

h2
{
    font-size: 1.75em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

h3
{
    display: inline;
    font-size: 1.5em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

h4
{
    font-size: 1.125em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

a
{
    color: darkolivegreen;
}

.noStyleLink
{
    text-decoration: none;
}

ul
{
    list-style-type: none;
}

li
{
    text-indent: 0;
    margin-block-start: .5em;
}

.topBodyContainer
{

}

.header
{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    position: sticky;
    z-index: 10;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 10px 3%;
    text-align: center;
    color: darkolivegreen;
    background-color: #dbdbdb;
    box-shadow: 0 3px 5px #00000066;
}

.headerCenter
{
    order: 2;
    width: 70%;
    max-width: 830px;
}

.headerLogo
{
    width: 100%;
    max-height: 85px;
    object-fit: contain;
}

.leftContainer
{
    order: 1;
    width: 15%;
    padding-right: 16px;
    cursor: pointer;
}

.rightContainer
{
    order: 3;
    width: 15%;
    height: 100%;
    padding-left: 16px;
}

.rightImage, .leftImage
{
    width: 100%;
    max-height: 85px;
    min-height: 50px;
    object-fit: contain;
}

.audioPlayerMask
{
    position: sticky;
    top: 0;
    z-index: 9;
    width: 92%;
    max-width: 1200px;
    margin: 2% auto;
    padding: 1% 4% 1%;
    background-color: #f8f8f8;
    box-shadow: 0 3px 5px #00000066;
}

.closeButton
{
    position: absolute;
    top: 4px;
    right: 12px;
    cursor: pointer;
    color: darkred;
    font-family: sans-serif;
}

.audioPlayer
{
    width: 90%;
    margin: 8px 5%;
}

audio::-webkit-media-controls-enclosure
{
    background-color: #dbdbdb;
}

.playAudioButton
{
    cursor: pointer;
}

.mainPageContainer
{

}

.mainPage
{
    display: block;
    width: 92%;
    max-width: 1200px;
    margin: 2% auto;
    padding: 1% 4% 1%;
    background-color: #f8f8f8;
}

.mainPageTitle
{
    width: 100%;
    margin: 0;
    text-align: center;
    color: darkolivegreen;
    text-shadow: 2px 2px 3px #00000088;
}

.mainContent
{
    display: grid;
    grid-template-columns: auto;
    padding: 0;
}

.mainContentTopSection
{
    grid-column: 1 / span 2;
}

.banner
{
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    height: fit-content;
    margin: 0 0 0 8px;
    padding: 0;
}

.adContainer
{
    width: 100%;
    min-width: 150px;
    margin: 0 0 8px 0;
    padding: 12px;
    text-align: center;
    align-content: center;
    border: solid 1px #4d4d4d;
    background-color: #00000011;
}

.adImage
{
    width: 100%;
    max-height: 200px;
    margin: 0 0 10px 0;
    object-fit: contain;
}

.episodeList
{
    padding: 0;
    margin: 0 0;
}

.episodeListTitle
{
    padding: 1em 0 .5em;
}

.episode
{
    margin: 0 0 24px 0;
}

.episode::after
{
    content: "";
    clear: both;
    display: table;
}

.episodeTitle
{
    color: darkolivegreen;
}

.subtitle
{
    color: #4d4d4d;
}

.episodeImage
{
    width: 200px;
    float: left;
    margin: 8px 16px 12px 0;
    box-shadow: 4px 4px 6px gray;
}

.episodeDescription
{

}

.footer
{
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 2%;
    margin: 1% 0 0 0;
    font-size: .75em;
    text-align: center;
    border-top: solid 2px #4d4d4d;
}

@media screen and (min-width: 1200px)
{
    h1
    {
        font-size: 3vw;
    }
}

@media screen and (max-width: 900px)
{

}

@media screen and (max-width: 700px)
{
    .episodeTitle
    {
        padding: 0 0 .5em 0;
    }

    .episodeList
    {
        grid-column: 1 / span 2;
    }

    .banner
    {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: fit-content;
        flex-flow: wrap;
        align-items: stretch;
        justify-content: space-around;
        margin: 16px auto 0;
    }

    .adContainer
    {
        width: 32%;
        font-size: 1.25em;
    }

    .adImage
    {
        max-height: 120px;
    }
}

@media screen and (max-width: 600px)
{
    h1
    {
        font-size: 3vw;
    }

    h2
    {

    }

    h3
    {

    }

    ul
    {
        margin-block-start: 0;
        padding-inline-start: 20px;
    }

    #.header
    #{
     #   padding: 0;
      #  justify-content: space-evenly;
       # box-shadow: 0 1px 8px #00000088;
    #}
/*
    .headerCenter
    {
        order: 1;
        width: 100%;
    }
*/
    .headerLogo
    {
        width: 100%;
        max-height: 65px;
        margin: 0 0 2% 0;
        padding: 0 0 12px;
        border-bottom: double 6px #4d4d4d;
    }
/*
    .leftContainer
    {
        order: 2;
        width: 20%;
    }

    .rightContainer
    {
        order: 3;
        width: 20%;
    }

    .leftImage, .rightImage
    {
        max-height: 50px;
    }
*/
    .mainPage, .audioPlayerMask
    {
        width: 96%;
    }

    .mainContent
    {
        padding: 0;
    }

    .banner
    {
        width: 92%;
        height: fit-content;
        flex-flow: column;
    }

    .adContainer
    {
        width: 100%;
    }

    .adImage
    {
        float: left;
        width: auto;
        max-width: 50%;
        margin: 0 8px 0 0;
    }

    .episodeImage
    {
        float: none;
        margin: 0 0 8px 0;
    }
}

@media screen and (max-width: 450px)
{
    .topBodyContainer
    {
        position: relative;
    }
}