@import url("./common/all.css");

/* nav indicator */
ul > li.about > a{
    border-bottom: solid 1px var(--gold);
}



.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.container p.paragraph{
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.container > h2{
    margin-top: 40px;
    margin-bottom: 20px;
}


/* form section */
.greeting{
    margin: 0 20px;
    margin-bottom: 160px;
}

.greeting > p {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.greeting > *{
    width: 100%;
    max-width: 386px;
}

/* form */
.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 360px;
}

form > label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    color: var(--gold);
    padding-bottom: 30px;
    width: 100%;

}

form input, textarea{
    padding: 20px;
    color: var(--yellow);
    background-color: transparent;
        font-family: Poppins;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: 0em;
        text-align: left;
}

form input:focus, textarea:focus{
    border: solid 2px var(--gold);
    outline: none;
    box-shadow: 0px 0px 5px 0px var(--gold);
}


form > label >input, textarea{
    margin-top: .6rem;
    outline: solid 2px var(--gold);
    background-color: transparent;
    border: none;
    height: 40px;
}

form > label > textarea{
    height: 120px;
    padding: 12px;
    margin-bottom: 40px;
}

form > label > input::placeholder, 
textarea::placeholder{
    color: var(--yellow);
}


.button > button {
    width: 100%;
    display: flex;
    justify-content: center;
}


@media (max-width: 375px){
   form {
        padding: 20px;
   }


}