@font-face {
    font-family: 'arial_rounded';
    src: url('../fonts/Arial-Rounded-MT-Bold.woff') format('woff'),
    src: url('../fonts/ArialRoundedMTBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'inclusive_sansregular';
    src: url('../fonts/inclusivesans-regular-webfont.woff2') format('woff2'),
         url('../fonts/inclusivesans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

a:link {
    color: darkturquoise;
}

a:visited {
    color: mediumorchid;
}

a:hover {
    color: cyan;
}

a:active {
    color: gold;
}

body {
    background-color: white;
    font-family: inclusive_sansregular;
    color: midnightblue;
    font-size: 18px;
    margin: 0px;
    float: left;
}

article {
    margin: auto;
    background-color: white;
    width: 65%;
    box-sizing: border-box;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;

    .latest {
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    }

    img {
        max-width: 45%;
        float: right;
        padding: 2vw;
    }

    table, th, td {
        border-bottom: 2px solid white;
        border-top: 2px solid white;
        border-collapse: collapse;
        padding: 1vw;
        td {
            text-align: center;
        }
    }

    blockquote {
        border-left: 2px solid white;
        margin-left: 3vw;
        padding-left: 2vw;
    }
}

info {
    display: block;
    margin: auto;
    background-color: white;
    width: 65%;
    box-sizing: border-box;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 1vw;

    .latest {
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    }

    img {
        width: 8vw;
        float: right;
        flex: 1;
    }

    table, tr, th, td {
        border-bottom: 2px solid white;
        border-top: 2px solid white;
        border-collapse: collapse;
        padding: 1vw;
        td {
            text-align: left;
        }
    }

    blockquote {
        border-left: 2px solid white;
        margin-left: 3vw;
        padding-left: 2vw;
    }
}

em {
    color: white;
}

.signup{
    background: gold;
    font-family: arial_rounded;
    width: 17vw;
    height: 5vw;
    float: right;
    margin-left: 4%;
    margin-bottom: 4%;
    border-radius: 10px;
    font-size: 2vw;
    text-align: center;
    vertical-align: middle;
    line-height: 5vw;
    a:link {
        color: midnightblue;
        text-decoration: none;
    }

    a:visited {
        color: midnightblue;
        text-decoration: none;

    }

    a:hover {
        color: white;
        text-decoration: none;
    }

    a:active {
        color: mediumspringgreen;
        text-decoration: none;
    }
}

.footer{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border: medium solid gold;
    border-style: solid none none none;
    width: 65%;
    margin: auto;
    margin-top: 1%;
    margin-bottom: 1%;
    background: white;
    .filler{
        flex-grow: 1;
    }
    img {
        margin: 0 5px 0 5px;
        justify-content: flex-end;
    }
    p {
        padding-left: 1%;
        padding-right: 1%;
    }
}

.header {
    max-width: 100%;
    margin-bottom: 1%;
    margin-top: 1%;
    display: flex;
    flex-flow: column;
    align-items: center;
    color: white;
    column-gap: 10px;
    background: linear-gradient(90deg,rgba(237, 87, 64, 1) 0%, rgba(237, 209, 69, 1) 33%, rgba(83, 237, 160, 1) 66%, rgba(83, 181, 237, 1) 100%);
    h1{
        background: white;
        width: 100%;
        text-align: center;
        padding: 1%;
        margin-bottom: 0px;
        margin-top: 5px;
        color: midnightblue;
    }
    .padding {
        flex-grow: 1;
        flex-shrink: 1;
        background: white;
    }
}

.menu, .latest{
    ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    img{
        float: none;
        width: 8vw;
        padding: 0;
        padding-right: 1vw;
        margin: 0;
    }
    li{
        .menu_excerpt{
            p{
              float: right;
              img{
                  float: left;
              }
            }
        }
    }

}

nav {
    font-family: arial_rounded;
    width: 65%;

    a:link {
            color: white;
    }
        
    a:visited {
        color: white;
    }
        
    a:hover {
        color: midnightblue;
    }
        
    a:active {
        color: gold;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 1vw;
        text-align: center;
        display: flex;
        flex-flow: row;
        li {
            padding: 0.5vw;
            flex-grow: 1;
            flex-shrink: 1;
        }
    }
    a {
        color: white;
        text-decoration-line: none;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: midnightblue;
    font-family: arial_rounded;
}

h1 {
    font-size: 3vw;
    text-decoration-line: underline;
    text-decoration-color: mediumspringgreen;
}

h2 {
    font-size: 2.5vw;
    text-decoration-line: underline;
    text-decoration-color: tomato;
}

h3 {
    font-size: 1.9vw;
    text-decoration-line: underline;
    text-decoration-color: gold;
}

h4 {
    font-size: 1.7vw;
    text-decoration-line: underline;
    text-decoration-color: slateblue;
}

h5 {
    font-size: 1.5vw;
}

h6 {
    font-size: 1.8vw;
}

hr {
    color: midnightblue;
}

@media only screen and (max-width: 811px) {
    body{
        font-size: 14px;
    }

    article, info {
        width: 97%;
    }

    h1 {
        font-size: 22px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    h4 {
        font-size: 18px;
    }
    
    h5 {
        font-size: 16px;
    }
    
    h6 {
        font-size: 16px;
    }

    .footer {
        width: 97%;
    }

    info {
        img {
            width: 12vw;
        }
    }

    .signup {
        width: 150px;
        height: 50px;
        float: right;
        border-radius: 10px;
        font-size: 20px;
        line-height: 50px;
    }

    @media only screen and (max-width: 500px) {
        .header {
            max-width: 97%;
            margin-left: 1.5%;
            img {
                max-width: 97%;
            }
        }

        article {
            img {
                float: none;
                max-width: 80%;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        }

        info {
            img {
                width: 100px;
            }
        }
    }
}