body{
    font-family:  'Lato', sans-serif;
}
.hero{
    background: linear-gradient(90deg, rgba(43, 59, 109, 0.9), rgba(150, 11, 150, 0.7)), url("photos/laptop.jpg");
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    padding: 100px 20px;
    color: whitesmoke;
}

.hero p{
 font-size: 36px;
 
}
.contact-link {
display: inline-block;
padding: 20px 50px;
color: whitesmoke;
border: whitesmoke 1px solid ;
background-color: rgb(55, 138, 163);
font-size: 20px;
transition: all 150ms ease-in-out;
}
.contact-link:hover{
    background-color: rgb(71, 168, 197);
    color: whitesmoke;
}
h1,h2,h3,h4{
    font-family: 'Old Standard TT', serif;
}
h1{
    font-weight: bold;
    font-size: 96px;
}
h2,h3{
font-size: 24px;
opacity: 0.9;
}

#index-paragraph{
    text-align: center;
    margin: 100px 0;
    font-size: 46px;
    font-family: 'Old Standard TT', serif;
}
#brand-name{
    font-family: 'Old Standard TT', serif;
    font-size: 40px;
}
.project-link{
    text-decoration: none !important;
    display: inline-block;
    padding: 15px 20px;
    color: whitesmoke;
    background-color: rgb(47, 136, 163);
    font-size: 18px;
    transition: all 150ms ease-in-out;
}
.project-link:hover{
    color: whitesmoke;
    background-color: rgb(71, 168, 197);
}
.project-desc > h2{
    font-size: 46px;
    font-weight: bold;
}
.project-desc > p {
    line-height: 1.5;
    font-size: 18px;
}
.content-wrapper{
    padding: 80px 0;
    height: 100%;
    color: whitesmoke;
    background: linear-gradient(90deg, rgba(43, 59, 109, 0.9), rgba(150, 11, 150, 0.7));

}
.content-wrapper h1{
    font-size: 46px;
    color: whitesmoke;
}

.about-article  p{
    font-size: 16px;
    padding: 15px;
}
.about-profile-pic img{
    filter: grayscale(25%);
}

.tech i{
    margin: 20px;
    font-size: 50px;
}
.content a{
color: inherit;
text-decoration: none;
font-size: 20px;
}
.content a:hover{
    text-decoration: underline;
}
footer{
    background-color: #212529;
    color: whitesmoke;
    padding:  0 0 40px;
}
 .contact-box{
     color: whitesmoke;
     background:linear-gradient(90deg, rgba(43, 59, 109, 0.9), rgba(150, 11, 150, 0.7)) ;
    padding: 50px 100px;
}
 .contact-box  h4{
        font-size: 36px;    
}
 .contact-box p{
    font-size: 26px;
    opacity: 0.7;
}
footer .mail a{
    font-size: 26px;
    color: whitesmoke;
    text-decoration: none;

}
footer .mail a:hover{
text-decoration: underline;
}
footer .coder a {
    text-decoration: none;
    color: inherit;
    opacity: 0.7;
}
footer .coder a:hover{
    text-decoration: underline;
} 
footer .media-links{
    text-align: center;
   
}
footer .media-links a {
    color: unset;
    text-decoration: none;
    padding: 0 10px;
    font-size: 24px;
    transition: all 100ms ease-in-out;

}
footer .media-links a:hover {
color: rgb(71, 168, 197);

}
@media (max-width:992px) {
 .content {
     text-align: center;
 }
 .project-desc{
    text-align: center;
}
}


@media (max-width:768px){
    .hero h1{
        font-size: 65px;
        line-height: 1.2;
    }
    
    .hero p{
        font-size: 20px;
      
    }
    
    .about-article{
        text-align: center;
    }
    #index-paragraph{
        font-size: 34px;
    }
    #brand-name{
        font-size: 28px;
    }
    
}