:root{

    --clr-primary-Red: hsl(4, 100%, 67%);

    --clr-Neutral-Blue-800: hsl(234, 29%, 20%);
    --clr-Neutral-Blue-700: hsl(235, 18%, 26%);
    --clr-Neutral-Grey: hsl(0, 0%,58%);
    --clr-Neutral-White: hsl(0, 0%, 100%);

    --fw-small: 400;
    --fw-large: 700;

    --ff-base: "Roboto", sans-serif;

}

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

#container{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-Neutral-Blue-700);
    font-family: var(--ff-base);
    font-size: 16px;
}

#wrapper{
    width: 60%;
    height: 100%;
    margin: auto;
}

#card{
    display: flex;
    width: 100%;
    height: auto;
    background-color: var(--clr-Neutral-White);
    border-radius: 1.5rem;
    padding: 1.5rem;

}

#vector-img{
    float: right;
    border-radius: 1rem;
    max-width: 100%;
    padding-left: 3rem;

}

.container{
    display: grid;
    gap: 1rem;
    grid-template-columns: auto;
    padding-left: 2rem;
    padding-top: 2.5rem;
}

h1{
    font-size: 3.5rem;
}

ul li{
    list-style-image: url(assets/images/icon-list.svg);
    vertical-align: middle;
    padding: 5px 10px 5px 15px;
}

#list{
    padding-left: 24px;

}

input[ type=text ]{
    width:100%;
    padding: 18px 20px;
    margin: -6px 0;
    display:inline-block;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    
}

#dismiss-button, input[type=submit] {
    width: 100%;
    background-color: var(--clr-Neutral-Blue-800);
    color: white;
    padding: 18px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;

}

#dismiss-button:hover, input[type=submit]:hover{
    background-image: linear-gradient(to right, #f15858, #ff9538);

}

.container-submit{
    display: grid;
    padding-left: 2rem;
    grid-template-columns: auto;
    padding-top: 1.2rem;
}

#success-message{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-Neutral-Blue-700);
    font-family: var(--ff-base);
    font-size: 16px;
}

#card-success{
    width: 25%;
    height: auto;
    background-color: var(--clr-Neutral-White);
    border-radius: 1.5rem;
    padding: 2.5rem;
}

#para{
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

#success-img{
    width: 65px;
    height: 65px;
}

@media(max-width: 600px){

    #container{
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--clr-Neutral-Blue-700);
        font-family: var(--ff-base);
        font-size: 16px;
    }
    
    #wrapper{
        width: 375px;
        height: 100%;
        margin: auto;
        
    }
    
    #card{
        display: flex;
        height: auto;
        background-color: var(--clr-Neutral-White);
        border-radius: 0;
        padding: 1rem;
        background-image: url(assets/images/illustration-sign-up-mobile.svg);
        background-repeat: no-repeat;
        
    }

    #vector-img{
        display: none;
    }
    
    .container{
        display: grid;
        gap: 1rem;
        grid-template-columns: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2.5rem;
    }
    
    h1{
        font-size: 2.5rem;
        padding-top: 250px;
    }
    
    ul li{
        list-style-image: url(assets/images/icon-list.svg);
        vertical-align: middle;
        padding: 5px 10px 5px 15px;
    }
    
    #list{
        padding-left: 24px;
    
    }

    .container-submit{
        display: grid;
        padding-left: 1rem;
        padding-right: 1rem;
        grid-template-columns: auto;

    }
    
    #card-success{
        width: 375%;
        min-height: 100vh;
        background-color: var(--clr-Neutral-White);
        border-radius: 0;
        padding-top: 8rem;

    }
    
    #para{
        padding-top: 2em;
        padding-bottom: 18em;
    }
    
    #success-img{
        width: 65px;
        height: 65px;
    }
}