@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;
}

body {
    width: 100%;
    min-width: 360px;
    margin-left: auto;
    margin-right: auto;
    background: var(--background-color);
}

    h1,h2,h3 {
        font-family: var(--heading-font);
        color: var(--secondary-color);
    }

    header {
        display: block;
        text-align: center;
    }

        nav {
            margin: 18px auto;
            background-color: var(--main-color);
            font-family: var(--heading-font);
            padding: .5rem 0 .5rem;
            text-align: center;
        }

            nav ul, li {
                list-style-type: none;
                text-align: center;
                margin: 0;
                padding: .5rem 0 .25rem;
            }

            nav ul li a {
                text-decoration: none;
                color: var(--background-color);
                transition: .5s;
                transition-duration: .5s;
            }

            nav a:hover {
                font-size: 1.5rem;
            }

            nav button {
                background: var(--main-color);
                color: var(--background-color);
                border: none;
            }

            nav ul.navigation {
                display: none;
            }

            #active {
                color: var(--accent1-color);
            }

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

        .forecast {
            display: table;
            text-align: center;
            margin-bottom: 18px;
            margin-right: auto;
            margin-left: auto;
            width: 100%;
        }

        .forecast img {
            width: 50px;
        }

        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);
        }

        div {
            display: block;
        }

        .row {display: table-row;}

        .cell {display: table-cell;}

    .rental-info {
        font-family: var(--body-font);
        font-size: 1.125rem;
        text-align: center;
    }

    .rental-info table {
        margin-left: auto;
        margin-right: auto;
    }

    .gallery {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        max-width: 100%;
    }

        .gallery-image {
            margin-top: auto;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .gallery-image img {
            width: 100%;
            max-width: 400px;
        }

        form .information {
            margin-left: auto;
            margin-right: auto;
            padding: 10px 20px;
            font-family: var(--body-font);

        }
        
            form legend {
                padding: 0 .5rem;
                font-weight: bold;
                font-family: var(--heading-font);
            }
            
            form label.top input,
            form label.top select {
                display: block;
                font-family: 'Imprima', serif;
                border: 1px solid black;
                border-radius: 18px;
                padding: .75rem;
                color: gray;
                width: 100%;
                max-width: 20rem;
                margin-bottom: 18px;
            }

            form input, select {
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }

            form textarea {
                margin-left: auto;
                margin-right: auto;
            }
            
            form input.submitBtn {
                border: none;
                background: var(--main-color);
                color: var(--background-color);
                font-family: var(--heading-font);
                padding: .75rem;
                width: 100%;
                min-width: 360px;
                margin-top: 18px;
                margin-bottom: 18px;
                cursor: pointer;
            }

        .contact-form label,
        .contact-form input {
            margin-bottom: 10px;
        }

        .contact-form fieldset {
            border: 0px;
        }

        .submitBtn {
            border: none;
            background: var(--main-color);
            color: var(--background-color);
            font-family: var(--heading-font);
            padding: .75rem;
            width: 100%;
            min-width: 360px;
            margin-top: 18px;
            margin-bottom: 18px;
            cursor: pointer;
        }

    .reservation-info {
        padding-left: 18px;
        text-align: left;
        display: block;
    }

    .reservation-info li {
        text-align: left;
        list-style: circle;
    }

    footer {
        padding: 5px 0 10px;
        background: var(--main-color);
        display: block;
        text-align: center;
        position: absolute;
        width: 100%;
        max-width: 1100px;
    }

    footer p {
        font-family: var(--body-font);
        color: var(--background-color);
    }

    footer a:visited,
    footer a:link {
        color: var(--accent1-color);
        text-decoration: none;
    }

    /* Show return-home-button on all screen sizes */
    .return-home-button {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        left: auto;
        top: auto;
        background-color: #2F3131;
        color: black;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-family: 'Nunito', 'Open Sans', sans-serif;
        font-weight: bold;
        font-size: .75rem;
        box-shadow: 1px 1px 5px black;
        opacity: 0.7;
        z-index: 1000;
    }

    .return-home-button:hover {
        background-color: #7A7D7D;
        opacity: 1.0;
    }

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000;
        --secondary-color: #eee;
    }

    nav ul li a,
    nav button {
        color: var(--secondary-color);
    }
    
    body {
        background: #353535;
    }

    form input.submitBtn,
    .submitBtn {
        color: var(--secondary-color);
        font-weight: bold;
    }

    footer p,
    span,
    div,
    legend,
    label {
        color: #eee;
    }

    .return-home-button {
        background-color: #fff;
        color: #2F3131;
    }

    .return-home-button:hover {
        background-color: #fff;
        color: #2F3131;
    }
}