style.css

*{
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;
}
html{
    scroll-behavior: smooth;
}
section{
    background-color: white;
}
.main{
    background-color:darkblue;
    height:100vh;
    color:white;
    font-size:50px;;
}
footer{
    background-color:black;
    color:white;
    text-align:center;
    padding:80px;
}
nav{
    display: flex;
    justify-content: space-between; /*for shifting nav to left*/
}
ul
{
    display: flex;
    list-style-type:none;
    width:500px;
    justify-content:space-around;
    font-size: 30px;
}
li{
   text-decoration: none;
}
h1{
    font-size:90px; 
    margin: 0;
}
h2{
    font-size:50px;
}
.hero-text
{
    margin-left:80px;
    margin-bottom: 200px;
}
.button
{
    width:200px;
    height:55px;
    background-color:coral;
    border-radius:30px;
     font-size: 35px;
    text-align:center;
    margin-top:20px;
}
p{
    margin:0;
    font-weight: 300;
    font-size:30px;
}
.hero-area
{
    display:flex;
    height:100%;
    justify-content:space-between;
    align-items: center;

}
.button:hover
{
    background-color:darkorange;
}
.button:active
{
    background-color: #A9A9A9;
    color:#808080;
}
.socials
{
    padding-bottom: 200px;
    
}
.socials>a{
    display:block;  /* for changing inline to block*/
}
.logo
{
    height:80px;
    margin:30px;
}
.social
{
    margin:20px;
}
.sub-section{
    display:flex;
    justify-content:space-around;
    padding:80px;
    margin-left:50px;
}
.sub-section-alternative
{
    display:flex;
    flex-direction:column;
    text-align:center;   
    padding:80px;
    
}
.headshot
{
    width:300px;
    border-radius:150px;
}
.headshot-container
{
    display:flex;
    align-items: center;
}
.project-card{
    width:300px;
    margin:10px;
    height:300px;
    box-shadow:5px 5px 20px grey;

}
.project-container
{
    display:flex;
    justify-content: space-around;
}
.subtext
{
    font-size:15px;
    font-weight: 300;
}
.project-image{
    
    margin-top:25px;
    width:250px;
    border-radius:125px;
}
hr
{
    margin-left:20px;
    margin-right:20px;
}
.project-link{
    text-decoration:none;
    color:coral;
}
a{
    text-decoration:none;
    color:white;
}
.hambur{
    display: none;
}
.menu{
    display:none;
    
}

.formcontainer {
    /* margin: 6vh 0vw; */
    justify-content:center;
    padding: 1vh 2vw;
}
.input
{
    align-items: center;
    padding:15px;    
}
.big-menu{
    margin-top:20px;
}
button{
    border-radius:50px;
    background-color:coral;
    padding:3px;
}
button:hover{
    background-color:darkorange;
}


@media only screen and (max-width:1000px)
{   
    .sub-section{
        margin: 5px;
        padding:10px;
    }
    .information>p
    {
        font-size:20px;
        padding:0;
        text-align: left;
    }
    .input
    {
    align-items: center;
    padding:15px;
    /* margin-left:10px; */
    justify-content: space-around;
    display:flex;
    }
    .project-card{
        width:500px;
        margin:10px;
        height:300px;
        box-shadow:5px 5px 20px grey;
    
    }
    .headshot-container{
        display:none;
    }
   h1{
        font-size: 55px;
    }
    .hero-text
    {
    margin-left:50px;
    margin-bottom: 200px;
    }
    .project-container{
        display:flex;
        flex-wrap:wrap;     /* if we decrese screen size then it adjust content*/  
    }
    .hambur{
        display:block;
        padding:10px;
        border:0;
        background-color:transparent;
        color:white;
        font-size:30px;
    }
    .logo
    {
        display:none;
    }
    .menu ul{
        color:white;
        display:flex;
        height:100%;
        flex-direction: column;
        justify-content: space-between;
        font-size: 40px;
    }
    .menu{
        display: none;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 30vh;
        padding: 5px;
        background-color: rgb(156, 99, 52);
    }
    .big-menu{
        display:none;
    }
    .formcontainer {
        justify-content: center;
    }
}