*{margin:0;padding:0}

/* Margins - main page areas */
header{margin-top: 0px}
main, footer{margin-top:10px}
body{margin:auto}

/* Margins - sub page areas */
section{margin-bottom:10px}

/* Padding */
footer, section{padding:10px}

/* Element Sizes */
body{max-width:800px}
header{height:80px;width:300px}
footer{height:40px}

/* Positioning (Display and Clear) */
header, main, footer{display:block;clear:both}
header h1{display:inline}

/* Background Colours */
    body, main{background-color: #f17e20
    }
    header, footer, main section{background-color: #ffc462
    }
    .nav{background-color: #fbb93d
    }

/* Image Classes */
.imageBanner{width:100%;height:100%;object-fit: cover}

/* Navigation Bar */
    .nav{
        height:35px;
        margin:0;
        padding:0;
        text-align:center
    }
    .nav ul{
        display: inline-block;
        list-style-type:none;
        clear:both
    }
    .nav li{
        float:left;
        width:80px;
        display:inline;
    }
    .nav a{
        display:inline-block;
        padding:8px
    }
        .nav a:link {
            text-decoration:none
        }
        .nav a:visited {
            text-decoration:none
        }
        .nav a:hover {
            text-decoration:underline
        }

/* IDs */
#intro{display: flex; justify-content: center;} /* home > introduction */

/* Header (behind banner image) */
header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 160px;
}

/* Sections - rounded */
main section{
    border-radius: 20px;
}

/* Latest Episode Button */
main a.button{
    display: flex;
    align-items: center;
    justify-content: center;
    width:125px;
    height:35px;
    margin-left:auto;
    margin-right:auto;
    padding: 6px 6px;
    border: 4px solid #cf6711;
    border-radius: 20px;
    color: buttontext;
    background-color: #fbb93d;
    text-decoration: none;
}

/* Footer */
footer{display:flex; justify-content: center;}
footer ul{list-style-type:none;clear:both}
footer ul li{float:left;width:125px;text-align:center}

/* Text Properties */
@font-face {
    font-family: "CrimsonText-Regular";
    src: url("./fonts/CrimsonText-Regular.ttf");
}
@font-face {
    font-family: "Newsreader-Regular";
    src: url("./fonts/Newsreader_14pt-Regular.ttf");
}
h1, h2, h3, p{text-align:left;color:black}
h1, h2{font-family:Newsreader-Regular;font-size:2pt}
h1{font-size:30pt}
h2{font-size:25pt}
h3, p, ul{font-family:CrimsonText-Regular;font-size:12pt}