/* Episode Lists */

.series_header {
    font-family: ZeroTwos;
    font-size: 24pt;
    text-shadow:  0.2vw  0.2vw 0.2vw #000000,
                  0.2vw -0.2vw 0.2vw #000000,
                 -0.2vw  0.2vw 0.2vw #000000,
                 -0.2vw -0.2vw 0.2vw #000000;
    text-align: center;
    color: #e9c678;
}

.episode_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 1.8in;
    flex-grow: 4in;
    justify-content: space-around;
}

.episode_square {
    position: relative;
    width: 3in;
    min-width: 1.8in;
    max-width: 4in;
    height: 3in;
    min-height: 1.8in;
    max-height: 4in;
    margin: 5pt;
}

.episode_img {
    width: 3in;
    min-width: 1.8in;
    max-width: 4in;
    height: 3in;
    min-height: 1.8in;
    max-height: 4in;
    position: absolute;
    top: 0px;
    left: 0px;
}

.episode_num,
.episode_title,
.episode_date {
    font-family: ZeroThrees;
    color: #e9c678;
    text-shadow:  0.3vw  0.3vw 1vw #000000,
                  0.1vw -0.1vw 0.2vw #000000,
                 -0.1vw  0.1vw 0.2vw #000000,
                 -0.1vw -0.1vw 0.2vw #000000;    
    position: absolute;
    text-align: left;
    vertical-align: top;
    margin: 2pt;
}

.episode_num {
    font-size: 40pt;
    top: 70%;
    left:1pt;
}

.episode_title {
    font-size: 12pt;
    bottom: 15%;
    left:35pt;
}

.episode_date {
    font-size: 10pt;
    top: 85%;
    left:35pt;
}


@media only screen and ((max-width: 400px) or (max-height: 600px)) {
    .episode_img,
    .episode_square {
        width: 2.4in;
        max-width: 2.4in;
        min-width: 1.5in;
        height: 2.4in;
        max-height: 2.4in;
        min-height: 1.5in;
    }
    
    .episode_num { font-size: 20pt; }
    .episode_title,
    .episode_data { font-size: 9pt; }
    
}