body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(255, 249, 232);
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: underline;
    color: rgb(65, 65, 110);
}

.playbutton {
    cursor: pointer;
    float: right;
    clear: right;
    font-size: 2em;
    color: #555;
}

.sidebar {
    height: 100%;
    width: 250px;
    margin-right: 20px;
    padding-left: 20px;
    overflow-y: scroll;
    position: fixed;
    background-color: rgb(197, 197, 184);
}

#sidebaropenbutton {
    position: fixed;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 2em;
    background-color: rgb(255, 249, 232);
    border: 1px solid rgb(197, 197, 184);
    display: none;
}

#sidebarclosebutton {
    position: fixed;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 2em;
    background-color: rgb(255, 249, 232);
    border: 1px solid rgb(197, 197, 184);
    right: 0px;
    z-index: 1;
    display: none;
}

.blurb {
    margin-right: 20px;
}
p.socials a {
    display: block;
    margin: 0px;
}

#logo {
    width: 230px;
    margin: 10px;
    margin-left: 0px;
    margin-top: 20px;
}

#main {
    margin-left: 270px;
    padding: 20px;
    padding-bottom: 300px;
}

a {
    cursor: pointer;
}

#searchbox {
    width: 90%;
    font-size: 1em;
    border-radius: 24px;
    padding-left: 18px;
}

.epsummary h2 a {
    text-decoration: none;
}

.pubdate {
    color: #888;
    float: right;
}

.epsummary {
    margin-bottom: 30px;
}

.shownotes {
    margin-left: 30px;
    clear: right;
    font-size: 1em;
}

#player {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 270px;
    padding: 20px;
    background-color: black;
    color: white;
}

#player #maxbutton {
    padding: 10px;
    cursor: pointer;
    margin: 0px;
    position: absolute;
    right: 0px;
}
#player.maximized #maxbutton {
    display: none;
}

#player #minbutton {
    padding: 10px;
    display: none;
    cursor: pointer;
    position: absolute;
    right: 0px;
}
#player.maximized #minbutton {
    display: block;
}

#player.maximized {
    left: 0px;
    top: 0px;
    z-index: 2;
}

#player .feedback {
    float: right;
    color: white;
}

#feedbacklink {
    color: #ddd;
}

body:has(> #player.maximized) {
    background-color: black;
}

#player audio {
    width: 100%;
    margin-bottom: 10px;
}

#playingtitle {
    font-style: italic;
}

#playingtitle a {
    color: #cff;
}

#transcript {
    color: #444;
    font-family: sans-serif;
    font-size: 2em;
    text-align: center;
    overflow-y: scroll;
    max-height: 200px;
    padding-left: 5%;
    padding-right: 5%;
}

#player.paused #transcript{
    color: #888;
}

#player.maximized #transcript {
    max-height: 90%;
}

#transcript span.highlight {
    color: #ddd;
}


.showtags {
    list-style:none;
    padding-left: 0px;
    line-height: 200%;
}

.showtags li {
    display: inline;
    background-color: #fcc;
    padding: 0.25em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.showtags a {
    color: black;
    text-decoration: none;
    white-space: nowrap;
}

li.tag_event {
    background-color: rgb(255, 255, 255);
}

li.tag_plot {
    background-color: #fcc;
}

li.tag_setting {
    background-color: #fec;
}

li.tag_mood {
    background-color: rgb(255, 254, 204);
}

li.tag_content {
    background-color: rgb(215, 244, 215);
}

li.tag_by {
    background-color:  rgb(224, 224, 254);
}

li.tag_narrator {
    background-color:  rgb(245, 224, 254);
}


@media only screen and (max-device-width: 500px) {
    .sidebar {
        display: none;
    }
    body.sidebaropen .sidebar {
        display: block;
        width: 100%;
    }
    .shownotes {
        font-size: 1em;
    }
    #main {
        margin-left: 10px;
        padding-bottom: 120px;
    }
    #player {
        left: 0px;
        padding: 3px;
    }
    #transcript {
        max-height: 50px;
        font-size: 1.5em;
    }
    #maxbutton {
        font-size: 2em;
        padding: 0px;
    }
    #minbutton {
        font-size: 2em;
    }
    #sidebaropenbutton {
        display: inherit;
    }
    body.sidebaropen #sidebarclosebutton {
        display: inherit;
    }
    #logo {
        width: 80px;
        float: left;
        margin: 10px;
        margin-left: 0px;
        margin-top: 20px;
    }
}