article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
    background-color: rgb(179, 246, 255);
}

body {
    margin: 0 auto;
    padding: 0;
    max-width: 600px;
    font-size: 16px;
    font-family: "Courier New", sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

header {
    padding: 0;
    border-radius: 0 0 2rem 2em;
    /* background are image and gradient are stacked in one line seperated by a '.' - size and position follow in same order background-size and background-position */
    background: url(_artwork/alien_white_10.png) no-repeat, linear-gradient(to bottom, rgb(124, 45, 252) 0%,rgb(255, 182, 247) 100%);
    background-size: 80px 100px, 100% auto;
    background-position: top 10% right 3%, 0 0;
}

h1 {
    margin: 0;
    padding: 3.5rem 1rem .25rem 1rem;
    text-align: center;
    font-size: 2.5rem;
    font-style: italic;
    text-shadow: 0px 0px 15px rgb(230, 140, 224);
}
h1 span {
    font-weight: 100;
}

h1 a:link,
h1 a:active,
h1 a:visited {
    text-decoration: none;
    color: rgb(252, 255, 176);
}

h1 a:hover {
    color: rgb(253, 253, 52);
}


header p {
    margin: 0 1rem 3rem 1rem;
    padding: 0;
    text-align: center;
    font-style: italic;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 6px rgb(226, 0, 255);
    /*color: rgb(189, 221, 221);*/
    /*text-shadow: 0px 0px 8px rgb(30,46,46);*/
}

nav {
    margin: 1rem 0;
    padding: 1rem;
    background-color: rgb(179, 255, 188);
    border-radius: 0 0 2rem 2rem;
}

.home-page nav,
.not-home-page nav {
    border-radius: 0;
    margin-bottom: 0;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

nav li{
    display: inline-block;
    padding: 0;
    margin: 0;
    font-weight: 800;
}

nav a:link,
nav a:active,
nav a:visited {
    padding: .5rem;
    display: block;
    text-decoration: none;
    color: rgb(42, 85, 142);
}

nav a:hover {
    color: rgb(110, 43, 116);
    background: rgb(246, 255, 179);
    /*background: rgb(206, 240, 250);*/
    border-radius: .5rem;
}

section.links {
    padding: 0 0 1rem 0;
    border-radius: 0 0 2rem 2rem;
    background: rgb(255,255,255);
}

h2 {
    margin: 0;
    padding: 1rem 1rem .2rem 1rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    color: rgb(75,98,98);
    border-bottom: 1px solid rgb(234, 243, 244);
}

h2.episode-archive,
h2.featured {
    background-color: rgb(255,255,255);
    padding: 1.5rem 1rem 1.5rem 1rem;
    text-transform: none;
    font-weight: 700;
    font-size: 1.5rem;
    border-radius: 0 0 2rem 2rem;
    border-bottom: none;
    
}

section.links p {
    margin: 0;
    padding: 2.5rem 1.75rem 1.25rem 1.75rem;
    color: rgb(75,98,98);
    text-align: center;
    line-height: 1.2rem;
}

.feeds {
    margin: 0;
    padding: 0 1rem;
    text-align: center;
    list-style: none;
    line-height: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.feeds a:link,
.feeds a:active,
.feeds a:visited {
    width: 80px;
    padding: 1rem;
    text-decoration: none;
    color: rgb(62, 134, 134);
}

.feeds a:hover {
    background-color: rgb(179, 246, 255);
    border-radius: 1rem;
    color: rgb(40,50,50);
}

section {
    line-height: 1.5rem;
}


ul.archive {
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    margin: 2rem;
    padding: 0 3rem;
    background-color: rgb(248, 250, 206);
    border-radius: 2rem;
}

ul.archive li {
    display: inline-block;
    padding: 1rem;
}

ul.archive a:link,
ul.archive a:active,
ul.archive a:visited {
    padding: .5rem 2rem;
    display: block;
    text-decoration: none;
    color: rgb(62, 134, 134);
}

ul.archive a:hover {
    color: rgb(40,50,50);
    background: rgb(207, 245, 250);
    border-radius: 1rem;
}


/*.archive {
    display: block;
    text-align: center;
    border-radius: 2rem;
    margin: 1rem auto;
    background-color: rgb(255,255,255);
}*/

article,
.main-content {
    margin: 1rem 0;
    padding: 1rem 1rem 2rem 1rem;
    border-radius: 2rem;
    background-color: rgb(255,255,255);
    color: rgb(34, 28, 18);
}

.main-content {
    padding: 1rem 3rem 3rem 3rem;
}

p.listen a:link,
p.listen a:active,
p.listen a:visited,
.main-content a:link,
.main-content a:active,
.main-content a:visited {
    color: rgb(13, 101, 180);
}

p.listen a:hover,
.main-content a:hover {
    text-decoration: /* underline */ overline;
    color: rgb(22, 172, 172);
}

p.listen a {
    padding: 0 .3rem;
}

p.listen {
    margin: -.2rem 0 0 0;
    padding: 0;
    text-align: center;
    font-size: .9rem;
}

article h3 {
    margin: -1rem -1rem 1rem -1rem;
    text-align: center;
}

article h3 a em {
    margin-left: .3rem;
    font-style: italic;
}

article h3 a:active,
article h3 a:link,
article h3 a:visited {
    display: block;
    border-radius: 2rem 2rem 0 0;
    border-bottom: 1px solid rgba(252, 191, 56,.5);
    width: inherit;
    margin: 0;
    padding: 1rem 1rem .75rem 1rem;
    background: rgb(252, 255, 179);
    text-decoration: none;
    color: rgb(42, 85, 142);
}

article h3 a:hover {
    color: rgb(154, 60, 248);
    background: rgb(235, 250, 206);
    
}

article h3 .episode-date {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: .9rem;
}

article .show-art {
    max-width: 50%;
    margin: 1rem 0 1rem 1rem;
    float: right;
    
}

.show-art img {    
    border-radius: 1rem;
}

article p {
    padding: 0 1.5rem;
}

audio {
    width: 70%;
    margin: 1rem auto 2rem auto;
    display: block;
}

.download-podcast {
    margin: 1rem ;
    text-align: center;
}

.download-podcast a:link,
.download-podcast a:active,
.download-podcast a:visited {
    border-radius: 2rem;
    border: 1px solid rgba(252, 191, 56,.5);
    padding: 1rem 2rem;
    background: rgb(252, 255, 179);
    text-decoration: none;
    color: rgb(62, 134, 134);
}

.download-podcast a:hover {
    color: rgb(40,50,50);
    background: rgb(179, 246, 255);
}

h4.show-notes {
    margin: 2rem 0 1rem 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    border-bottom: none;
}

article ul li {
    line-height: 1.2rem;
    padding-bottom: .6rem;
}

article ul a:link,
article ul a:active,
article ul a:visited,
article p a:link,
article p a:active,
article p a:visited{
    color: rgb(13, 101, 180);
}

article ul a:hover,
article p a:hover {
    text-decoration: /* underline */ overline;
    color: rgb(22, 172, 172);
}

h4 {
    padding: 0 0 .25rem 0;;
    text-align: center;
    font-weight: 100;
    text-transform: uppercase;
    border-bottom: 1px solid rgb(234, 243, 244);
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.gallery-item {
    max-width: 177px;
    padding-bottom: 1rem;
}

.gallery-item img {
    display: block;
}

.gallery-item p {
    text-align: center;
    margin: .25rem 0 0 0;
    padding: 0;
    font-size: .9rem;
    line-height: 1rem;
}

.gallery-item p a:link,
.gallery-item p a:active,
.gallery-item p a:visited {
    display: block;
    font-size: .8rem;
    color: rgb(13, 101, 180);
}

.gallery-item p a:hover {
    text-decoration: /* underline overline */ none;
    color: rgb(22, 172, 172);
}

/* CONTACT FORM */

form {
    display: block;
    max-width: 500px;
    background: rgb(255,255,255);
    margin: 0 auto;
    padding: 2rem;
    border-radius: 2rem;
}

form h3 {
    text-align: center;
    margin-bottom: 3rem;
}

input,
select,
textarea {
    font-family: Courier New;
    display: block;
    font-size: 1rem;
    background-color: rgb(242, 242, 242);
    padding: .5rem;
    margin: 0 0 1rem 0;
    width: 100%;
    border-width: 0px;
    border-radius: .5rem;
}

select {
    display: inline;
    width: auto;
}

form p {
    display: inline;
    margin-right: 1rem
}

textarea {
    min-height: 7.5rem;
}

::placeholder {
    color: rgb(72, 72, 72);
}

.submit {
    width: 50%;
    margin: 2rem auto 0 auto;
    background-color: rgb(0,103,103);
    font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    color: rgb(12,234,174);
    font-size: 1.25rem;
}
.submit:hover {
    background-color: rgb(0,153,153);
    color: rgb(234,231,12);
}

/* END CONTACT FORM */

.card {
    overflow: auto;
}

.card img {
    float: right;
    margin: 0 0 1rem 1rem;
    width: 240px;
    border-radius: 1.5rem;
}

footer {
    display: flex;
    justify-content: space-around;
    border-radius: 2rem;
    margin: 2rem 0 2rem 0;
    padding: 2.5rem 1rem 1rem;
    background: rgb(255, 226, 179);
    font-size: .75rem;
    color: rgb(46, 14, 0);
}

footer a:link,
footer a:visited,
footer a:active {
    color: rgb(46, 14, 0);
}

footer a:hover {
    text-decoration: none;
    color: rgb(201, 4, 4);
}

footer ul {
    margin: 0;
    padding: 0;
    max-width: 30%;
    list-style: none;
}

footer ul li {
    display: block;
    margin-bottom: .8rem
}

footer ul li span {
    text-transform: uppercase;
}

@media only screen and (max-width: 420px) {
    
    h1 {
        margin: 0;
        padding: 2.5rem 1rem .2rem 1rem;
        font-size: 2em;
        text-shadow: 0px 0px 10px rgb(0, 0, 0);
    }
    
    header p {
        margin: 0 1rem 3.5rem 1rem;
        padding: 0;
        text-shadow: 0px 0px 10px rgb(0, 0, 0);
    }
    
    nav {
        margin: .5rem 0;
    }
    
    nav a:link,
    nav a:active,
    nav a:visited {
        padding: .1rem;
    }
    
    section.links p {
        padding: 1rem;
    }
    
    .feeds a:link,
    .feeds a:active,
    .feeds a:visited {
        width: 60px;
        padding: 10px;
        line-height: 1.3rem;
    }
    
    .main-content {
        padding: 1rem;
    }

    audio {
        width: 100%;
    }
    
    .download-podcast {
        float: none;
        width: 100%;
        text-align: center;
    }

    .download-podcast a:link,
    .download-podcast a:active,
    .download-podcast a:visited {
        border-radius: .5rem;
        padding: .5rem 1rem;
        background: rgb(248, 250, 206);
        text-decoration: none;
        color: rgb(62, 134, 134);
    }

    .download-podcast a:hover {
        color: rgb(40,50,50);
        background: rgb(206, 240, 250);
    }
    
    article {
        padding: .5rem;
    }
    
    article ul {
        padding: 0 1rem;
    }
    
    .gallery item {
        max-width: 140px;
        padding-bottom: 1rem;
    }

    footer {
        font-size: .6rem;
        margin: 2rem 0 0 0;
        border-radius: 0;
    }
    
    footer ul {
        max-width: 25%;
    }

}