@font-face {
    font-family: "Vollkorn";
    src: url("/static/fonts/Vollkorn-Regular.woff2"), format("woff2"),
        url("/static/fonts/Vollkorn-Regular.woff"), format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Vollkorn";
    src: url("/static/fonts/Vollkorn-Bold.woff2"), format("woff2"),
        url("/static/fonts/Vollkorn-Bold.woff"), format("woff");
    font-weight: bold;
}

@font-face {
    font-family: "Vollkorn";
    src: url("/static/fonts/Vollkorn-Italic.woff2"), format("woff2"),
        url("/static/fonts/Vollkorn-Italic.woff"), format("woff");
    font-style: italic;
}

@font-face {
    font-family: "EagleLake";
    src: url("/static/fonts/EagleLake-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "YsabeauOffice";
    src: url("/static/fonts/YsabeauOffice-VariableFont_wght.ttf");
    font-weight: 1 1000;
    font-style: normal;
}

@font-face {
    font-family: "YsabeauOffice";
    src: url("/static/fonts/YsabeauOffice-Italic-VariableFont_wght.ttf");
    font-weight: 1 1000;
    font-style: italic;
}

.center {
    margin: auto;
}

body {
	background-color: #EBE6D7;
	margin: 0;
	font-family: "Vollkorn", "Times New Roman";
}

header {
    background-color: #426C4C;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "logo title"
                        "navigation navigation"
}

header img {
   width: 150px;
   height: 150px;
   grid-area: logo;
   margin: auto;
}

nav {
    grid-area: navigation;
    display: flex;
    justify-content: space-evenly;
}

nav a {
    color: #EBE6D7;
    font-family: 'EagleLake', 'Goudy Old Style', 'Luminari', 'Copperplate';
    text-decoration: none;
    padding: 20px;
    height: 30px;
    font-size: 1.25rem;
}

footer {
    clear: both;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: #426C4C;
}


h1 {
	font-family: 'EagleLake', 'Goudy Old Style', 'Luminari', 'Copperplate';
	color: #EBE6D7;
	grid-area: title;
	padding-left: 10%;
	padding-top: 5px;
	font-size: 2.5em;
}

h1 a {
    color: #EBE6D7;
    text-decoration: none;
}

h2, h3, h4, h5, h6 {
    font-family: "YsabeauOffice";
}

h2 {
    width: 100%;
    text-align: center;
    color: #426C4C;
    font-weight: bold;
    text-transform: uppercase;
}

.about, .contact, .podcasts-page {
    width: 95%;
    max-width: 60em;
    margin: auto;
}

.about img {
    display: block;
    margin: auto;
    margin-bottom: 10px;
    width: 80%;
}

.about p, .contact p {
    font-size: 1.35rem;
}

.podcast-card {
    border-radius: 10px;
    margin: auto;
    width: 75%;
    margin-top: 20px;
}

.podcast-card a {
        text-decoration: none;
        color: black;
}

.podcast-card img {
    width: 100%;
}

.podcast-page {
    width: 90%;
    margin: auto;
}

.podcast-sidebar img {
    width: 100%;
    margin-bottom: 10px;
}

.podcast-episodes section {
    padding: 10px;
    border-bottom: 1px #426C4C solid;
    margin-bottom: 15px;
}

audio {
    width: 100%;
    margin-top: 15px;
}

.episode-date {
    font-style: italic;
    color: gray;
}

hr {
    border-color: #426C4C;
}

input, textarea {
    display: block;
    width: 90%;
    margin: auto;
    font-size: 1.35rem;
    font-family: "YsabeauOffice";
}

button {
    font-size: 1.35rem;
    font-family: "YsabeauOffice";
    display: block;
    background-color: #426C4C;
    color: #EBE6D7;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    margin: auto;
}

.clear {
    clear: both;
}


@media only screen
    and (min-width: 600px)
    {

    header {
        grid-template-columns: 2fr 1fr 2fr;
        grid-template-rows: 1fr;
        grid-template-areas: "title logo navigation";
    }

    nav {
        margin-top: 50px;
    }

    h1 {
        padding-top: 25px;
        margin: auto;
    }

    .about, .contact, .podcasts-page {
        width: 75%;
    }

    .about img {
        width: 50%;
        float: right;
        margin-right: 20px;
        margin-left: 20px;
        margin-bottom: 20px;
    }


    .podcast-card {
        float: left;
        width: 45%;
        margin-left: 20px;
    }

    .podcast-page {
        width: 75%;
    }

    .podcast-sidebar img {
        width: 25%;
        float: left;
        margin-right: 10px;
    }

    .podcast-episodes section {
        clear: left;
    }
    }


@media only screen
    and (min-width: 1200px)
    {
    .podcast-page {
        width: 75%;
        display: grid;
        grid-template-columns: 25% 70%;
        grid-template-areas: "podcast-sidebar podcast-episodes"
    }

    .podcast-sidebar {
        grid-area: podcast-sidebar;
        margin-right: 20px;
    }

    .podcast-episodes {
        grid-area: podcast-episodes;
    }

    .podcast-sidebar img {
        width: 100%;
        float: left;
    }

    .podcast-card {
        float: left;
        width: 23%;
        margin-left: 20px;
    }

    .about img {
        width: 35%;
    }
    }