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

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
}
h1{
    font-size: 4em;
 }

h2{
    font-family: agenda-one-condensed, sans-serif;
font-weight: 800;
font-style: normal;
}


p{
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.section1{
background-image: url(images/Artboard\ 3.png);
object-fit: cover;
height: 200vh;
background-repeat: no-repeat;
background-size: 100%;
-webkit-background-size:cover;

}
.navigation{
    display: flex;
    margin: 0vh 5vh 0vh 5vh;
    font-family: dunbar-tall, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 1.4em;
}

a{
    text-decoration: none;
    color:black ;

}


.title{
flex: 90%;
justify-content: left;
    line-height: 290%;
    margin-right: 5em;

}

/* the big WORK ABOUT CONTACT words */
.navigators{
    flex: 10%;
    justify-content: right;
    text-align: center;
    
    font-size: .8em; 
    line-height: 290%;
}


.socials{
    display: flex;
    padding-top: 20em;
}

.portrait-container{
    flex: 50%;
    padding: 10vh 5vh 0vh 5vh;
}

.portrait{
border: solid;
border-width: 5pt;
border-radius: 15px;
border-color: #f16b4b;
}

.icons{
    flex: 50%;
    display: flex;
    padding: 60vh 15vh 0vh 30vh;
    
}

.behance{
    flex: 33%;
    margin-right: 4em;
    text-align: center;
    
}

.instagram{
    flex: 33%;
    margin-right: 4em;
    text-align: center;
    
    
}

.linkdin{
    flex: 33%;
    text-align: center;
  
}

.pagebreak1{
background-image: url(images/Artboard\ 4.png);
object-fit: cover;
height: 30vh;
background-repeat: no-repeat;
background-size: 100%;    
-webkit-background-size:cover;

}

.section2{
background-image: url(images/Artboard\ 5.png);
object-fit: cover;
height: 100vh;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
padding-top: 10em;
-webkit-background-size:cover;

}


.project1{
    flex: 33%;
    text-align: center;
    background-color:#f3f2f2;
    border: solid;
    border-color: #f16b4b;
    border-width: 5pt;
    border-radius: 15px;
    margin: 3% 5% 30% 5%;
    padding-top: 3%;
}

.project2{
    flex: 33%;
    text-align: center;
    background-color:#f3f2f2;
    border: solid;
    border-color: #f16b4b;
    border-width: 5pt;
    border-radius: 15px;
    margin: 3% 5% 30% 5%;
    padding-top: 3%;
}

.project3{
    flex: 33%;
    text-align: center;
    background-color:#f3f2f2;
    border: solid;
    border-color: #f16b4b;
    border-width: 5pt;
    border-radius: 15px;
    margin: 3% 5% 30% 5%;
    padding-top: 3%;
}

.pagebreak2{
background-image: url(images/Artboard\ 6.png);
object-fit: cover;
height: 30vh;
background-repeat: no-repeat;
background-size: 100%; 
-webkit-background-size:cover;
  
}

.section3{
background-image: url(images/Artboard\ 7.png);
object-fit: cover;
height: 100vh;
background-repeat: no-repeat;
background-size: 100%;    
padding-top: 10%;
padding-left: 60%;
-webkit-background-size:cover;

}

.about{
        background-color:#f3f2f2;
    border: solid;
    border-color: #f16b4b;
    border-width: 5pt;
    border-radius: 15px;
    margin: 5% 10% 20% 0%;
    padding: 0% 0% 10% 5%;
}

.aboutTitle{
font-family: dunbar-tall, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 1.4em;
margin: 0;
border: 0;
}

.body{
font-size: 1.7em;
line-height: 150%;

}

.pagebreak3{
background-image: url(images/Artboard\ 8.png);
object-fit: cover;
height: 30vh;
background-repeat: no-repeat;
background-size: 100%;    
-webkit-background-size:cover;

}