* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.8rem;
}


html {
	scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
	display: none;
}
  
  /* Hide scrollbar for IE, Edge and Firefox */
body {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

:root {
	--main-bg-color: #233963; /*#192846*/
	--main-bg-color-light: #425883; /*#2d3c5a*/
	--main-height: 100vh;
	--left-margin: 20%;
	--soft-white: #ccc;
	--border-radius: 0.3rem;
	--darkest-blue: rgb(10, 10, 19);
}

nav {
	background-color: var(--main-bg-color);
	background-image: linear-gradient(to left, var(--darkest-blue), var(--main-bg-color));
	display: flex;
	justify-content: space-between;
	padding-right: 2rem;
	position: fixed;
	width: 100%;
	z-index: 20;
}

#logo {
	height: 3rem;
	width: 3rem;
	margin: 1rem 2rem;
	border-radius: 50%;
	background: #ccc;
	position: relative;
}

#logo img {
	height: 2.5rem;
	margin: 0.5rem 0 0 0.5rem;
	align-self: center;
}

li {
	text-decoration: none;
}

.light-theme {
	background: #fff;
	color: #555;
}

.dark-theme {
	background: var(--main-bg-color);
	background-image: linear-gradient(to left, var(--darkest-blue), var(--main-bg-color));
	color: var(--soft-white);
}

.hidden {
	display: none;
}

/*navigation*/

.pseudoUl {
	display: flex;
	align-items: center;
}

nav .pseudoUl a {
	display: inline-block;
	padding: 1rem;
}
nav .pseudoUl a:hover {
	transform: scale(1.1);
	background-color: var(--main-bg-color-light);
	border-radius: 4px;
	color: white;
}

nav a {
	text-decoration: none;
	color: var(--soft-white);
}

#hamburger-icon {
	display: none;
}

.hamburger {
	position: absolute;
	right: 2rem;
	top: 1rem;
	width: 3rem;
	text-align: center;
}

.hamburger i {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.8rem;
	cursor: pointer;
}

@media screen and (min-width: 800px) {
	.hamburger {
		display: none;
	}
}

@media (max-width: 800px) {
	nav {
		padding-right: 0;
		opacity: 0.95;
		border-bottom: 1px solid rgba(255, 255, 255, .6);
	}
	nav .pseudoUl {
		display: none;
		margin: auto;
		transform: translateX(-3rem);
	}
	nav .pseudoUl a {
		display: block;
		padding: 0.9rem 1rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}
	nav .pseudoUl a:last-of-type {
		border-bottom: none;
	}

	#hamburger-icon:checked + .pseudoUl {
		display: block;
		margin-top: 3rem;
		animation: unfold 0.6s ease-out;
	}

	@keyframes unfold {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}

/*Introduction*/

#introduction {
	min-height: var(--main-height);
	background-image: url('./img/bg-ttk-bme-june2019_2.webp');
	background-size: cover;
	background-attachment: fixed;
}

.firstPage {
	background-color: var(--main-bg-color);
	min-height: inherit;
	opacity: 0.4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-x: hidden;
	/*align-items: center;*/
}

.firstPage h1 {
	font-family: 'Marck Script', cursive;
	font-weight: 200;
	color: #fff;
	font-size: 2.5rem;
	margin: 0 0 1.5rem var(--left-margin);
	animation-name: moveInLeft;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
}

.firstPage h2 {
	font-weight: 200;
	margin-left: var(--left-margin);
	color: #f4f4f4;
	animation-name: moveInRight;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
	font-size: 1.17rem;
}

.callToAction {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	font-weight: 300;
	color: #fff;
	border: 1px solid #efefef;
	border-radius: var(--border-radius);
	background: transparent;
	text-decoration: none;
	margin-top: 1rem;
	margin-left: var(--left-margin);
	animation-name: moveInLeft;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
	box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.callToAction:hover {
	transform: translateY(2px);
}

@keyframes moveInLeft {
	0% {
		opacity: 0;
		transform: translateX(-80px);
	}
	80% {
		transform: translateX(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes moveInRight {
	0% {
		opacity: 0;
		transform: translateX(80px);
	}
	80% {
		transform: translateX(-10px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@media screen and (max-width: 600px) {
	.firstPage {
		align-items: center;
		position: relative;
	}
	.firstPage h1,
	.firstPage h2,
	.firstPage h3,
	.callToAction {
		margin-left: 0;
	}
	/* 	.certificatesLink {
		display: none;
	} */
	nav {
		justify-content: center;
		padding-right: 0;
	}

	.nameCard {
		position: absolute;
		top: 33%;
	}
}

/* Projects*/

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

#projects {
	/*margin: 0.5rem 2rem 1.5rem var(--left-margin);*/
	margin: 2rem var(--left-margin);
	padding-top: 2rem;
}

#projects h2 {
	margin: 5rem 0 3rem;
	font-weight: 400;
}

.projectCard {
	width: 20rem; /*260px; /*30%;*/
	margin: auto;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.laptop {
	height: 16rem;
	width: 20rem;
	border: 0.5rem solid #000;
	box-sizing: content-box;
	border-radius: var(--border-radius);
	position: relative;
	top: 0;
	overflow: hidden;
}

.mobile {
	height: 11.25rem;
	width: 6rem;
	box-sizing: content-box;
	border: 0.5rem solid #000;
	border-radius: var(--border-radius);
	border-left-width: 0.2rem;
	border-right-width: 0.2rem;
	display: inline-block;
	position: absolute;
	bottom: 7.5rem;
	right: 0.5rem;
	overflow: hidden;
	background: #333;
}

.projectCard img {
	width: 100%;
	height: inherit;
	position: center;
}

.projectCard p {
	padding: 2rem 0.5rem;
	text-align: left;
}

.projectCardInfo {
	background: rgba(0, 0, 0, 0.9);
	position: absolute;
	top: 0;
	height: 95%;
	width: 105%;
	color: var(--soft-white);
	font-size: 0.75rem;
	color: #fff;
	padding: 0.8rem;
	z-index: 10;
	border-radius: var(--border-radius);
	animation: grow 0.6s ease-out;
	transform-origin: top left;
}

@keyframes grow {
	0% {
		transform: scale(0);
		background: rgba(0, 0, 0, 0);
	}
	100% {
		transform: scale(1);
		background: rgba(0, 0, 0, 0.9);
	}
}

.projectCardInfo p {
	margin: 0;
	padding: 0.3rem;
}

.projectCardInfo .fa {
	text-decoration: none;
	color: #fff;
	padding: 0.5rem;
	font-size: 2rem;
}

.projectTitle {
	height: 6rem;
}

.projectTitle .fa {
	padding: 0 0.5rem;
	font-size: 1.5rem;
	color: #555;
}

@media screen and (max-width: 600px) {
	.projectCard {
		margin-top: 2.2rem;
		display: block;
		width: 90vw;
	}

	.projectCard .laptop {
		width: 90vw;
	}
}

/*aside*/

aside {
	position: fixed;
	left: 2rem;
	bottom: 2rem;
	height: 10rem;
	max-height: 25%;
	padding: 1rem;
	background: rgba(5, 13, 32, 0.8);
	background-image: linear-gradient(to top, var(--darkest-blue), rgba(5, 13, 32, 0.8));
	border-radius: var(--border-radius);
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

aside .fa {
	color: rgba(255, 255, 255, 0.896);
	font-size: 1.7rem;
	text-align: center;
	padding: 0.2rem 0;
}

/*bio*/
#bio {
	padding-top: 2rem;
}

#bio h2,
#bio p {
	/*margin: 1.5rem 2rem 1.5rem var(--left-margin);*/
	padding-top: 1.5rem;
}

#bio p::selection {
	background-color: var(--main-bg-color-light);
	color: var(--soft-white);
}

.aboutMe {
	margin: 2rem var(--left-margin);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.aboutText {
	padding-right: 3rem;
}

.aboutPic {
	margin: none;
}

.aboutPic img {
	border: 1px solid transparent;
	border-radius: 25% 0.3rem 50% 0.3rem;
	transform: translateY(3rem);
}

@media (max-width: 800px) {
	.aboutMe {
		flex-direction: column;
	}
	.aboutPic {
		margin: auto;
	}
	.aboutPic img {
		border-radius: 25% 0.3rem 50% 0.3rem;
		transform: translateY(0);
		margin-bottom: 2rem;
	}
	.aboutText {
		padding-right: 0;
	}
}

#bio a {
	text-decoration: none;
	color: var(--soft-white);
	padding-bottom: 2rem;
}

/*Certificates*/

#certificates {
	margin: 2rem var(--left-margin);
	padding-top: 2rem;
}

#certificates ul li {
	list-style-type: none;
}

.diploma {
	padding: 0.6rem 0.6rem 0.6rem 1rem;
	margin: 0.3rem 0;
	border: 1px solid #555;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.diploma a {
	text-decoration: none;
	color: var(--main-bg-color);
	background: #ddd;
	border-radius: var(--border-radius);
	padding: 0.3rem;
}

#certificates h3 {
	padding: 2rem 0 1.2rem;
}

/*Contact*/

#contactForm {
	margin: auto;
	text-align: center;
	position: relative;
	padding: 2rem;
}

#contactForm img {
	max-width: 80vw;
}
/* 
#contactForm input,
textarea {
	display: block;
	width: 100%;
	margin-bottom: -1px;
}

#contactForm h3 {
	padding: 1.1rem;
}

.submitButton {
	display: block;
	width: 100%;
	color: var(--main-bg-color);
	margin: 0.2rem 0 2rem;
} */

footer p {
	text-align: center;
}

.projectTitle a {
	text-decoration: none;
	color: #555;
}

.projectTitle a:hover {
	font-weight: 700;
}

footer {
	padding-bottom: 1.5rem;
	color: var(--soft-white);
	background-color: var(--main-bg-color);
}