body {
    background-color: #F6F6F6;
}
main {
    color: black;
    h1 {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        font-size: 50px;
    }
    h3 {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        border-top: solid black 1px;
        padding-top: 30px;
    }
    #background {
        width: 100%;
    }
    .text-div {
        width: 60%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        .text {
            display: flex;
            flex-direction: row;
            gap: 20px;
            div {
                margin-bottom: 20px;
                width: 50%;
                p {
                    margin-bottom: 20px;
                }
            }
        }
        button {
            display: none;
            cursor: pointer;
            margin-right: auto;
            margin-left: auto;
            padding: 15px 60px;
            border: none;
            background-color: transparent;
            color: #C19045;
            font-size: 17px;
        }
        a {
            background-color: #C09146;
            padding: 15px 60px;
            border-radius: 10px;
            margin-left: auto;
            margin-right: 20px;
        }
    }
    #gallery-container {
        width: 100%;
        height: fit-content;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 80px;
        background-color: #4D3B36;
    }
    #gallery {
        position: relative;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        background-color: #000000;
        padding-top: 20px;
        padding-bottom: 60px;
        border-radius: 20px;
        overflow: hidden;
        h2 {
            color: white;
            margin-bottom: 20px;
            margin-top: 10px;
            margin-left: 60px;
        }
        .gallery-div {
            position: absolute;
            width: calc(100% - 40px);
            display: flex;
            flex-direction: row;
            gap: 40px;
            margin-left: 40px;
            margin-right: 40px;
            img {
                width: calc(25% - 40px);
                border-radius: 20px;
            }
        }
        .gallery-box {
            left: 0%;
            position: relative;
            transition: 0.5s;
        }
        .first .gallery-div {
            position: relative;
        }
        .arrow {
            opacity: 0;
            top: 40%;
            left: 10px;
            width: 50px;
            padding: 10px;
            filter: invert(1);
            position: absolute;
            transform: rotate(180deg);
            border-radius: 50px;
            background-color: #d2d6d7;
            cursor: pointer;
            transition: .2s;
        }
        .arrow:last-child {
            left: auto;
            right: 10px;
            transform: rotate(0);
        }
    }
    #gallery:hover .arrow { opacity: 1; }
}


@media only screen and (max-width: 1050px) {
    main {
        .text-div, h1, h3, #circles, #bron {
            width: 90%;
        }
        #gallery {
            padding-bottom: 40px;
            padding-top: 20px;
            overflow-x: scroll;
            .arrow { display: none; }
            h1 { margin-bottom: 20px; }
            .gallery-box {
                .gallery-div{
                    img {
                        width: 250px;
                    }
                }
            }
        }
    }
}


@media only screen and (max-width: 800px) {
    main {
        .text-div {
            .text {
                div { width: 100%; }
                flex-direction: column;
                max-height: 200px;
                overflow-y: hidden;
                mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%);
            }
            .expanded {
                mask-image: none;
                max-height: fit-content;
            }
            button {
                font-size: 18px;
                margin-top: 20px;
                display: block;
            }
            a {
                font-size: 18px;
                margin-top: 5px;
                margin-right: auto;
                padding: 10px 20px;
            }
        }
        #circles {
            overflow-x: scroll;
            padding-top: 40px;
            padding-bottom: 20px;
            #circles-div {
                margin-left: 20px;
                margin-right: 20px;
                padding-right: 20px;
                gap: 10px;
                width: fit-content;
            }
        }
        #bron form #sub {
            flex-direction: column;
            div { width: 100%; }
        }
    }
}