body{
    margin: 0;
    display : flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .4rem .7rem;
    background-color: #1c1c1c;
    color : #ffffff;
    font-family: "Source Sans 3", sans-serif;
}
#requirements , #projectInfo , textarea{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background-color: #2a2a2a;
    padding : .7rem .9rem ; 
    margin-top: .7rem;
    resize: none;
}
#projectInfo{
    position: relative;
}

form div{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    gap : .4rem;
    font-size: 1.2rem;
}
form{
    width: 100%;
    gap : 1rem;
}
h1{
    margin-left: 0;
    margin-bottom: 0;
}
.red{
    color:#fc3f37;
}
.head{
    font-size: 1.7rem;
}

.dot{
    display: flex;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    background-color: #fc3f37;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background-color: #2a2a2a;
    border : solid 1px #ffffff;
}
.con{
    display: flex;
    align-items: center;
    gap : .5rem
}
form input , form textarea , form select{
    width : 90%;
    padding : .5rem .9rem;
    border : none; 
    border-radius: 3px;
    font-weight: 500;
    font-size: 1.2rem;
    background-color: #3A3A3A;
    color : #ffffff;
}
#next{
    display: block;
    position: absolute;
    bottom: 3px;
    right:15px; 
    width: 50%;
    padding : .4rem .5rem; 
    font-weight: 600;
    background-color: #fc3f37;
    color :#ffffff;
    cursor: pointer;
    transition: all .5s;
    border: none;
    border-radius: 3px;
    margin-top: 50rem;
    
}
#next:hover{
    background-color: #ee4d48;
    box-shadow: 1px 1px 15px greenyellow;
}
form textarea{
    margin-bottom: 4rem;
}
#phone{
    margin-bottom: 4rem;
}


form select{
    cursor: pointer;
}
.success-message h2{
    font-size: 2rem;
}
.success-message p{
    font-size: 1.4rem;
}
.success-message a{
    text-decoration: none;
    color : #ffffff;
    font-size: 1.3rem;
}
@media(min-width: 800px ){
    #next{
        padding: .6rem .9rem; 
    }
    body {
        display : grid;
        grid-template-columns: 6fr 8fr;
        grid-template-areas: 'main head';
    }
    main{
        grid-area: main;
        padding: 1rem ;
        
    }
    header{
        grid-area: head;
        background-image: url('../images/logPhoto.png');
        background-repeat: no-repeat;
        background-position: center;
        min-height: 100vh;
        height: 100%;
    }
}