html, body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 26px;
}

.landing-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 10px;
}

/* Navigation */
.landing-page__navigation {
    grid-row: 1;
    grid-column: 1 / span 12;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 50px;
}

.policy-page__navigation {
    grid-row: 1;
    grid-column: 1 / span 12;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 50px;
    background-color: #63CCCD;
}

.scrolled {
    background-color: #63CCCD;
}

.landing-page__home {
    display: grid;
    align-items: center;
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 2.5px 20px;
}

.landing-page__links {
    float: right;
    list-style-type: none;
    padding: 0;
    margin: 7.5px 20px;
}

.landing-page__home-text a,
.landing-page__links-text a {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
}

.landing-page__home-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 36px;
}

.landing-page__links-text {
    display: inline-block;
    font-size: 28px;
    margin: auto 15px
}

/* Header */
.landing-page__header {
    grid-row: 1;
    grid-column: 1 / span 12;
    height: 100vh;
    display: grid;
    grid-template-rows: 50px 0.4fr 1fr;
    background-image: url(/assets/landing/start_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/* Title within header */
.landing-page__title {
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.landing-page__title-image {
    width: 650px;
}

@media only screen and (max-height: 600px) {
    .landing-page__header {
        grid-template-rows: 50px 0.1fr 1fr;
    }
}

/* Start Button within header*/
.landing-page__start {
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.landing-page__start-link {
    grid-column: 1 / span 12;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-page__start-image {
    width: 350px;
}

/* Sections */
.landing-page__section-one-text,
.landing-page__section-two-text,
.landing-page__section-three-text,
.landing-page__section-four-text {
    font-size: 24px;
    font-weight: 500;
}

.landing-page__section-one-header,
.landing-page__section-two-header,
.landing-page__section-three-header,
.landing-page__section-four-header {
    font-size: 36px;
}

/* Section One */
.landing-page__section-one {
    grid-row: 2;
    grid-column: 2 / span 10;
    background-color: #ffffff;
    padding: 10% 0;
}

/* Middle Sections */
.landing-page__section-two,
.landing-page__section-three, 
.landing-page__section-four {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 10px;
    grid-column: 1 / span 12;
}

.landing-page__section-two-info,
.landing-page__section-three-info,
.landing-page__section-four-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landing-page__section-two-text,
.landing-page__section-three-text,
.landing-page__section-four-text {
    margin-top: 0;
}

.landing-page__section-two-image-container,
.landing-page__section-three-image-container,
.landing-page__section-four-image-container {
    display: grid;
    justify-content: center;
    align-items: center;
}

.landing-page__section-two-image,
.landing-page__section-three-image,
.landing-page__section-four-image {
    width: 100%
}

/* Section Two */
.landing-page__section-two {
    grid-row: 3;
    background-color: #f2f2f2;
    padding: 4% 0;
}

.landing-page__section-two-info {
    grid-column: 2 / span 4;
}

.landing-page__section-two-image-container {
    grid-column: 7 / span 5;
}

/* Section Three */
.landing-page__section-three {
    background-color: #ffffff;
    grid-row: 4;
    padding: 6% 0;
}

.landing-page__section-three-info {
    grid-column: 8 / span 4;
}

.landing-page__section-three-image-container {
    grid-column: 2 / span 5;
}

/* Section Four */
.landing-page__section-four {
    grid-row: 5;
    background-color: #f2f2f2;
    padding: 6% 0;
}

.landing-page__section-four-info {
    grid-column: 2 / span 4;
}

.landing-page__section-four-image-container {
    grid-column: 7 / span 5;
}

/* Section Five */
.landing-page__section-five {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-row: 6;
    grid-column: 1 / span 12;
    background-image: url(/assets/landing/map_bg.png);
    background-repeat: no-repeat;
}

.landing-page__section-five-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 2 / span 4;
}

.landing-page__section-five-start-link {
    width: 75%;
}

.landing-page__section-five-start-image {
    width: 100%;
}

.landing-page__section-five-map {
    display: grid;
    grid-column: 6 / span 7;
    margin-bottom: 5%;
}

.landing-page__section-five-map-image {
    margin-left: 7%;
    width: 93%;
}

/* Footer */
.landing-page__footer {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    background-color: #63CCCD;
}

.landing-page__footer-logo-container {
    grid-column: 5 / span 4;
    display: grid;
    margin: 7.5% 0;
}

.landing-page__footer-link-container {
    grid-column: 4 / span 6;
    display: grid;
    margin: 7.5% 0 0;
}

.landing-page__footer-links {
    display: flex;
    justify-content: space-evenly;
}

.landing-page__footer-link {
    text-decoration: none;
    color: white;
    font-size: 24px;
    text-align: center;
}

.landing-page__footer-text {
    margin-top: 0;
}

.landing-page__footer-logo {
    width: 100%;
}

.policy-page__section-one {
    grid-row: 2;
    grid-column: 2 / span 10;
    background-color: #ffffff;
    padding: 5% 0;
}

.policy-page__section-one a {
    text-decoration: none;
    color: #63CCCD;
}

/* Responsiveness*/
@media only screen and (max-width: 767px) {
    .landing-page__title-image {
        width: 300px;
    }
}

/* For screens wider than the background images */
@media only screen and (min-width: 2048px) {
    .landing-page__header {
        background-size: cover;
    }

    .landing-page__start-image {
        width: 600px;
    }

    .landing-page__title-image {
        width: 1500px;
    }

    .landing-page__section-five {
        background-size: cover;
    }
}
@media only screen and (min-width: 3800px) {
    .landing-page__start-image {
        width: 800px;
    }
}

/* For screens taller than the background image */
@media only screen and (min-height: 997px) {
    .landing-page__header {
        background-size: cover;
    }
}

/* Mobile Responsiveness */
/* Portrait Mobile Responsiveness */
@media only screen and (max-width: 480px) {

    /* Navigation bar */
    .landing-page__navigation {
        height: 40px;
    }

    .landing-page__home-text {
        font-size: 28px;
    }

    .landing-page__links {
        margin: 7.5px 5%;
    }

    .landing-page__links-text {
        font-size: 20px;
    }

    /* Header */
    .landing-page__header {
        height: 450px;
        grid-template-rows: 40px 100px 0.25fr 0.75fr;
        background-position: 47.5% 0%;
        background-size: 250%;
    }

    .landing-page__title-image {
        width: 250px;
    }

    .landing-page__start {
        grid-row: 4;
    }

    .landing-page__start-image {
        width: 150px;
    }

    /* Sections */
    .landing-page__section-one-text,
    .landing-page__section-two-text,
    .landing-page__section-three-text,
    .landing-page__section-four-text {
        font-size: 16px;
    }
    
    .landing-page__section-one-header,
    .landing-page__section-two-header,
    .landing-page__section-three-header,
    .landing-page__section-four-header {
        font-size: 24px;
    }

    .landing-page__section-two-info,
    .landing-page__section-three-info,
    .landing-page__section-four-info {
        grid-column: 2 / span 10;
    }

    .landing-page__section-two-image-container,
    .landing-page__section-three-image-container,
    .landing-page__section-four-image-container {
        grid-column: 2 / span 10;
    }

    /* Section Three */
    .landing-page__section-three-info {
        grid-row: 1;
    }

    /* Section Five */
    .landing-page__section-five-start-text {
        font-size: 16px;
    }
    
    .landing-page__section-five-start {
        grid-column: 1 / span 6;
        grid-row: 1;
    }
    
    .landing-page__section-five-start-link {
        width: 50%;
    }

    .landing-page__section-five-map {
        grid-row: 1;
    }

    /* Footer */
    .landing-page__footer-logo-container {
        grid-column: 3 / span 8;
    }

    .landing-page__footer-text {
        font-size: 16px;
    }
}

/* Landscape Mobile Responsiveness */
@media only screen and (max-width: 1023px) and (max-height: 450px) and (orientation: landscape) {
    /* Header */
    .landing-page__header {
        background-position: 50% 40%;
        background-size: 200%;
        grid-template-rows: 50px 75px 0.5fr 0.5fr;
    }

    .landing-page__title-image {
        width: 250px;
    }

    .landing-page__start {
        grid-row: 4;
    }

    .landing-page__start-image {
        width: 200px;
    }

    /* Sections */
    .landing-page__section-one-text,
    .landing-page__section-two-text,
    .landing-page__section-three-text,
    .landing-page__section-four-text {
        font-size: 18px;
    }
    
    .landing-page__section-one-header,
    .landing-page__section-two-header,
    .landing-page__section-three-header,
    .landing-page__section-four-header {
        font-size: 28px;
    } 
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
    /* Section Five */
    .landing-page__section-five-start-text {
        font-size: 24px;
    }
}


/* Tablet Reponsiveness */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .landing-page__header {
        background-position: 47.5% 50%;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    /* Sections */
    .landing-page__section-two-info,
    .landing-page__section-three-info,
    .landing-page__section-four-info {
        grid-column: 2 / span 10;
    }

    .landing-page__section-two-image-container,
    .landing-page__section-three-image-container,
    .landing-page__section-four-image-container {
        grid-column: 2 / span 10;
    }

    /* Section Three */
    .landing-page__section-three-info {
        grid-row: 1;
    }

    /* Section Five */
    .landing-page__section-five-start-text {
        font-size: 24px;
    }

    .landing-page__section-five-start {
        grid-column: 1 / span 6;
        grid-row: 1;
    }

    .landing-page__section-five-start-link {
        width: 50%;
    }

    .landing-page__section-five-map {
        grid-row: 1;
    }
}