styles.css

/*     HSL 
$color1: hsla(355%, 75%, 90%, 1);
$color2: hsla(105%, 5%, 98%, 1);
$color3: hsla(182%, 24%, 86%, 1);
$color4: hsla(203%, 56%, 62%, 1);
$color5: hsla(215%, 67%, 34%, 1);

     RGB 
$color1: rgba(230, 57, 70, 1);
$color2: rgba(241, 250, 238, 1);
$color3: rgba(168, 218, 220, 1);
$color4: rgba(69, 123, 157, 1);
$color5: rgba(29, 53, 87, 1);

   HEX 
$color1: #e63946ff;- imperial red
$color2: #f1faeeff; - Honeydew
$color3: #a8dadcff; - powder blue
$color4: #457b9dff; - steel blue
$color5: #1d3557ff; - Prussian blue
*/
/* Global Styles
----------------*/
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  } 
body {
 color: #1d3557ff;
 margin: 0;
 padding: 0;
 font-family: 'Montserrat', sans-serif;
 font-size: 15px;
 line-height: 1.5;
}
img {   
    width: 300px;
}
a{
    color:#f1faeeff;
}
a:hover {
    text-decoration: none;
}
h1{
    font-size: 100px;
    line-height: 1;
}
h2 {
    
    font-size: 45px;
}
h1, h2 {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    margin: 0;
    
}
h3 {
    margin-top: 0;
    margin-bottom: 0;
}
.content-wrap{
    max-width: 800px;
    width: 85%;
    margin: 0 auto;
    padding: 60px 0;
}
.item-details h3 + p {
    font-style: italic;
}
.item-details h3 ~ p {
    margin: 0;
}
.divider > section {
    border-bottom: 1px solid #1d3557ff;
    padding: 25px 0;
}
.divider > section:last-of-type {
    border-bottom: none;
}

/* Profile
----------------*/
header {
    background-color :#e63946ff  ;
    color : #f1faeeff;
  
}



/* Projects
----------------*/
.projects {
    background-color:#f1faeeff ;
}
.projects a {
    color: #1d3557ff;
}
.projects .btn {
    color: #f1faeeff;
    background-color: #1d3557ff;
    text-decoration: none;
    padding: 8px;
    border-radius: 4px;
    margin: 10px 0;
    display: inline-block;
}
.projects .btn:hover {
    background-color: rgba(29, 53, 87, .80);
    ;
}
.project-item {
    overflow: hidden;
}


/* Work experience
----------------*/
.work-experience {
    background-color: #a8dadcff ;
 }

/* Education
----------------*/
.education {
    background-image: url(https://images.unsplash.com/photo-1584463058118-1fa1cd0c750b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60);
    background-size: cover;
    background-position: top left;
    padding: 100px;
}
.education p {
    width: 60%;
}


/* Contact Information
----------------*/
footer {
    background-color: #1d3557ff;
    color:#f1faeeff;
}
    
.contact-list{
    list-style-type: none;
    padding: 0;
    
    }
.contact-list a {
    padding: 15px;
    display: inline-block;
}




/* Responsive Styles
----------------*/
@media screen and (min-width:700px) {
    header, footer {
        text-align: center;
    }
    .project-item img {
        float : left;
        margin-right: 20px;
    }
    .job-item {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 20px; 
        margin-block-start: 0px;
    }
    .contact-list {
        display: flex;
    justify-content: center;
    }
}
@media screen and (max-width:699px) {
    h1 {
        font-size: 75px;
    }
    h1 {
        line-height: 0.9;
        margin-bottom: 20px;
    }
    h2 {
        line-height: 1;
    }
    .contact-list a {
        padding: 5px;
    }
}