@charset "utf-8";
@font-face{
font-family: 'Montserrat', sans-serif;
font-family: 'adam', sans-serif;	
font-family: 'Poppins', sans-serif;
}

html, body{
	margin:0;
	padding:0;
	background-color:#f2f2f2;
	font-family:Montserrat;
	color:black;
	scrollbar-width: thin;	
}
*::-webkit-scrollbar {
  width: 9px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color:lightgrey;
}


a {
	text-decoration:none;
	font-weight:normal;
	color:grey;
}
a:hover{color:black;font-weight:bold;}

header{height:4em; padding:0; margin:0;}
article{margin:auto;min-height:85vh;}
footer{padding:1em 2em 2em 2em;background-color:white;}
ul{list-style:none; text-align:right;}

#menu_bar{background-color:#f2f2f2; margin:auto; vertical-align:middle; position:fixed; z-index:99; width:100%;}
#logo{display:inline-block;width:30vw;font-size:1.5em;margin:0.7em 0 0.7em 2em; font-family:Poppins;}
#logo a{font-weight:200;}
#logo a:hover {color:orange;}
#menu{text-align:right;width:60vw;float:right;display:inline-block;padding:0.5em 1em 0.5em 0;}
#menu li{display:inline-block; font-size:1em; padding-right:4em;}
#menu li:nth-child(1){display:none;}

/*______menu styling done______*/


#index_logo{margin:auto; font-size:3em; font-weight:100; font-family:Poppins; padding-top:20vh;}
#cover_page{min-height:65vh; width:90%;text-align:right;}
#line{text-align:right; margin:0em 0.6em auto auto; width:10em; height:0.1em;background-color:orange;border-radius:0.5em;}
#contact_line{text-align:right; margin:auto 0 auto auto; width:40%; height:0.3em;background-color:orange;border-radius:0.5em;}
.title{font-size:1em; padding:1em; text-align:.left; font-weight:bold;}
.logo_icon{height:10vh; padding:8em 2em; display:inline-block;}
.portfolio_full{width:100%; margin:auto;}
.portfolio_half{width:100%; margin:auto;}
.portfolio_half_img_wrapper{width:100%; height:55vh; overflow:hidden;}
.portfolio_full_img_wrapper{width:100%; height:55vh; overflow:hidden;}
.portfolio_img{width:100%; height:100%; object-fit:cover; transform:scale(1); position:relative; z-index:1; transition:transform 1s;}
.project_img_header{display:flex; flex-wrap:wrap; width:100%; margin-bottom:3em; object-fit:cover;}
.project_img{width:100%; margin-top:2em; object-fit:cover;}

.other-projects-wrapper{display:flex; margin-top:5vh; flex-wrap:wrap; flex-direction: column-reverse; align-items:center; justify-content:center;}
.other-projects-wrapper > a {width:100%; padding:auto; vertical-align:center;}
.other-projects-img{background-size:100% auto; background-position:center;}
.other-projects{color:white;padding:15vh 30%;background-color:rgba(0,0,0,0.5); transition:padding 0.7s ease-out;}
.other-projects:hover{background-color:rgba(0,0,0,0.7); padding:15vh 16%;}


.bold{font-weight:bold;}
li .active{color:black;font-weight:bold;}
.body_txt{padding:1em 4em 2em 4em;line-height:1.5em;}
h1{margin-left:5vw; font-weight:normal;color:#515152;}
h2{margin:-0.8em 4em 0.5em 3.5vw; font-weight:bold; font-size:1em;}
h3{margin:0 5em -1em 5em; font-weight:bold; font-size:1.2em; color:grey; border-bottom:3px solid orange;display:inline-block;}
h4{margin: 0em auto 4em 5vw; display:inline-block;font-weight:normal; font-size:0.8em; color:#515152;}
h5{margin-left:2em; font-weight:normal; font-size:2.5em; color:#515152;}
h6{margin-left:2em; font-weight:normal; margin-top:-0.1em; font-size:2.5em; color:#515152; display:inline-block;}
h7{color:white; font-size:2em; display:block;}


#about_container{width:100%; margin:auto;}
#contact_container{width:80%; margin:10vh auto; text-align:center;}
#profile{width:100%; padding:20vh 0 2vh 0; margin:auto auto 5em auto; background:black url(../images/profile.jpg) right no-repeat; background-size:auto 150%;}
#contact_header{ padding-top:5vh;}
#work_header{width:100%; padding:20vh 0 2vh 0; background:black;}
#project_header{width:100%; padding:20vh 0 2vh 0; background:black;}


.contact_content{width:100%; margin-bottom:5em; text-align:center; display:inline-block;transition: width 1s, font-size 1s;}
.social_media_icon{width:10%; margin:auto;}

.footer_contact{height:2em; width:40vw; display:inline-block; text-align:right; }
.footer_contact_icon{position:relative; top:0.5em; height:100%; padding:0 1em; transition:height 0.5s;}
.footer_contact_icon:hover{height:110%;}
.copyright{display:inline-block; width:40vw; margin-left:4em; font-size:0.8em;}




.cool-link::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: orange;
    transition: width .5s;
}

.cool-link:hover::after {
    width: 0;
}