@import url('https://fonts.googleapis.com/css2?family=Merienda&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');

:root {
    --background-color: #fff;
    --main-color: #1463ad;
    --secondary-color: #000;
    --accent1-color: #e0c59c;
    --accent2-color: #20b2aa;

    --heading-font: 'Merienda', Arial, Helvetica, sans-serif;
    --body-font: 'EB Garamond', Verdana, Tahoma, sans-serif;
}

@media only screen and (min-width: 32.5em) {

    body {
        max-width: 1100px;
    }

        header {
            margin-top: 18px;
        }

        nav {
            border-radius: 18px;
            font-size: 1.25rem;
        }

        h2 {
            font-size: 2rem;
        }


    main {
        max-width: 100%;
        text-align: center;
    }

    #main-index {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: .5rem;
        padding: 0 18px 0;
    }

        .img-index {
            grid-column: 1 / 7;
            grid-row: 1;
            border-radius: 18px;
        }

        .weather {
            grid-column: 1 / 3;
            grid-row: 2;
        }

        .section-forecast {
            grid-column: 3 / 7;
            grid-row: 2;
        }

        .island-info {
            grid-column: 1 / 4;
            grid-row: 3;
        }

        .img-adventure {
            grid-column: 4 / 7;
            grid-row: 3;
            border-radius: 18px;
        }

        .about-us {
            grid-column: 1 / 7;
            grid-row: 4;
        }

        main img {
            width: 100%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
        }

        p {
            font-family: var(--body-font);
            font-size: 1.25rem;
            padding: 0 .75rem 0;
            color: var(--secondary-color);
        }

        #forecast {
            display: table;
            text-align: center;
            margin-bottom: 20px;
            margin-right: auto;
            margin-left: auto;
            width: 100%;
        }
    
        #forecast div {
            font-size: 1rem;
            font-family: 'Imprima', serif;
            border: 2px solid var(--secondary-color);
            white-space: nowrap;
            padding: 20px;
            width: auto;
        }

        #forecast img {
            width: 50px;
        }

        .row {display: table-row;}

        .cell {display: table-cell;}


    .gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }

        #vehicle-1 {
            grid-column: 1;
        }

        #vehicle-2 {
            grid-column: 2;
        }

        #vehicle-3 {
            grid-column: 3;
        }

    fieldset {
        border-radius: 18px;
    }

    .submitBtn {
        border-radius: 18px;
    }

    footer {
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

}