@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap');

:root {
    --desaturated-Red: hsl(0, 36%, 70%);
    --soft-red: hsl(0, 93%, 68%);
    --dark-grayish-red: hsl(0, 6%, 24%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
}

.container {
    background-image: url(images/bg-pattern-desktop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 20% 80%;
    height: 100vh;
}

    .area--logo {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding-top: 60px;
    }

        .logo {
            width: 80%;
            margin: auto;
        }

    .area--form {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        color: var(--desaturated-Red);
        line-height: 30px;
    }

    .info {
        width: 80%;
        margin:auto;
    }

        .area--form h1 {
            color: var(--dark-grayish-red);
            text-transform: uppercase;
            letter-spacing: 5px;
            font-size: 60px;
            padding-bottom: 30px;
            line-height: 80px;
        }

        .area--form h1 span {
            color: var(--desaturated-Red);
            font-weight: 300;
            text-transform: uppercase;
        }

        label {
            display: flex;
            align-items: center;
            padding-top: 40px;
        }

        .border-error {border: 1px solid var(--soft-red);}

        label input[type="email"] {
            height: 60px;
            border-radius: 30px;
            width: 100%;
            min-width: 350px;
            padding-left: 30px;
            border: 1px solid var(--desaturated-Red);
            outline: none;
            color: var(--desaturated-Red);
        }

            label input[type="email"]::placeholder {
                color: var(--desaturated-Red);
                letter-spacing: 3px;
            }

            #error-icon {
                position: relative;
                right: 140px;
                display: none;
            }

            #btn {
                position: relative;
                right: 100px;
                padding: 0px 50px;
                height: 60px;
                border-radius: 30px;
                border: none;
                background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
                cursor: pointer;
            }

            #error-text {
                color: var(--soft-red);
                padding-top: 20px;
                font-weight: 600;
                font-size: 13px;
            }

    .area--img {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        background-image: url(images/hero-desktop.jpg);
        height: 100vh;
        background-size: cover;
        background-repeat: no-repeat;
    }

.attribution { font-size: 11px; text-align: center; position: absolute; bottom: 10px; width: 100%;}
.attribution a { color: hsl(228, 45%, 44%); text-decoration: none; }

    .show {
        display: block;
    }

@media only screen and (max-width: 768px) {

    .container {
        background-image: none;
        background-color: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%));
        grid-template-columns: 100%;
        grid-template-rows: 150px 250px auto;
    }

    .area--logo {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

        .logo {
            width: 95%;
        }

    .area--form {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding-top: 40px;
    }

        .info {
            width: 95%;
        }

        .area--form h1 {
            font-size: 40px;
            line-height: 50px;
            text-align: center;
        }

        .area--form p {
            text-align: center;
        }

        label input[type="email"] {
            min-width: 95%;
        }


    .area--img {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        background-image: url(images/hero-mobile.jpg);
        height: 250px;
    }
}

.attribution { display: none;}