* { 
    margin: 0; padding: 0; box-sizing: border-box; 
}


body {
    background-color: #d3d3d3;
    padding: 20px;
    border: 10px solid #000000;
}

.hometown header {
    max-width: 75ch;
    margin: 10px auto;
}

.hometown footer {
    max-width: 75ch;
    margin: 100px auto;
}

header {
    max-width: 200ch;
    margin: 10px auto;
}

h1 {
    text-align: center;
    font-family: "Bebas Neue", sans-serif;
    font-size: 42pt;
    background-color: #78CAFF;
    padding: 20px;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 2px 5px 5px #000000;
    border: 8px solid #000000;
    margin: 10px auto;
    letter-spacing: 2px;
    border-radius: 8px;
    max-width: 75ch;
}

h2 {
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: #78CAFF;
    padding: 10px;
    color: #ffffff;
    text-shadow: 1px 2px 2px #000000;
    border: 5px solid #000000;
    margin: 10px 0px;
    border-radius: 8px;
}

h3 {
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    
    background-color: #d3d3d3;
    padding: 10px;
    margin: 10px 0px;
    border-radius: 8px;
}

h3 a {
    color: #FFF;
    text-decoration: none;
    border: 2px solid #78CAFF; 
    padding: 10px;
    border-radius: 8px;
    background-color: #000;
    font-size: larger;
}

h3 a:hover {
    color: #78CAFF;
}

#div1 {
    margin: 10px auto;
    max-width: 200ch;
}

#div1 h2 {
    max-width: 100%;
    text-align: center;
    margin: 10px 0px;
    font-size: 24pt;
}

section.bio {
    border: solid 4px #000000;
    max-width: 100%;
    display: flex;
    margin: 10px 0px;
}

section.bio div{
    border: none;
}

div.image {
    padding: 20px;
}

div.bio {
    padding: 30px 0px;
}

#div2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 10px auto;
    max-width: 200ch;
}

.hometown main {
    display: block;
}

section {
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14pt;
    margin: 10px 0px;
    max-width: 30%;
    border-radius: 6px;
}

section.content {
    max-width: 75ch;
    text-align: left;
    margin: 10px auto;
}

section.content img {
    margin: 10px auto;
}

section div {
    border: solid 4px #000000;
    background-color: #ffffff;
    border-radius: 6px;
}

section p {
    padding: 10px;
    line-height: 1.2;
}

ul {
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14pt;
    margin-left: 0px;
    padding: 5px 10px;
}

ul li {
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14pt;
    margin-left: 20px;
    line-height: 1.5;
}

#goals {
    line-height: 3;
}


nav {
    text-align: left;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14pt;
}

a {
    color: #29339B;
}

a:hover {
    color:#78CAFF;
}

img {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 5px 5px 10px #000000;
    max-width: 400px;
    max-height: 400px;
}

footer {
    margin-top: 100px;
    line-height: 1.25;
    text-align: center;
    background-color: #78CAFF;
    color: #000000;
    margin: 100px auto 0px auto;
    padding: 10px;
    border: 6px solid #000000;
    border-radius: 8px;
    max-width: 200ch;
}

footer a {
    color: #0000ff;
}

footer a:hover {
    color: #ffffff;
}

/* Tablet portrait layout */

@media  screen and (max-width: 1000px) {

    #div2 {
        display: flex;
        flex-flow: column;
        /* justify-content: space-between; */
        margin: 10px auto;
        max-width: 200ch;
    }
    
    #div2 section {
        flex-grow: 1;
    }

    section {
        max-width: 100%;
    }

    #goals {
        line-height: 1;
    }

    ul {
        text-align: left;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14pt;
        margin-left: 15px;
        padding: 5px 10px;
    }

    ul li {
        text-align: left;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14pt;
        margin-left: 20px;
        line-height: 1.5;
    }

    section p {
        margin-left: 10px;
    }

}


/* Phone layout */

@media screen and (max-width: 760px) {

    h1 {
        text-align: center;
        font-family: "Bebas Neue", sans-serif;
        font-size: 28pt;
        background-color: #78CAFF;
        padding: 20px;
        line-height: 1.2;
        color: #ffffff;
        text-shadow: 2px 5px 5px #000000;
        border: 8px solid #000000;
        margin: 10px auto;
        letter-spacing: 2px;
        border-radius: 8px;
        max-width: 75ch;
    }

    h2 {
        text-align: center;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-color: #78CAFF;
        padding: 10px;
        color: #ffffff;
        text-shadow: 1px 2px 2px #000000;
        border: 5px solid #000000;
        margin: 10px 0px;
        border-radius: 8px;
        font-size: 20pt;
    }

    h3 a {
        color: #FFF;
        text-decoration: none;
        border: 2px solid #78CAFF; 
        padding: 10px;
        border-radius: 8px;
        background-color: #000;
        font-size: small;
    }

    #div1 {
        display: flex;
        flex-flow: column;
    }

    #div1 h2 {
        max-width: 100%;
        text-align: center;
        margin: 10px 0px;
        font-size: 20pt;
    }

    .bio {
        display: flex;
        flex-flow: column;
    }

    .bio p {
        line-height: 1.3;
    }

    div.image {
        padding: 0px auto;
    }

    .image img {
        margin: 0 auto;
    }

    div.bio {
        padding: 0px 0px;
    }

    #div2 {
        display: flex;
        flex-flow: column;
        margin: 10px auto;
        max-width: 200ch;
    }
    
    #div2 section {
        flex-grow: 1;
    }

    section {
        max-width: 100%;
    }

    #goals {
        line-height: 1;
    }

    ul {
        text-align: left;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14pt;
        margin-left: 15px;
        padding: 5px 10px;
    }

    ul li {
        text-align: left;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14pt;
        margin-left: 20px;
        line-height: 1.5;
    }

    section p {
        margin-left: 10px;
    }

}