* {
    font-family: "Exo 2", sans-serif;
}

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    height: 100vh;

    background: rgb(255,255,255);
    background: linear-gradient(24deg, rgba(255,255,255,1) 0%, rgba(218,165,32,1) 100%);

    .wrapper {
        display: flex;
        background: white;

        position: relative;

        width: calc(100% - 30px);
        max-width: 1200px;

        height: 500px;

        border-radius: 15px;
        overflow: hidden;
    }

    a.goBack {
        position: absolute;
        left: calc(50% - 60px);
        top: 80px;

        background: white;
        padding: 10px 25px;
        border-radius: 15px;
        width: 120px;

        color: black;
        text-decoration: none;
        font-size: 1.2rem;
    }

    .sidebar {
        display: none;

        width: 50%;
        height: 100%;
        background: url("https://www.brunobouwman.nl/images/src/animals-31.jpg");
        background-size: cover;

        flex: 1;

        overflow: hidden;

        .wave {
            position: absolute;
            right: 129px;
            bottom: 50%;
            height: 189px;

            svg {
                transform: rotate(-90deg);
            }
        }

        a.referral {
            display: flex;
            position: absolute;
            bottom: 0;

            color: #bf58a1;
            font-size: 15px;
            opacity: 85%;

            background: #ffabe7;
            padding: 5px;
            border-top-right-radius: 8px;

            img {
                height: 25px;
            }
        }
    }

    form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        width: 100%;
        margin-top: 15px;
        padding: 25px;

        background: white;
        z-index: 1;

        h1 {
            color: #d0af53;
            font-weight: bold;
            font-style: italic;
        }

        label {
            display: flex;
            flex-direction: column;
            font-size: 1.3rem;

            input {
                margin-top: 5px;
                padding: 10px;
                font-size: 1.1rem;
                font-style: italic;

                background: #fff5e9;
                border: 2px solid black;
                border-radius: 15px;

                transition: .15s ease-in-out padding-left;
            }

            span {
                text-decoration: underline;
                transition: .15s ease-in-out transform;
            }

            textarea {
                margin-top: 5px;
                padding: 10px;
                font-size: 1.1rem;
                font-style: italic;

                background: #fff5e9;
                border: 2px solid black;
                border-radius: 15px;

                resize: none;
            }
        }

        label.move:focus-within {
            span {
                transform: translateY(38px) translateX(10px);
            }

            input {
                padding-left: 75px;
            }
        }

        button {
            background: rgb(255,255,255);
            background: linear-gradient(24deg, rgba(255,255,255,1) 0%, rgba(218,165,32,1) 100%);

            color: #504a20;
            font-weight: bold;
            font-size: 1.4rem;

            outline: none;
            border: none;
            width: fit-content;
            padding: 15px 55px;
            border-radius: 15px;

            margin: 0 auto;
        }
    }
}

@media only screen and (min-width: 750px) {
    .contact {
        .sidebar {
            display: block;

        }

        form {
            width: 500px;
            margin: 0;
        }
    }
}