/* MOBILE */

:root{
    --blue-100: hsl(223, 100%, 88%);
    --blue-200: hsl(223, 87%, 63%);
    --blue-300: hsl(209, 33%, 12%);
    --gray: hsl(0, 0%, 59%);
    --red: hsl(354, 100%, 66%);
}

.flex{display: flex;}
.f-column{flex-direction: column;}
.grid{display: grid;}

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

main{
    text-align: center;
    align-items: center;
    margin: 5em 3em 2em;
    min-height: calc(100vh -7em);
}

img{
    max-width: 100%;
    display: block;
}

.logoimg{
    height: 0.8em;
}

.header h1{
    font-weight: 300;
    color: var(--gray);
    font-size: 1rem;
}

.header h1 span{
    font-weight: 700;
    color: var(--blue-300);
}

.header{
    margin-top: 2em;
    align-self: stretch;
}

.header p{
    font-weight: 300;
    color: var(--blue-300);
    font-size: 0.6rem;
    margin-block: 1.2em 2.5em;
}

form .mailbx, .btn{
    border: solid 0.1em hsl(223, 100%, 88%);
    border-radius: 20px;
    padding: 0.8em 2em;
    font-size: 0.6rem;
}

form .mailbx::placeholder{
    color: var(--blue-100);
    opacity: 60%;
}

form .btn{
    color: white;
    background-color: var(--blue-200);
    box-shadow: 0em 0.3em 1em 0em hsl(223deg 100% 88% / 98%);
}

form{
    row-gap: 0.5em;
}

form.invalid .mailbx{
    border-color: var(--red);
}

input.mailbx:focus-visible {
    outline: none;
}

.illustration img{
    margin-block: 3em 5em;
}

.social ul{
    justify-content: center;
    column-gap: 0.5em;
}

.social ul li a{
    color: var(--blue-200);
    border: solid 0.1em var(--blue-100);
    border-radius: 50%; 
    padding: 0.3em;
    font-size: 0.7rem;
}

.social p{
    color: var(--gray);
    font-size: 0.5rem;  
    margin-top: 3em;
}

.header .errortxt{
    font-size: 0.5rem;
    color: var(--red);
    font-style: italic;
    margin-block: 0em 1.2em;
    display: none; /*NOTE: if you make with visibility, it stay still there as area*/

}

.header form.invalid .errortxt{
    display: block;
}

.header form .btn:hover{
    cursor: pointer;
    opacity: 80%;
}

.social ul li a:hover{
    color: white;
    background-color: var(--blue-200);
    border-color: var(--blue-200);
}

/* DESKTOP */

@media only screen and (min-width:1000px) {
    


    main{
        max-width: 24em;
        margin-inline: auto;
    }

    .logoimg{
        height: 1em;
    }

    .header form{
        flex-direction: row;
        position: relative;
        justify-content: space-between;
        column-gap: 0.5em;
    }

    .header h1{
        font-size: 1.8rem;
    }

    .header p{
        font-size: 0.75rem;
    }

    .header form p{
        font-size: 0.78rem;
        position: absolute;
        bottom: -3em;
        left: 1.9em;
    }

    /* .illustration img{
        height: 15em;
    } */

    form .mailbx{
        width: 16rem;
    }

    form .mailbx, .btn{
        border-radius: 27px;
        padding: 1.1em 2em;
        font-size: 0.6rem;
    }

    form .btn{
        padding-inline: 4em;
    }

}