body {
    background-color: var(--backgroundColor);
    font-family: 'Archivo';
    overflow-x: hidden;

    h1, h2, h3, h4, h5 {
        font-family: 'Indie Flower';
    }

    .subtitle {
        font-family: 'Playpen Sans';
    }

    header {
        --headerHeight: 60px;
        background-color: white;
        height: calc(var(--headerHeight) + var(--decoratorHeight));
        display: flex;
        justify-content: center;
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
        z-index: 50;

        a.brand {
            margin-top: calc(var(--headerHeight) / 2);
            filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50));

            img {
                width: 200px;

                @media (max-width: 600px) {
                    width: 150px;
                }

                @media (max-width: 500px) {
                    width: 125px;
                }
            }
        }

        &::after {
            z-index: -1;
        }
    }

    footer {
        margin-top: var(--sectionMargin);
        background-color: white;
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));

        div.wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 22px;
            padding-top: 44px;
            padding-bottom: 44px;

            &.details {
                display: flex;
                gap: 22px;
                align-items: center;

                div.address {
                    flex-grow: 1;
                }

                div.opening-times {
                    div.alert {
                        border-left: solid 4px rgb(68, 0, 0);
                        padding-left: 18px;
                        max-width: 300px;
                        margin-top: 18px;
                        margin-bottom: 18px;

                        > p:not(:first-of-type) {
                            margin-top: 18px;
                        }
                    }

                    > p {
                        text-align: center;
                    }
                    
                    table {
                        display: block;
                        width: fit-content;
                        margin: 0 auto;
                        tr {
                            td:first-of-type {
                                font-weight: bold;
                                padding-right: 11px;
                            }
                        }
                    }
                }

                @media (max-width: 500px) {
                    flex-direction: column;
                }
            }

            &.links {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 22px;
            }
        }

        p.tn {
            text-align: center;
            padding-bottom: 44px;
        }
    }

    section {
        max-width: 1200px;
        margin: 0 auto;

        &:not(:first-of-type) {
            margin-top: var(--sectionMargin);
        }

        &:not(.no-gutter) {
            padding-left: var(--gutterWidth);
            padding-right: var(--gutterWidth);        
        }
    }

    button,.button {
        --colour: lime;

        &.primary {
            --colour: var(--colourSuccess);
        }

        &.secondary {
            --colour: var(--colourSecondary);
        }
        
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: bold;
        text-decoration: none;
        color: black;
        padding: 12px 18px;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        background-color: var(--colour);
        border: solid 1px color-mix(in srgb, var(--colour) 100%, black 20%) !important;

        &:hover {
            background-color: color-mix(in srgb, var(--colour) 100%, white 20%) !important;
        }
    
        &:active {
            background-color: color-mix(in srgb, var(--colour) 100%, black 20%) !important;
        }

        svg {
            width: 26px;
        }

        &[disabled] {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }
    }

    &:has(div.gallery > div.browser.active) {
        overflow: hidden;
    }

    svg.loader {
        fill: black !important;
        height: 75px;
        display: block;
        margin: 0 auto;
    }

    form {
        div.input {
            display: flex;
            flex-direction: column;

            &:has(input[type="checkbox"]) {
                flex-direction: row;
                align-items: center;
                gap: 11px;
            }

            &:not(:first-of-type) {
                margin-top: 22px;
            }

            label {
                font-weight: bold;
            }

            input {
                font-size: 1.1rem;
            }
        }
    }
}