@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css2?family=Anek+Malayalam:wdth,wght@100,300;100,319;112.5,504&display=swap');

*{
	box-sizing: border-box;
}
body{
	margin: 0;
	padding: 0;
	max-width: 100%;
	width: 100%;
	overflow-x: hidden;
	position: relative;
	display: block;
}

li{
	list-style: none;
}
img{
	max-width: 100%;
	height: auto;
	display: block;
}
h1, h2, h3 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-align: center;
	width: 100%;
	margin: auto;
	text-shadow: 3px 4.5px 3px rgba(0, 0, 0, .3);
}
h1{
	font-size: 3em;
	font-size: 5.5vw;
}
h2{
	font-size: 2.25em;
	font-size: 4vw;
	margin-bottom: 10%;
}
h3{
	font-size: 1.5em;
	font-size: 3vw;
	font-family: 'Anek Malayalam', sans-serif;
	font-weight: 300;
}
h4{
	font-size: 1.25em;
	font-size: 2vw;
	font-family: 'Anek Malayalam', sans-serif;
}

p {
	font-size: 1em;
	font-size: 1.75vw;
	font-family: 'Anek Malayalam', sans-serif;
	font-weight: 319;
	text-shadow: 1px 1.5px 1px rgba(0, 0, 0, .2);
	margin: 0 15% 0 15%;
}
a{
	text-decoration: none;
	color: inherit;
}

p a{
	color: blue;
}

p a:active, p a:visited {
	color: purple;
}

.flex-container{
	display: flex;
	padding: 0;
	flex-direction: row;
	list-style: none;
	overflow: none;
}
.section{
	margin: auto;
	width: 100%;
	padding: 100px;
	background-color: rgba(0, 0, 255, 0.03);
}

/*.section h2::before{
	content: "<";
}
.section h2::after{
	content: ">"
}*/
/*.section::after {
	content: "</>";
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-align: center;
	width: 100%;
	margin: auto;
}*/


#header{
	padding-top: 8px;
	flex-direction: row-reverse;
	background-color: rgba(0, 0, 255, 0.03);
	z-index: 1;
}
#header-contact{
	width: 100%;
	z-index: 2;
}

#header a{
	text-decoration: none;
	color: inherit;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	text-shadow: 0.5px 0.75px 0.5px rgba(0, 0, 0, .7);
}
#mobile-nav-bar{
	display: none;
}

#nav-bar{
	margin-right: 12px;
}
#nav-bar li a, #header-contact li a{
	display: block;
	padding: 16px;
	margin: 0;
	text-align: center;
}

#nav-bar li:hover, #header-contact li:hover, #side-bar span:hover, p a:hover{
	background-color: lightgrey;
}


#side-bar{
	height: 100%; /* Full-height: remove this if you want "auto" height */
	width: 100px; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	flex-direction: column-reverse;
}
#side-bar ul{
	padding-bottom: 50px;
}
#side-bar li{
	padding: 6px 8px 6px 16px;
	font-size: 1.75em;
}

#home{
	padding-top: 50px;
}
#portrait{
	display: block;
	padding: 10px 10px 10px 10px;
	margin: auto;
	max-width: 50%;
	filter:drop-shadow(3px 4.5px 3px rgba(0, 0, 0, .3));
}

#about{
	background-image: url("./textures/stone.png");
	background-repeat: repeat;
	color: white;
	box-shadow: 4px 6px 4px rgba(0, 0, 0, .4);
}

#contact{
	background-image: url("./textures/stone.png");
	background-repeat: repeat;
	color: white;
	box-shadow: 4px 6px 4px rgba(0, 0, 0, .4);
}

#contact a{
	color: white;
	text-decoration: underline;
}
#projects{
	/*background-image: url("./textures/blue-noise.png");
	background-repeat: repeat;*/
	border: solid 1px black;
	
}

#projects p{
	margin: 0;
	font-size: 1.25vw;
}

#projects h3{
	text-align: left;
}
.project-text-container p{
	text-shadow: none;
}
.slideshow-container {
	position: relative;
	width: 75%;
	margin: auto;
	background-color: white;
	box-shadow: 4px 6px 4px rgba(0, 0, 0, .4);
	padding: 2.5%;
}
.slide-content-container{
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 0;
}

.slide-img{
	align-self: center;
	flex-grow: 1
	max-width: 100%;
}
.project-text-container{
	width: 40%;
	flex-grow: 1;
	margin: 0 0 0 5%;
	font-size: 1.25vw;
}

.mySlides {
	display: none;
}

.tech-used{
	font-weight: bold;
}
.tech-used::before{
	content: "Technologies used: "
}
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	/*margin-top: -22px;*/
	padding: 16px;
	color: black;
	font-weight: bold;
	font-size: 18px;
	font-size: 2.5vw;
	transition: 0.6s ease;
	user-select: none;
	text-shadow: 4px 6px 4px rgba(0, 0, 0, .4);
}
.prev{
	border-radius: 0 3px 3px 0;
	left: -7.5%;
}
.next {
	right: -7.5%;
	border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
	color: white;
	background-color: rgba(0,0,0,0.8);
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #717171;
}
.fade {
	animation-name: fade;
	animation-duration: 2s;
}
@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}


#footer{
	padding-bottom: 5%;
}
#footer p{
	margin: auto;
	text-align: center;
}
#footer-icons{
	display: none;
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?pcx08v');
  src:  url('fonts/icomoon.eot?pcx08v#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pcx08v') format('truetype'),
    url('fonts/icomoon.woff?pcx08v') format('woff'),
    url('fonts/icomoon.svg?pcx08v#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  text-shadow: 3px 4.5px 3px rgba(0, 0, 0, .3);

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-phone:before {
  content: "\e942";
}
.icon-menu:before {
  content: "\e9bd";
}
.icon-codepen-logo:before {
  content: "\e900";
}
.icon-github_alt:before {
  content: "\e902";
}
.icon-linkedin:before {
  content: "\e903";
}
.icon-linkedin_alt:before {
  content: "\e904";
}
.icon-mail4:before {
  content: "\ea86";
}

@media (max-width: 600px) {
	h1{
		font-size: 7vw;
	}
	h2{
		font-size: 6vw;
	}
	h3{
		font-size: 5vw;
	}
	h4{
		font-size: 4vw;
	}

	p {
		margin: 0;
		font-size: 3.5vw;
	}
	.section{
		padding: 20% 3% 20% 3%;
	}

	#header{
		display: none;
	}
	#side-bar{
		display: none;
	}

	.mobile-nav, #mobile-nav-bar {
		display: block;
	  	overflow: hidden;
	  	background-color: rgba(0, 0, 255, 0.03);
	  	position: relative;
	  	min-height: 100px;
	}
	.mobile-nav{
		color: black;
	}

	.mobile-nav-expanded {
		background-image: url("./textures/stone.png");
		background-repeat: repeat;
		color: white;
	}

	#mobile-links {
	  display: none;
	}

	.mobile-nav a {
	  /*color: white;*/
	  padding: 14px 16px;
	  display: block;
	  font-size: 4vw;
	  font-family: 'M PLUS Rounded 1c', sans-serif;
	  text-align: center;
	}

	.mobile-nav a.icon {
		/*color: black;*/
	  	display: block;
	  	position: absolute;
	  	right: 0;
	  	top: 0;
	  	font-size: 8vw;
	}

	.mobile-nav a:hover {
	  color: black;
	}

	#home{
		padding-top: 20%;
	}
	#portrait{
		max-width: 100%;	
	}


	.slideshow-container {
		width: 90%;
	}
	.slide-content-container{
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.slide-img{
		align-self: center;
		width: 100%;
	}
	.project-text-container{
		width: inherit;
		margin: 0 0 0 5%;
	}
	#projects p{
		font-size: 3vw;
	}
	.tech-used{
		font-weight: bold;
	}
	.tech-used::before{
		content: "Technologies used: "
	}
	#footer{
		padding-left: 0;
		padding-right: 0;
	}

	#footer-icons{
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		font-size: 6vw;
		width: 80%;
		text-align: center;
		margin: auto;
		align-items: center;
		padding: 0 0 20% 0;

	}


}