@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root
{

/*Add custom variables here*/
    /* ## Colors */
    /* ### Primary */
    --Blue: hsl(223, 87%, 63%);
    /* ### Secondary */
    --Pale-Blue: hsl(223, 100%, 88%);
    --Light-Red: hsl(354, 100%, 66%);
    /* ### Neutral */
    --Gray: hsl(0, 0%, 59%);
    --Very-Dark-Blue: hsl(209, 33%, 12%);

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


body
{
   width:100%;
   height:100vh;
   font-family: 'Libre Franklin',sans-serif;
   background-color: white;
   padding: 3rem 0;

}


main 
{
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.form-container 
{
    width: 90%;

    margin: 2rem auto;

    h1 
    {
        color: var(--Gray);
        font-weight: 300;
        margin-bottom: 0.2rem;

        strong 
        {
            color: black;
        }
    }

    p 
    {
        margin-bottom: 1rem;
        font-weight: 300;
        font-size: .9rem;
    }

}

.form-container form 
{
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    margin: 0 auto;
}

.input-container
{
    flex-grow: 1.5;
    position: relative;
}

.input-container input 
{
    border: 0;
    outline: 1px solid var(--Very-Dark-Blue);
    padding: 1rem 0 1rem 1.5rem;
    border-radius: 100px;
    width: 100%;
}

/* errors */

.error 
{
    
    color: white;
    font-size: .8rem;
    font-style:italic;
    position: absolute;
    left: 1.4rem;
    margin-top: .3rem;
}

.error::selection
{
   color: white;
   background-color: white;
}

input:user-valid
{
    border: none;
    outline: 2px solid green;
}


input:user-invalid
{
    border:none;
    outline: 2px solid red;
}

input:user-invalid ~ .error 
{
    color: red;
    transition: color 1s ease-in-out;

}



form button 
{
    flex-grow: .5;
    background-color: var(--Blue);
    color: white;
    border: none;
    border-radius: 100px;
    padding:0 1rem;
    font-weight: bold;
    cursor: pointer;
}


#illustration-dashboard-img
{
    max-width: 80%;
    margin: 2rem 0 5rem 0;
    
}


.social-links 
{
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    margin-bottom: 1rem;
}

.copyright 
{
    margin-top: 2rem;
    font-size: .7rem;
    color: gray;
}