/* 

2C2C54 = space cadet

69DC9E = medium aquamarine

D8DDEF = lavender web

EF8354 = mandarin

AA6DA3 = pearly purple

*/


/* Global styles
--------------------------------------------- */
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
body {
    color : #2C2C54;
    margin:0;
    padding:0;
    font-family:'Montserrat', sans-serif;
    font-size:15px;
    line-height: 1.5;
}

img{
    
    width:600px;
}

h1 {
    font-size:100px;
    line-height:1;
}

h2 {
    font-size:45px;

}

h1,h2 {
    font-family: 'Caveat', cursive;
    font-weight:400;
    margin:0;
}
.content-wrap {
    max-width:800px;
    width: 85%;
    margin:0 auto;
    padding:60px 0;
}

h3  { 
    margin-bottom: 0;
}

.item-details h3 + p {
    font-style: italic;
}

.item-details h3 ~ p {
    margin:0;
}

.divider > section{
    border-bottom:1px dashed black; 
    padding:25px 0;
}

.divider > section:last-of-type {
    border-bottom:none;
}
/* Profile
--------------------------------------------- */
header {
    background: #69DC9E;
    /* color: #D8DDEF; */
}

/* projects / portfolio
--------------------------------------------- */

.projects {
    background: #EF8354;
}

.project-item {
    overflow:hidden;
}

.project-item h3 {
    margin-top:0;
}

/* work expirence
--------------------------------------------- */

.work-expirence {
    background : #AA6DA3;
}

.job-item {
    display:grid;
    grid-template-columns: 1fr 2fr;
    column-gap:20px;
}

/* education
--------------------------------------------- */

.education {
    background: #D8DDEF;
    background-image: url(../images/joanna-kosinska-unsplash.jpg);
    background-size: cover;
    background-position: top right;
    padding-bottom:100px;
}
.education p {
    width:60%;
}

/* contact info
--------------------------------------------- */
.contact-list {
    list-style-type: none;
    padding:0;
}

.contact-list a {
    padding:15px;
    display:inline-block;
    color:yellow;
}

footer {
    background:#2C2C54;
    color: #D8DDEF; 
}


/* responsive styles 
--------------------------------------------- */

@media screen and (min-width:750px) {

    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;
    }

    .contact-list {
        display:flex;
        justify-content: center;
    }

}

@media screen and (max-width:749px) {
    h1 {
        font-size:75px;
        line-height:0.9;
        margin-bottom:20px;
    }

    h2 {
        line-height:1;
    }

    .contact-list a {
        padding:5px;
    }
}