/*
    Landon Hansen
    10/14/2023
    Purpose: To style the "Forest Conservation" webpage
*/

/* Paragraph 1 - 4 using Google Font 2 */
body {
    font-family: 'Noto Sans', sans-serif;
    background-image: url(assets/images/forest.webp);
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position-y: bottom; */
    background-attachment: fixed;

    line-height: 1.3em;
}

main {
    display: grid;

    grid-template-rows: 70px 200px 3fr 40px;
    grid-template-columns: repeat(4, 1fr);

    max-width: 1280px;
    min-height: 100vh;
    padding: 20px;

    box-sizing: border-box;

    margin-left: auto;
    margin-right: auto;

    background-color: rgba(255, 255, 255, 0.7);
}

/* Centered Headline using Google Font 1 */
header {
    display: flex;
    font-family: 'Kanit', sans-serif;

    justify-content: center;
    align-items: center;

    grid-column: 1 / 5;
    grid-row: 1 / 2;
}

h1 {
    font-size: 1.9em;
}

.websiteLogo {
    margin-right: 10px;
    height: 70%;
}

.heroImage {
    position: relative;
    grid-column: 1 / 5;
    grid-row: 2 / 3;

    max-height: 175px;

    overflow: hidden;
}

.heroImage > img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    object-position: 50% 40%;
}

section {
    padding: 5px;
    grid-row: 3 / 4;
    text-align: center;
}

footer {
    width: 100%;
    font-style: italic;
    text-align: center;
    grid-column: 1 / 5;
}