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

body {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    min-height: 100vh;
    font-family: "Roboto", sans-serif;
    margin-top: 5px;
    background-color: hsl(234, 29%, 20%);
}

.container {
    position: relative;
    z-index: 1;

}

main {
    background-image: url(./assets/images/illustration-sign-up-mobile.svg);
    background-repeat: no-repeat;
    height: 20rem;
}

.child {
    position: relative;
    top: -180px;
    height: 35rem;
    width: 375px;
    border: 1px solid hsl(0, 0%, 100%);
    margin-top: 120px;
    z-index: -1;
    background-color: hsl(0, 0%, 100%);
    padding: 10px;
}

h1 {
    margin-top: 35px;
    margin-left: 15px;
    padding-bottom: 20px;
    color: hsl(234, 29%, 20%);
    font-weight: 700;
}

p {
    padding-bottom:  10px;
    margin-left: 15px;
    color: hsl(235, 18%, 26%);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}


/* ul li {
    list-style-image: url(./assets/images/icon-list.svg);
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    line-height: 12px;
    margin-left: 40px;
    line-height: 1.2;
} */

img {
    margin-left: 15px;
    margin-top: 10px;
    padding-bottom: 15px;
}

li:nth-child(2) {
   list-style-type: none;
   margin-top: -42px;
   margin-left: 40px;
   padding-left: 15px;
   line-height: 1.5;
   color: hsl(235, 18%, 26%);
}

img:nth-child(3) {
    margin-top: 20px;
}

li:nth-child(4) {
   list-style-type: none;
   margin-top: -41px;
   margin-left: 40px;
   padding-left: 15px;
   line-height: 1.5;
   color: hsl(235, 18%, 26%);
}

img:nth-child(5) {
    margin-top: 20px;
}

li:nth-child(6) {
   list-style-type: none;
   margin-top: -38px;
   margin-left: 40px;
   padding-left: 15px;
   color: hsl(235, 18%, 26%);
}

form {
    margin-top: 30px;
    margin-left: 10px;
    padding: 10px;
}

label {
    margin-top: 20px;
    padding-bottom: 10px;
    color: hsl(234, 29%, 20%);
}

small {
    display: inline;
    float: right;
    color: hsl(4, 100%, 67%);
    display: none;
}

.error {
    /* background-color: hsl(4, 100%, 70%); */
    border-color: hsl(4, 100%, 67%);
    color: hsl(4, 100%, 67%);
    font-weight: 700;
}


input {
    height: 50px;
    width: 320px;
    margin-top: 10px;
    border: 1px solid hsl(231, 7%, 60%);
    border-radius: 10px;
    padding: 20px;
    outline: 0
}

input:hover {
    cursor: pointer;
}

button {
    height: 50px;
    width: 320px;
    margin-top: 20px;
    border: 1px solid hsl(234, 29%, 20%);
    border-radius: 10px;
    background-color: hsl(234, 29%, 20%);
    color: hsl(0, 0%, 100%);
    /* font-size: 16px; */
    font-weight: 700;
    padding: 10px;
}

button:hover {
    border: 1px solid hsl(4, 100%, 67%);
    background-color: hsl(4, 100%, 67%);
    cursor: pointer;
}

.attribution {
    position: relative;
    top: -10rem;
}

@media screen and (max-width: 375px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        min-height: 100vh;
        font-family: "Roboto", sans-serif;
        margin-top: 5px;
        background-color: hsl(234, 29%, 20%);
    }
    
    .container {
        position: relative;
        z-index: 1;
    
    }
    
    main {
        background-image: url(./assets/images/illustration-sign-up-mobile.svg);
        background-repeat: no-repeat;
        height: 20rem;
    }
    
    .child {
        position: relative;
        top: -180px;
        height: 35rem;
        width: 375px;
        border: 1px solid hsl(0, 0%, 100%);
        margin-top: 120px;
        z-index: -1;
        background-color: hsl(0, 0%, 100%);
        padding: 10px;
    }
    
    h1 {
        margin-top: 35px;
        margin-left: 15px;
        padding-bottom: 20px;
        color: hsl(234, 29%, 20%);
        font-weight: 700;
    }
    
    p {
        padding-bottom:  10px;
        margin-left: 15px;
        color: hsl(235, 18%, 26%);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }
    
    
    /* ul li {
        list-style-image: url(./assets/images/icon-list.svg);
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        line-height: 12px;
        margin-left: 40px;
        line-height: 1.2;
    } */
    
    img {
        margin-left: 15px;
        margin-top: 10px;
        padding-bottom: 15px;
    }
    
    li:nth-child(2) {
       list-style-type: none;
       margin-top: -42px;
       margin-left: 40px;
       padding-left: 15px;
       line-height: 1.5;
       color: hsl(235, 18%, 26%);
    }
    
    img:nth-child(3) {
        margin-top: 20px;
    }
    
    li:nth-child(4) {
       list-style-type: none;
       margin-top: -41px;
       margin-left: 40px;
       padding-left: 15px;
       line-height: 1.5;
       color: hsl(235, 18%, 26%);
    }
    
    img:nth-child(5) {
        margin-top: 20px;
    }
    
    li:nth-child(6) {
       list-style-type: none;
       margin-top: -38px;
       margin-left: 40px;
       padding-left: 15px;
       color: hsl(235, 18%, 26%);
    }
    
    form {
        margin-top: 30px;
        margin-left: 10px;
        padding: 10px;
    }
    
    label {
        margin-top: 20px;
        padding-bottom: 10px;
        color: hsl(234, 29%, 20%);
    }
    
    small {
        display: inline;
        float: right;
        color: hsl(4, 100%, 67%);
        display: none;
    }

    .error {
        /* background-color: hsl(4, 100%, 70%) !important; */
        border-color: hsl(4, 100%, 67%);
        color: hsl(4, 100%, 67%) !important;
        font-weight: 700;
    }
    
    input {
        height: 50px;
        width: 320px;
        margin-top: 10px;
        border: 1px solid hsl(231, 7%, 60%);
        border-radius: 10px;
        padding: 20px;
    }
    
    input:hover {
        cursor: pointer;
    }
    
    button {
        height: 50px;
        width: 320px;
        margin-top: 20px;
        border: 1px solid hsl(234, 29%, 20%);
        border-radius: 10px;
        background-color: hsl(234, 29%, 20%);
        color: hsl(0, 0%, 100%);
        /* font-size: 16px; */
        font-weight: 700;
        padding: 10px;
    }
    
    button:hover {
        border: 1px solid hsl(4, 100%, 67%);
        background-color: hsl(4, 100%, 67%);
        cursor: pointer;
    }

    .attribution {
        position: relative;
        top: -10rem;
    }
    
}

@media screen and (min-width: 1440px) {
    body {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: "Roboto", sans-serif;
        margin-top: 5px;
        background-color: hsl(234, 29%, 20%);
    }

    .container {
        position: relative;
        flex-direction: row;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    
    main {
        background-image: url(./assets/images/illustration-sign-up-desktop.svg);
        background-repeat: no-repeat;
        margin-top: 20px;
        margin-left: 39rem;
        height: 40rem;
        width: 25rem;
    }

    .child {
        position: absolute;
        /* top: -80px; */
        left: 20px;
        height: 40rem;
        width: 950px;
        border: 1px solid hsl(0, 0%, 100%);
        margin-top: 180px;
        margin-left: 80px;
        z-index: -1;
        background-color: hsl(0, 0%, 100%);
        padding: 10px;
        border: none;
        border-radius: 20px;
    }

    h1 {
        margin-top: 7rem;
        margin-left: 5rem;
        padding-bottom: 20px;
        color: hsl(234, 29%, 20%);
        font-weight: 700;
    }

    p {
        padding-bottom:  10px;
        margin-left: 5rem;
        color: hsl(235, 18%, 26%);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        inline-size: 25rem;
    }

    img {
        margin-left: 5rem;
        margin-top: 10px;
        padding-bottom: 15px;
    }
    
    li:nth-child(2) {
       list-style-type: none;
       margin-top: -42px;
       margin-left: 7rem;
       padding-left: 15px;
       line-height: 1.5;
       color: hsl(235, 18%, 26%);
    }

    img:nth-child(3) {
        margin-top: 20px;
    }
    
    li:nth-child(4) {
       list-style-type: none;
       margin-top: -41px;
       margin-left: 7rem;
       padding-left: 15px;
       line-height: 1.5;
       color: hsl(235, 18%, 26%);
    }
    
    img:nth-child(5) {
        margin-top: 20px;
    }
    
    li:nth-child(6) {
       list-style-type: none;
       margin-top: -38px;
       margin-left: 7rem;
       padding-left: 15px;
       color: hsl(235, 18%, 26%);
    }

    form {
        margin-top: 30px;
        margin-left: 5rem;
        padding: 10px;
    }
    
    label {
        margin-top: 20px;
        padding-bottom: 10px;
        color: hsl(234, 29%, 20%);
    }
    
    small {
        position: relative;
        left: -32rem;
        display: inline;
        color: hsl(4, 100%, 67%);
        display: none;   
    }

    .error {
        /* background-color: hsl(4, 100%, 70%) !important; */
        border-color: hsl(4, 100%, 67%);
        color: hsl(4, 100%, 67%) !important;
        font-weight: 700;
    }

    input {
        display: block;
        height: 50px;
        width: 320px;
        margin-top: 10px;
        border: 1px solid hsl(231, 7%, 60%);
        border-radius: 10px;
        padding: 20px;
    }
    
    input:hover {
        cursor: pointer;
    }

    button {
        display: block;
        height: 50px;
        width: 325px;
        margin-top: 20px;
        border: 1px solid hsl(234, 29%, 20%);
        border-radius: 10px;
        background-color: hsl(234, 29%, 20%);
        color: hsl(0, 0%, 100%);
        /* font-size: 16px; */
        font-weight: 700;
        padding: 10px;
    }

    button:hover {
        border: 1px solid hsl(4, 100%, 67%);
        background-color: hsl(4, 100%, 67%);
        cursor: pointer;
    }

    .attribution {
        position: relative;
        top:  25rem;
        left: -30rem;
    }
    
}