@import url("colors.css");

/*Global Styles
------------------------------------------------*/
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Catamaran', Sans-Serif;
    font-size: 15px;
    line-height: 1.5;
}  

p {
    color: var(--dark_text);
}

img {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-size: 26px;
    font-family: 'Lato', Sans-Serif;
    margin: 0;
    padding: 0;
    margin: 15px 0px;
}

h1{
    font-size: 46px;
    line-height: 1.5;
}

h3{
    margin-top: 0;
    margin-bottom: 3px;
    padding-bottom: 3px;
    font-size: 16px;
    line-height: 1;
}

.content_wrap {
    /*When the viewport is smaller than 800 the, it becomes the same width as the container*/
    /* we can use percentage so it's relative to it's container*/
    width: 800px;
    max-width: 85%; 
    margin: 0 auto;
    padding: 60px 0;
}

.project-item{
    overflow: hidden;
}


/*">" will  only select section within the .divider */
.divider > section {
    border-bottom: 1px dashed var(--light_green);
    padding: 25px 0;
}

/*last of type will select the last element of this 
selector*/
.divider > section:last-of-type {
    border-style: none;
}

/*Navigation Bar  
------------------------------------------------*/ 
#nav{
    background-color: var(--dark_text);
    top: 0;
    overflow: hidden;
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
}

#nav a {
    float: left;
    display: block;
    color: var(--white_text);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#nav a:hover {
    background: var(--white_text);
    color: var(--dark_text);
}

h3 + p {/*applies only to the first p that comes after h3*/
    font-style: italic;
}

/*genral sibling combinator : all the p after the h3*/
h3 ~ p {
    margin: 0;
}


/*Profile
------------------------------------------------*/
#profile{
    margin-top: 40px;
    
    background-image: url(background/cloud.jpeg);
    background-size: 100%;
    background-size: cover;
    background-position: top right;

    background-color: var(--dark_red);
    color: var(--white_text);
}

#profile img{
    float:left;
}

#profile p, #profile h1, #profile h2{
    color: var(--white_text);
}

#profile .button{
    text-decoration:none;
    color: var(--dark_text);
    background: var(--light_green);
    padding: 6px;
    border: 2px var(--light_green);
    border-radius: 6px;
    display: inline-block;
}

#profile .button:hover{
    text-decoration:none; 
    background: rgb(241, 227, 228,80);
}

/*Education
------------------------------------------------*/
#education {
    background-image: url(background/crayon.jpg);
    background-size: cover;
    background-position: top right ;
}

#education h3{
    margin-top: 15px;
}

/*Projects 
------------------------------------------------*/
#projects{
    background-color: var(--medium_green);
}

#projects p{
    color: var(--white_text);
}

#projects blockquote{
    color: var(--white_text);
    margin-bottom: 20px;
}

#projects h2{
    color: var(--white_text);
}

#projects h3{
    color:rgb(224,255,255);
    margin-top: 40px;
    font-size: 20px;
}

#projects .button{
    text-decoration:none;
    color: var(--dark_text);
    background: var(--light_green);
    padding: 6px;
    border: 2px var(--light_green);
    border-radius: 6px;
    display: inline-block;
}

#projects .button:hover{
    text-decoration:none; 
    background: rgb(241, 227, 228,80);
}


/*Work Experience 
------------------------------------------------*/
#work_experiences{
    background-color: var(--light_red);
}

#work_experiences h2, #work_experiences h3{
    color: var(--dark_red);
}

#work_experiences .job_details p{
    line-height: 1.5;
    font-size: 13px;
    margin: auto;
}

#work_experiences p{
    line-height: 1.5;
    margin: auto;
}


/*Drawings and Paintigs
------------------------------------------------*/
#drawings_paintings{
    background-color: var(--medium_green);   
}

#drawings_paintings p{
    line-height: 1.5; 
}

#drawings_paintings a{
    text-decoration: none;
}

/*Footer Contact Info 
------------------------------------------------*/
footer {
    background-color: var(--dark_green);
    color:  var(--white_text);
}

footer h2{
    color: var(--white_text);
}

.content_list {
    list-style-type: none;
    padding:0;
}

.content_list p{
    color: var(--white_text);
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.content_list a{
    text-decoration: none;
    color: var(--white_text);
    padding: 15px;
}


/*
footer .column {
    background-color: var(--dark_green) ;
    float: left;
    width: 33.33%;
    padding: 10px;
}

footer .column ul li a{
    color: var(--white_text);
    text-decoration: none;
}
  
footer p{
    margin: 0;
    padding: 0;
    color: var(--white_text);
}
*/

/*Reponsive
------------------------------------------------*/
/*media queries*/
@media screen and (min-width:750px){
    .project-item img{
        float: left;
        margin: 20px 20px 40px 0px;
    }

    .job_item{
        padding-bottom: 15px;
        display: grid;
        /*meaning that the first column is twice smaller than the first one*/
        grid-template-columns: 1fr 2fr; 
    }

   #profile, footer{
        text-align: center;
   }
   
   .content_list{
        display: flex;
        justify-content: center;
   }
}

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

    h2{
        font-size: 26px;
    }

    h1, h2{
        line-height: 1;
    }
}


