@media (max-width: 1000px) {
    p {
        font-family: 'Montserrat', sans-serif;
        font-size: large;
        font-weight: 400; /* Example: regular weight */
    }

    label {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400; /* Example: regular weight */
    }

    body { 
        background-image: url(./img/mobile-background.png);
        background-color: rgba(255,255,255,0.1);
        background-size: cover;
        background-position: bottom;
    }
    
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: large;
    }

    input {
        height: 1.5rem;
        font-size: large;
    }

    .view {
        scroll-snap-align: start;
    }


    .nav-button {
        z-index: 1000;
        position: fixed;
        margin: 0.5rem;

        width: 2rem;
        height: 2rem;
        
        color: white;
        background-color: var(--primary-colour);

        border: 1px solid var(--primary-colour);
        border-radius: 5px;
    }

    #expanded-nav-container {
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }

    .expanded-nav {
        background-color: var(--primary-colour);
        width: 80%;
        height: 100%;
        margin: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        ul {
            list-style: none;

            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;

            li {

                a {
                    display: flex;
                    padding-top: 0.5rem;
                    padding-bottom: 0.5rem;
                    padding-left: 0.5rem;
                    width: 80%;
                    text-decoration: none;
                    color: white;
                }

                a:hover{
                    border: 1px solid white;
                }
            }
        }

        button {
            background-color: transparent;
            color: white;
            border: none;

            width: 2rem;
            height: 2rem;

            align-self: flex-end;

            text-align: center;
            margin: 0;
        }

        button:hover {
            border: 1px solid white;
        }
    }

    .expanded-nav-open {
        animation-name: expander-nav-open;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .expanded-nav-close {
        animation-name: expander-nav-close;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }

    .expanded-nav-closed {
        display: none;
    }

    @keyframes expander-nav-open {
        0% {
            width: 0%;
        }
        100% { 
            width: 80%;
        }
    }

    @keyframes expander-nav-close {
        0% { 
            width: 80%;
        }
        100% { 
            width: 0%;
            display: none;
        }
    }


    #welcome {
        height: 100dvh;
        
        display: flex;
        flex-direction: column;
        align-items: stretch;

        text-align: center;
    }

    .main-navigation {
        order: 100;
        display: none;
        width: 80%;
        ul {
            list-style: none;

            display: flex;
            flex-direction: row;
            justify-content: space-around;

            a {
                text-decoration: none;
            }
        }
    }

    .welcome-names-heading {
        order: 1;
        margin-top: 3rem;
    }

    .main-wide-image {
        order: 100;
        display: none;
    }

    .secondary-wide-image {
        order: 0;
    }

    .welcome-details {
        order: 2;
        width: 80%;
        margin: auto;
        margin-top: 2rem;
    }

    .mobile-main-background {
        height: 60%;
        width: 100%;

        background-image: url(./img/dip-narrow.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;

        box-shadow: 0 4px 8px 0 rgba(128, 0, 32, 0.2), 0 6px 20px 0 rgba(128, 0, 32, 0.19);
    }


    #rsvp {
        margin: auto;
        margin-top: 4rem;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    .rsvp-details {
        margin: auto;
        width: 90%;
        h2 {
            padding: 0.6rem;
            font-size: x-large;
            font-weight: 400;
        }
    }

    .rsvp-form {
        width: 95%;
        margin-bottom: 1rem;
        flex: 1;
        border: none;
    }

    #rsvp-inputs {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        margin: auto;
        width: 90%;

        .amount-select {
            height: 10%;
            width: 100%;

            margin-top: 1rem;
            margin-bottom: 1rem;

            display: inline;

            #rsvp-total-label {
                float: left;
            }

            #rsvp-total-select {
                font-size: large;
                float: right;
            }
        }

        .input-name-label {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .input-name-input {
            grid-row: 2;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .input-name-coming {
            grid-row: 1;
            grid-column: 3;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .input-name-not-coming {
            grid-row: 2;
            grid-column: 3;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        #rsvp-names-container {
            margin-top: 1rem;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            height: 50%;

            .name-section {
                font-size: medium;
                display: grid;
                grid-template-columns: 1fr 1fr 0.8fr;
                grid-template-rows: 1fr 1fr;
                flex-direction: row;
                flex-wrap: wrap;
            }
        }

        #additional-notes {
            margin-top: 2rem;
            text-align: left;
            height: 8rem;
            display: flex;
            flex-direction: column;

            textarea {
                height: 100%;
                margin-bottom: 1rem;
            }
        }

        #rsvp-form-submit-button {
            height: 2rem;
            width: 100%;
            margin: auto;
            margin-right: 0;

            background-color: var(--primary-colour);
            color: white;

            justify-self: flex-end;
        }

        #cheers-container {
            display: flex;
            justify-content: center;

            margin: auto;

            img {
                width: 50%;
            }
        }
    }

    #accommodation {
        height: 80dvh;
        display: flex;
        justify-content: space-between;
        flex-flow: column;
        text-align: center;
        align-items: center;

        h2 {
            order: 0;
            padding: 0.6rem;
            font-size: x-large;
        }
    }

    .accommodation-map {
        order: 2;
        margin-bottom: 1rem;
        width: 90%;
        height: 50%;
        box-shadow: 0 4px 8px 0 rgba(128, 0, 32, 0.2), 0 6px 20px 0 rgba(128, 0, 32, 0.19);
    }

    .accommodation-data {
        order: 1;
        flex: 1;
        width: 90%;

        display: flex;
        flex-flow: column;

        h2 {
            display: none;
        }

        ul {
            list-style: none;
            padding: 0;
        }
    }


    #faq {
        margin: auto;
        margin-top: 3rem;
        width: 90vw;

        h2 {
            text-align: center;
            padding: 0.6rem;
            font-size: x-large;
        }

        ul {
            width: 100%;
            padding: 0;
        }
        
        li {
            font-size: small;
        }
    }
}