*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

:root {
    /* Primary */
    --tomato: #ff6155;
    /* Neutral */
    --dark-gray: #242742;
    --pale-gray: #36384d;
    --light-gray: rgb(25, 24, 43, 0.25);
    --solid-gray: rgb(25, 24, 43, 1);
    --white: #ffffff;
}

html,
body {
    height: 100%;
}

main {
    height: 100%;
    display: flex;
    justify-content: stretch;
}

.illustration__image {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.signup {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
}

.signup__wrapper {
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
}

.signup__content {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.signup__title {
    font: bold 2.5rem/1 "Roboto";
    color: var(--dark-gray);
}

.signup__description {
    font: normal 1rem/1.5 "Roboto";
    color: var(--dark-gray);
}

.signup__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
}

.signup__item {
    padding-left: 2.3125rem;
    background-image: url("/assets/images/icon-list.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
}

.signup__item--details {
    font: normal 1rem/1.5 "Roboto";
    color: var(--dark-gray);
}

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

.email {
    display: flex;
    flex-direction: column;
}

.email__wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.error {
    font: bold 0.75rem/1.5 "Roboto";
    color: var(--tomato);
}

.email__label {
    font: bold 0.75rem/1.5 "Roboto";
}

.valid {
    padding: 1rem 1.5rem;
    font: normal 1rem/1.5 "Roboto";
    color: var(--dark-gray);
    border-radius: 0.5rem;
    border: none;
    outline: 1px solid var(--light-gray);
    outline-offset: -1px;
}

.valid:hover,
.valid:focus {
    outline: 1px solid var(--solid-gray);
}

.invalid {
    outline: 1px solid var(--tomato);
    background: rgba(255, 97, 85, 0.15);
    color: var(--tomato);
    outline: 1px solid var(--tomato);
}

.invalid:hover,
.invalid:focus {
    outline: 1px solid var(--tomato);
}

.invalid::placeholder {
    color: rgba(255, 97, 85, 0.5)
}

.button {
    width: 100%;
    background: var(--dark-gray);
    color: var(--white);
    border-radius: 0.5rem;
    padding-block: 0.875rem;
    font: bold 1rem/1.5 "Roboto";
    border: none;
}

.button:hover,
.button:focus {
    cursor: pointer;
    background: linear-gradient(to bottom left, #FF6A3A, #FF527B);
    box-shadow: 0 1rem 2rem 0 rgba(255, 97, 85, 0.5);
}

.success {
    background: var(--white);
    min-height: 100vh;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.success__wrapper {
    margin-block: auto;
}

.success__picture {
    margin-bottom: 2.5rem;
}

.success__title {
    font: bold 2.5rem/1 "Roboto";
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
}

.success__description {
    font: normal 1rem/1.5 "Roboto";
    color: var(--dark-gray);
}

.success__button {
    margin-top: auto;
}

footer {
    position: fixed;
    bottom: 0.25rem;
    left: 0;
    width: 100%;
}

.attribution {
    font: normal 1rem/1 "Roboto";
    text-align: center;
    color: var(--dark-gray);
}
.attribution a {
    color: var(--tomato);
    text-decoration: none;
}

.visibility {
    display: none;
}

@media screen and (min-width: 850px) {
    html {
        background: var(--dark-gray);
    }

    main {
        justify-content: center;
        align-items: center;
    }

    .signup {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: stretch;
        border-radius: 2.25rem;
        max-width: 928px;
        width: 98%;
    }

    .signup__wrapper {
        padding-inline: 0;
        padding-block: 2rem;
        margin-inline: 4rem;
        max-width: 376px;
    }

    .signup__title {
        font-size: 3.5rem;
    }

    .illustration {
        padding: 1.5rem 1.5rem 1.5rem 0;
    }

    .illustration__image {
        height: 100%;
    }

    .success {
        max-width: 504px;
        min-height: auto;
        padding: 3rem 4rem 4rem 4rem;
        border-radius: 2.25rem;
    }

    .success__wrapper {
        margin-top: 0;
        margin-bottom: 2.5rem;
    }

    .success__button {
        margin-top: 0;
    }

    .attribution {
        color: var(--white);
    }
}