html {
    font-size: 62.5%;
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../images/bg-repeat.jpg) top left;
    background-size: contain;

    & main {
        margin-top: auto;
        padding: max(1.5vw, 1.2rem) max(6vw, 5rem);
        display: flex;
        align-items: center;
        gap: max(7.5vw, 6rem);

        & .cta {

            color: #fff;

            & .cta__title {
                font-size: max(3rem, 3.7vw);
                font-weight: 900;
                margin-bottom: max(1.1rem, 1.35vw);
                max-width: max(30rem, 37vw);
            }

            & .cta__paragraph {
                font-size: max(1.5rem, 1.8vw);
                max-width: max(30rem, 37vw);
            }
        }


        & .form {
            background-color: #fff;
            padding: max(2rem, 2.5vw);
            border-width: 1px;

            & .form__item {
                position: relative;

                &:not(:last-child) {
                    margin-bottom: max(1.5rem, 1.8vw);
                }

                &:last-child {
                    margin-bottom: max(0.7rem, 0.8vw);
                }


                & .form__control {
                    font-size: max(1.5rem, 1.8vw);
                    border-radius: max(0.5rem, 0.6vw);
                    border: 1px solid black;
                    width: 100%;
                    padding: max(0.75rem, 0.9vw);

                    &.form__control--large {
                        padding-bottom: 0;
                        height: max(10rem, 12vw);
                    }
                }

                &.form__item--invalid {

                    &:not(:last-child) {
                        margin-bottom: max(0.6vw, 0.5rem);
                    }

                    & .form__control {
                        border-color: #F52E2E;
                    }

                    & .form__message-error {
                        position: static;
                        display: block;
                        margin: max(0.12vw, 0.1rem) 0 0 max(0.1rem, 0.12vw);
                        font-size: max(0.8rem, 0.9vw);
                        color: #F52E2E;
                        font-weight: 400;
                        width: auto;
                        height: auto;
                        padding: inherit;
                        clip: inherit;
                        white-space: inherit;
                        border: inherit;
                    }
                }

            }

            & .form__item--valid .form__control {
                border-color: #00C22B;
            }




            & .form__paragraph {
                font-size: max(1.5rem, 1.8vw);
                margin-bottom: max(2rem, 2.5vw);
            }

            & .form__submit-button {
                width: max(30rem, 37vw);
                height: max(4rem, 5vw);
                border-radius: max(0.5rem, 0.6vw);
                background-color: #3CCC87;
                color: #fff;
                font-size: max(1.5rem, 1.8vw);
                font-weight: 700;
                transition: 0.3s;

                &:hover {
                    opacity: 0.6;
                }
            }
        }
    }

    & .credits {
        text-align: center;
        margin-top: auto;
        background-color: #fff;
        padding: max(0.2rem, 0.25vw) max(1.5rem, 1.8vw);
        margin-bottom: max(0.5rem, 0.6vw);
        border-radius: max(1.5rem, 1.8vw);

        & .credits__paragraph small {
            font-size: max(1.2rem, 1.5vw);

            & .credits__link {
                font-weight: 700;

                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                transition: 0.3s;

                &:hover {
                    color: hsl(322, 100%, 66%);
                    font-weight: 900;
                }
            }
        }
    }
}