@import url("https://use.typekit.net/sry2ovl.css");

html {
    background: #FFF;
    -webkit-font-smoothing: antialiased;
}


/* PAGE TITLE */

h1 {
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-size: 500%;
    letter-spacing: 0.5em;
    margin-top: 5em;
    margin-bottom: 0em;
}

.home-page-intro {
    font-size: 180%;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-bottom: 3em;
    margin-top: 1em;
    }


.project-title {
    font-weight: 600;
    line-height: 1.5;
    font-size: 150%;
    letter-spacing: 0.1em;
    margin-top: 1em;
    margin-bottom: 10px;
}

.project-part {
    font-weight: 400;
    line-height: 1.5;
    font-size: 140%;
    letter-spacing: 0.1em;
}

a.project-part:hover{
    color: #0e4afb;
    text-decoration: none;
}

h2 {
    font-weight: 700;
    font-size: 300%;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    
    padding-top: 2em;
}


h2 a { 
    text-decoration: none;
    font-weight: 700;
    font-size: 100%;
    letter-spacing: 0.3em;
    line-height: 40%;
}

h2 a:hover {
    text-decoration: none;
    color: #0e4afb;
}


/* LINE */
hr {
    width: 100%;
    height: 3px;
    margin: 0% 0% 0% 0%;
    background-color:black;
}

h3 {
    color: #808080;
    letter-spacing: 0.1em;
    font-size: 140%;
}


/* PROJECT DESCRIPTION*/
p2 {
    display: block;
    color: #808080; 
    font-size: 160%;
    font-weight: 350;
    line-height: 1.4;
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}



/* md */
@media screen and (max-width: 922px) {
    h1 {
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-size: 400%;
    letter-spacing: 0.3em;
    margin-top: 5em;
    }
    
    .home-page-intro {
    font-size: 160%;
    }
    
    h2 {
    font-size: 250%;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    padding-top: 2em;
    }
    
    p2 {
        margin-bottom: 2em;
    }
    
    
}

/* sm */
@media screen and (max-width: 768px) {
    h1 {
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-size: 300%;
    letter-spacing: 0.2em;
    margin-top: 4em;
    }
    
    .home-page-intro {
    font-size: 140%;

    }
    
    h2 {
        font-size: 200%;
        letter-spacing: 0em;
        margin-bottom: 5px;

        padding-top: 2em;
    }
    
    p2 {
        margin-bottom: 3em;
        font-size: 150%;
        margin-bottom: 1.5em;
    }
    
    h3 {
    margin-top: 7px;
    margin-bottom: 15px;
    color: black;
    }
}



/*---------------------------------------*/

section {
    padding-bottom: 30px;
}



/* IMG OVERLAY */
.pngcontainer1, .pngcontainer1 img {
  position: relative;
    width: 100%;
  
}
.img-front {
  z-index: 101;
}

.pngcontainer1 img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

/* IMG HOVER EFFECT */
.img-front:hover {
    transform: scale(1.1);
} 

.img-full-width:hover {
    transform: scale(1.03);
}


.img-full-width {
    display: block;
    max-width: 100%;
    
}




.div-bottom {
    margin-bottom: 80px;
}