html, body {

    /*
    no default margin or padding
    */
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: white;
    /*
    no horizontal scrolling
    */

}

#contact{
    /*
    full width and height of viewport
    */
    width: 100%;
    height: 100vh;
    
    background-color: #000000;
    /*
    flex layout and allows wrap
    */
    display: flex; 
    flex-wrap: wrap;   
    padding-bottom: 65px;
    justify-content: center;
    /*
    absolute based on viewpoint of page
    */
    /* position: absolute; */
    padding-bottom: 4%;

}

.contact-container {
    /*
    flex layout and allows wrap
    */
    display: flex;
    /*
    space between items
    */
    justify-content: space-between; 
    width: 100%;
    /*
    so content does not become smaller than required
    */
    min-width: fit-content;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: 5%;

}

.sub-title{
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 80px;

    /*
    spacing between contact us and description
    */
    margin-bottom: 15px;
    color:  #ffffff;

}

.Contact-description{
    font-family: 'Lexend Deca', sans-serif;
    /*
    incase width becomes to large and will create new rows
    current width very specific for context of page
    */
    max-width: 742px;
    /*
    breaks long words
    */
    word-wrap: break-word;
    font-size: 30px;
    font-weight: lighter;
    line-height: 1.5;
    color: #36C3FF;
}

/*
for email
*/
.Contact-description2{
    font-family: 'Lexend Deca', sans-serif;
    max-width: 742px;
    word-wrap: break-word;
    font-size: 30px;
    font-weight: semi-bold;
    line-height: 1.5;
    color: #ffffff;
}

/*
for "Make your ideas come to life!"
*/
.Contact-description3{
    font-family: 'Lexend Deca', sans-serif;
    max-width: 742px;
    word-wrap: break-word;
    font-size: 30px;
    font-weight: semi-bold;
    line-height: 1.5;
    color: #36C3FF;
    margin-top: -70px;
}

.contact-left{
    /*
    flex layout and allows wrap
    also what sets its height to
    */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 60px;
    /*
    spacing from left of page
    */
    margin-left: 130px;
    /*
    max width content can take up
    */
    max-width: 550px;

}

.contact-left p{

    /*
    spacing above paragarphs
    */
    margin-top: 30px;
    /*
    vertical margin
    */
    margin: 15px 0;

}

.social-icons{

    /*
    spacing between email and icons
    */
    margin-top: 20px;

}

.social-icons a{
    /*
    spacing between icons
    */
    /* margin-right: -8px; */
    display: inline-block;
    /*
    hovering when cursor over icon
    */
    transition: transform 0.5s;
    margin-right: 15px;

    font-size: 55px;
    
    
   
}

/*
icon hovering
*/
.social-icons a:hover{
    /*
    not really needed unless background changes color
    */
    color: #000000;
    /*
    how much icon moves up
    */
    transform: translateY(-5px);
}





.contact-image{
    /*
    size of image
    */
    width: 80%; 
    /*
    how far from left of page
    */
    left: 130px;
    /*
    border radius
    */
    border-radius: 30px;
    margin-top: 15px;
}

.contact-right{
    /*
    padding of 5% to shift it left a bit
    */
    padding-right: 4%;
    padding-left: 4%;
    padding-bottom: 4%;
    /*
    makes the max width of content within div 90%
    */
    max-width: 100%; 
     /*
    centering items
    */
    align-items: center;
    justify-content: center;
    outline: 2px solid #898989;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    /* padding: 2%;   */
    margin-top: 130px;
    
}


.contact-right form{
    /*
    full width
    */
    width: 100%;
    /*
    flex layout and allows wrap
    */
    display: flex;
    /*
    makes content in box stack vertically
    */
    flex-direction: column;
    /*
    content centered
    */
    justify-content: center; 
    align-items: center;
    /*
    how much spacing from top content is
    very specific
    */
    margin-top: 95px;
   
}





.contact-input {
    /*
    how much of box input boxes take up
    */
    width: 80%;
    /*
    outline
    */
    outline: 2px solid #898989;
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
    background-color: #393939;

}


/*
height and postion placeholder texts
*/
#name, #email{
    height: 65px;
}

#message{
    height: 100px ;
    resize: vertical;
    
}

form input, form textarea{
    /*
    full width
    */
    width: 100%;
    /*
    flex
    */
    display: flex;
    /*
    input text centered
    */
    align-items: center;
    /*
    no border
    */
    border: 0;
    background: #ffffff;
    /*
    padding of text
    */
    padding: 10px 15px;
    /*
    margin of input boxes
    */
    margin: 15px 0;
    /*
    color of input text
    and font
    */
    color: #ffffff;
    font-size: 18px;
    /*
    input box border radius
    */
    border-radius: 20px;
    /*
    prevent resizing
    */
    resize: none;
    /*
    breaks long words and proper wrapping
    */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /*
    padding and border width
    */
    box-sizing: border-box;
    /*
    margin between input boxes
    */
    margin-bottom: 30px;
   
}

 .contact-btn {
    /*
    color of submit button
    */
    background: #393939;
    /*
    submit button border radius
    */
    border-radius: 20px;
    /*
    no border
    */
    border: none;
    /*
    outline
    */
    outline: 2px solid #898989;
    color: #ffffff;
    /*
    width button takes up
    */
    width: 80%;
    /*
    height of button
    */
    height: 64px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 30px;
    font-weight: 500;
} 


::placeholder{
   /*
   place holder text color
    */
   color: #ffffff;
    
}

footer{
    font-family: lexend deca;
}



@media only screen and (max-width: 1300px) {

    /*
    stacks content vertically
    */
    .contact-container {
        flex-direction: column;
        padding-bottom: 4%;
        padding-left: 5%;
        padding-right: 5%;
        

    }

    .contact-left {

        /*
        width full
        */
        width: 100%;
        /*
        how far form left content is
        */
        /* margin-left: 5%;  */
        margin: auto;
        /*
        center content
        */
        justify-content: center;
        /*
        align item left
        */
        align-items: center; 
        
        /* padding-left: 5%; */
    }

    /*
    font sizes
    */
    .sub-title{
        font-size: 60px;
    }

    .Contact-description{
        font-size: 20px;
    }

    .Contact-description2{
        font-size: 20px;
    }

    .Contact-description3{
        font-size: 22px;
    }

    
    .social-icons a{
        /*
        space between email and icons
        */
        font-size: 30px;
    }

    .row{
        width: 100%;
    }

    .contact-image{
        /*
        width of image
        */
        width: 100%; 
        /*
        how far left from page
        */
        margin-left: 0px;
        top: 10%;
        /* transform: translateX(-50%); */
    }

    .contact-right {
        /*
        how much width of box takes up page
        */
        width: 70%;
        /* max-width: fit-content; */
        /* min-width: fit-content; */
        /*
        center content
        */
        justify-content: center;
        align-items: center;
        flex-direction: column;

        /*
        flexbox layout
        */
        display: flex;
        /*
        adjusts distance between image and box
        */
        margin-top: 70px;       

    }

  


    .contact-input {
        /*
        width of input
        */
        width: 80%;
        /*
        margin between inputs
        */
        margin: 10px auto;
    }

    button {
        /*
        width of submit
        */
        width: 80%;
        /*
        margin between message and submit
        */
        margin: 10px auto;
    }

    footer {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        background-color: #000;
        margin-bottom: 1000px;
      }

}




/*
colors used in page
black #000000
white #ffffff
*/