html{
	scroll-behavior:smooth;
}

.logobackground {
    opacity: 5;
    background: url(background0.jpg);
}
.quote {
    width: 100%;

    font: sans-serif;

    color: white;
}
.toadjust{
	height:3%;
	width:40%;
	left:30%;
	background:linear-gradient(black,	#808080);
}
.quote1{
    font: normal normal 900 60px/60px Source Sans Pro;
    text-align: center;
    color: #14cfae;
    
}
.logo {
    left: 3%;
    max-width: 100px;
    display: block;
    width: 39%;

    text-align: center;

    border-left: 30%;
    background: linear-gradient(#14cfae,#14cfaa);
}
h1.logo {
    position: relative;
    top: 1%;
    left: 3.1%;

    width: 34%;
    height: 3.1%;

    text-align: center;

    opacity: 1;
}
.addonforborder {
    position: relative;
    left: 37%;

    background: linear-gradient(#14cfae,white);
}
.intro {
    position: relative;

    opacity: 1.8;
    background: url(PORTFOLIOSCREENSHOT.PNG);
    background-repeat: no-repeat;
    background-size: 40% 130%;
}




img.myimg {
    position: relative;
    top: 4.4%;
    left: 40%;

    display: block;
    width: 21.5%;
    height: 9.8%;

    opacity: 1;

    align-items: center;
}
.my-services {
    display: block;
    width: 100%;
    box-sizing: border-box;

    opacity: 2;
    background: url(background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.services {
    width: 100%;
    padding: 2%;
    box-sizing: border-box;

    text-align: center;
}

.service {
    top: 50%;

    display: block;
    float: left;
    width: 33.33%;
    height: 8%;
    overflow: hidden;
    box-sizing: border-box;

    font: normal normal 300 18px/24px Source Sans Pro;
    font-family: sans-serif;

    word-wrap: break-word;

    color: white;
}
a.btn {
    position: relative;
    left: 43.1%;

    display:block;
    width: 13.6%;
    height: 1.1%;
    clear: left;

    font: normal normal 900 30px/30x Source Sans Pro;
    font-family: sans-serif;

    text-align: center;

    color: black;
    background: #14cfae;
}
a.btn:hover{
	opacity:0.5 ;
}
.about-me {
    background: linear-gradient(#80cbc4,#87a5cb);
    box-sizing: border-box;


}
.section__title--about {
	position:relative;
	left:43%;
    background:#94FA92;
    text-align: center;
    font-family: sans-serif;
    display:inline-block;


}
.about-me__body{
     font-family: sans-serif; 
     color:#80cbc4;
     background:url(ghj.jpg);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     display:flex;
     resize:both;
     

}
.data{
	position:relative;
	height:auto;
    width:45%;
    word-wrap:word-break;
    box-sizing:border-box;
    resize:both;
}
.picadjust{
    position:relative;
    height:400px;
    width:28%;
    box-sizing:border-box;
    display:flex;
    resize:both;
    left:20%;
}
.my-work{
	opacity:4;
    background:url(download.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align:center;
}


div.section__title{
	position:relative;
	top:1%;
	left:40%;
	width:15%;
	height:1%;
	font: normal normal 900 60px/60x Source Sans Pro;
	display:block;
	text-align:center;
	background:rgb(178, 255, 89,0.5); 
    
}
.portfolio__img{
	box-sizing:border-box;
	flex:20%;
	width:16.5%;
	height:7.5%;

}
.portfolio__img:hover{
    opacity:0.5;
}
.footerdiv{
	background:#141414 0% 0% no-repeat padding-box;
    
}
.contact{
	position:relative;
	background:#16E0BD;
    display:inline-block;
    top:7%;
    left:43%;
    height:7.9%;
    width:14.7%;
    text-align:center;

}
.footer__link{
    font: normal normal 900 60px/60x Source Sans Pro;
    color:#303030;
    font-weight:bold; 
    text-align:center; 
}
.portfolio__item:focus {
    position: relative;
    z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .5;
}
.footer {
    background: #111; 
    padding: 2.5em 0;
}


.footer a { 
    color: inherit;
    text-decoration: none;
}
.footer__link {
    font-size: 1.25rem;
    font-weight: bold ;
    color:#16E0BD;
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}
.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}
.social-list__item {
    margin: 0 .5em;
    color:#16E0BD;

}

.social-list__link {
    padding: .5em;

}


header .nav-toggle {
	display: flex;
    justify-content: space-between;
    padding: 1em;
}

.nav {
    position: fixed;
    background: #303030;
    color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.5,0,.5,1);
}
.nav__list {
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav__link {
    color:#16E0BD;
    font-weight: 900;
    font-family:sans-serif;
    font-size:2.25rem;
    text-decoration: none;
}

.nav__link:hover {
    opacity: 0.8;
    color:  #16e0bd;
}
.nav-toggle {
    padding: .5em;
    background: transparent;
    cursor: pointer;
    position: absolute;
    right: 1em;
    top: 1em;

    z-index: 1000;
}
.nav-open .nav{
     transform: translateX(0);
}
.nav-open .nav-toggle{
	position: fixed;
}
.nav-open .hamburger{
	transform: rotate(.625turn);
}

.nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
    opacity: 0;
}







.hamburger {
    display: block;
    position: relative;
}

.hamburger
.hamburger::before,
.hamburger::after {
    background: #16E0BD;
    width: 2em;
    height: 3px;
    border-radius: 1em;
    transition: transform 250ms ease-in-out;
}


.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}
.hamburger::before { top: 6px; }
.hamburger::after { bottom: 6px; }