header {
    background-image: url("assets/images/outdoor-fellowship.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60% 80%;
}

.register-form {
    padding-top: 3em;
    padding-bottom: 3em;

    h2 {
        color: var(--text-color);
        font-size: 1rem;
    }

    p.sub {
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--primary-color);
    }

    .wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2em;

        .form-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 100%;

            form {
                padding: 2em 0;
                display: flex;
                flex-direction: column;
                width: 100%;

                .form-row {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                }

                .field {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    margin-bottom: 1.5em;
                }

                label {
                    margin: 1em 0 0.3em;
                    font-size: 0.9rem;
                }

                input,
                textarea,
                select {
                    border: 1px solid #cfcfcf;
                    padding: 1em;
                    background-color: #f0f0f050;
                    border-radius: 5px;
                    font-family: inherit;
                    color: var(--text-color);
                }

                select {
                    appearance: none;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='%23616161'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: right 1em center;
                }

                input:focus,
                textarea:focus,
                select:focus {
                    outline: none;
                    border-color: var(--primary-color);
                }

                textarea {
                    min-height: 100px;
                    resize: vertical;
                }

                .honeypot {
                    position: absolute;
                    left: -9999px;
                    width: 1px;
                    height: 1px;
                    overflow: hidden;
                }

                .form-status {
                    min-height: 1.2em;
                    margin: 1em 0 0;
                    font-size: 0.9rem;
                }

                .form-status.success {
                    color: #1b8a3d;
                }

                .form-status.error {
                    color: var(--primary-color);
                }

                .form-status.pending {
                    color: var(--text-color-light);
                }

                button[type="submit"] {
                    margin-top: 1em;
                    align-self: flex-start;
                }

                button[type="submit"]:disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
            }
        }
    }

    .img-content {
        img {
            border-radius: 10px;
            box-shadow: 0 0 15px #e7e7e7;
        }
    }
}

@media screen and (min-width:500px) {
    .register-form form .form-row {
        flex-direction: row;
        gap: 1.5em;
    }
}

@media screen and (min-width:750px) {
    .register-form {
        .wrapper {

            .form-content {
                min-width: auto;
                flex-basis: 45%;
            }

            .img-content {
                flex-basis: 45%;
            }
        }
    }
}