style.css

*{
    box-sizing: 0;
    margin: 0;
    padding:0;
    font-family: Arial, sans-serif;
}
html {
    /*overflow: hidden;*/
    height: 100%;
}
body{
    background-color: #FFF;
    /*overflow: auto;*/
    height: 100%;
}

/*navigation*/
.navigation{
    background-color: #fdf7db;
    height: 80px;
}
nav{
    display:grid;
    height: 100%;

    grid-template-columns: 1fr .7fr 1fr;
    grid-template-areas:
    "button links"
    

}
.links{
    display:grid;
    align-content: center;
    justify-content: center;
    
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    grid-area: links;
    
}
.links li{
    padding-left: 10px;
    font-size: 20px;   
}
.links a{
    color: #646e78;
    text-decoration: none;
}
.links a:hover{
    color: #8d98a7;
    text-decoration: underline;
}
.button{
    grid-area:button;
    text-align: right;
    padding-right: 20px;
}
.icon-btn{
    color: #000;
    font-size: 30px;
    cursor: pointer;
}
.mobile-menu{
    
    display: none;
}
.mobile-links {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    text-align: center;
    align-content: center;
    justify-content: center;
    grid-area: mobile-links;
}
.mobile-menu li{
    padding: 10px 0 10px 0;
    font-size: 20px;   
}
.mobile-menu a{
    color: #646e78;
    text-decoration: none;
}
.mobile-menu a:hover{
    color: #8d98a7;
    text-decoration: underline;
}


/*hero*/
.hero{
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/birds.jpg");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50%;

    display: grid;
    justify-content: center;
    align-content: center;
}
.hero-text{
    text-align: center;
    color: #fff;
}
.hero-text h1{
    font-size:76px;
}
.hero-text p{
    font-size:22px;
    color: #FFE7CD;
    font-style: italic;
}

/*about*/
.about{
    background-color: #DBCBBA;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-content{
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-text{
    width: 30%;
}
.about-img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}
.about-img img{
    width: 70%;
}
.contact-button{
    background-color: #fff;
    color:#000;
    font-size: 15px;
    border: #EBB565;
    width: 125px;
    height: 30px;    
}
.contact-button:hover{
    background-color: white;
    color:#000000;
    border: 2px solid #000000;
}


/*project section*/
.projects-section {
    background: #ffffff;
    color:rgb(0, 0, 0);
    padding-left: 15px;
    padding-right: 15px;
}
.projects{
    display: grid;
    justify-content: center;
    align-content: center;
}
.projects-top{
    text-align: center;
}
.projects-grid{
    min-height: 100vh;
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, .1fr);

    gap: 30px;
    color: #fff;
}
.projects-grid img{
    width: 100%;
}
.pglinks{
    color:#000;
    text-decoration: none;
}
.pglinks:hover{
    color:#f77300;
    text-decoration: none;
}
.overlay-text{
    text-align: center;
}
.overlay-text a{
    color:#fff;
    text-decoration: none;
    font-weight: bold;
}
.overlay-text a:hover{
    color:#f79137;
    text-decoration: underline;
}
.project-text{
    font-size: 25px;
    text-align: right;
    padding: 50px 0  50px 0;
}
#ptlink{
    color:#000;
}
#ptlink:hover{
    color:#70568a;
    text-decoration: none;
}
.img-container {
    position: relative;
    display: grid;
    justify-content: center;
    align-content: center;
}
.img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height:100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #000000;
    display: grid;
    justify-content: center;
    align-content: center;
}
.img-container:hover .img-overlay{
    opacity: .8;
}

/*contact*/
.contact-top{
    text-align: center;
}
.contact{
    background-color: #e0e0e0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}
.contact-grid{
    padding-top:30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "form info"
}
.contact-info{
    height: 500px;
    grid-area: info;
    display: grid;
    justify-content: center;
    align-content: center;
}
.contact-info a{
    color:#000000;
    padding: 10px 0 20px 0;
}
.contact-info a:hover{
    color:#525252;
}
.contact-section{
    grid-area:form;
    display: grid;
    justify-content: center;
    align-content: center;
    padding: 10px;
}
.name-email{
    padding-bottom:18px;
}
.input-name{
    background: #FFFFFF;
    border: 0px solid #000000;
    border-radius: 10px;
    width: 150px;
    height: 30px;
    padding-left:10px;
}
.input-email{
    background: #FFFFFF;
    border: 0px solid #000000;
    border-radius: 10px;
    width: 245px;
    height: 30px;
    padding-left:10px;
}
.input-comment{
    background: #FFFFFF;
    border: 0px solid #000000;
    border-radius: 10px;
    height: 200px;
    width: 400px;
    padding: 10px;
    font-size: 14px;
}
.button-area{
    padding-top: 20px;   
}
.submit-button{
    background-color: #EBB565;
    color:#ffffff;
    font-size: 15px;
    border: #EBB565;
    width: 100px;
    height: 30px;
    border-radius: 20px;
}
.submit-button:hover{
    background-color: white;
    color:#f77300;
    border: 2px solid #e16900;
    box-shadow: 12px 12px 2px 1px rgba(255, 166, 0, 0.281);
}

/*footer*/
footer {
    background-color: #1B1E1F;
    display: grid;
    justify-content: center;
    align-content: center;
    height: 150px;
}
.copyright {
    text-align: center;
    color: #fff;
    
}
@media only screen and (max-width:900px){

    .about-content{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .about-text{
        width: 70%;
    }
    .about-img{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        padding-bottom: 20px;
    }
    .about-img img{
        width: 80%;
    }
    .projects-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, .1fr);
        gap: 30px;
        color: #fff;
    }
    .contact-grid{
        display: grid;
        padding:0px;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
        "info"
        "form"        
    }
}
@media only screen and (max-width:715px){
    nav{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: .3fr 0fr;
        grid-template-areas:
        "button"
        "links"
    }
    .links{
        display:none;
    }
}
/*nav*/
@media screen and (min-width: 715px){
    .button{
        display: none;
    }
    .mobile-menu,.mobile-links {
        display: none;
    }
    
}
@media screen and (max-width: 476px){

    .contact-section{
        grid-area:form;
        display: grid;
        justify-content: center;
        align-content: center;
        padding: 0px;
    }

}
@media screen and (max-width: 400px){
    .contact-info a{
        color:#000000;
        padding: 10px 0 20px 0;
        width: 270px;
      
    }
    .input-name{
        background: #FFFFFF;
        border: 0px solid #000000;
        border-radius: 10px;
        width: 100px;
        height: 30px;
        padding-left:10px;
    }
    .input-email{
        background: #FFFFFF;
        border: 0px solid #000000;
        border-radius: 10px;
        width: 180px;
        height: 30px;
        padding-left:10px;
    }
    .input-comment{
        background: #FFFFFF;
        border: 0px solid #000000;
        border-radius: 10px;
        height: 200px;
        width: 280px;
        padding: 10px;
        font-size: 14px;
    }
    .navigation{
        background-color: #fdf7db;
        height: 90px;
    }
}
@media screen and (max-width: 300px){
    .input-comment{
        background: #FFFFFF;
        border: 0px solid #000000;
        border-radius: 10px;
        height: 200px;
        width: 280px;
        padding: 0px;
        font-size: 14px;
    }
    .hero-text h1{
        font-size:56px;
    }

}