@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Work+Sans:wght@300&display=swap');

html {
    background-color: white;
}

body {
    max-width: 960px;
    margin: 0 auto;
    background-color: #EBF6F5;
    padding: 5px 25px;
}

h1,
h2,
h3 {
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 2em;
}


header {
    padding: 0.5em;
    text-align: center;
    color: rgb(0, 6, 8);
    background-color: rgb(11, 132, 168);
    border-radius: 30px;
}

footer {
    padding: 1em;
    color: rgb(0, 6, 8);
    background-color: #0b84a8;
    border-radius: 30px;
    text-align: center;
    bottom: 0;
}

p {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.5em;
}

.Mochiy-Pop-One {
    font-family: 'Mochiy Pop One', sans-serif;
}

.Work-Sans {
    font-family: 'Work Sans', sans-serif;
}

nav {
    background-color: #D2DAD9;
    text-align: center;
    
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li a {
    display: block;
    padding: 1em;
    font-size: 1.2em;
    text-align: center;
    color: #0B84A8
}

nav a:link,
nav a:visited {
    color: #0B84A8;
}

nav a:hover {
    color: var(--nav-hover-link-color);
    background-color: var(--nav-hover-background-color);
}

.sitemap {
    display: grid;
    justify-content: center;

    grid-template-columns: repeat(6, 15%);
    grid-template-rows: 3em 1.5em 1.5em 3em;
    grid-template-areas: ". . home home . ."
        ". . . top . ."
        ". left left right right ."
        "page2 page2 . . page3 page3";
}

.sitemap>div {

    text-align: center;

}

.colors {
    width: 100%;
    min-width: 350px;
    margin: auto;
    text-align: center;
}

.colors th {
    background-color: #999;
}

.colors td {
    width: 25%;
    height: 3em;
}

.primary {
    background-color: #0B84A8;
}

.secondary {
    background-color: #EBF6F5;
}

.accent1 {
    background-color: #D2DAD9;
}

.accent2 {
    background-color: #586F6B;
}


/* Tablet Views ******************************/
@media only screen and (min-width: 37.5em) {

    h1 h2 h3 {
        font-size: 1.5rem;
    }

    /* Horizontal Menu Examples */
    /* Flex *********************/
    nav ul {
        display: flex;
    }

    nav ul li {
        flex: 1 1 auto;
    }


    /* Grid *********************/
    nav ul {
        display: grid;
        /*grid-template-columns: repeat(5, 1fr);*/
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    /* Inline-Block             */

    nav li {
        display: inline-block;
    }


    /* Float                    */

    nav li {
        float: left;
        margin-right: 15px;
    }

    body {
        clear: both;
    }


    /*******************************************************/

    nav a {
        font-size: 1.5em;
    }

    body {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop Views ****************************/
@media only screen and (min-width: 60em) {
    h1 h2 h3 {
        font-family: 'Mochiy Pop One', sans-serif;
        font-size: 2em;
    }

    nav a {
        font-size: 1.5em;
    }

    body {
        grid-template-columns: 1fr 1fr 1fr;
    }

}