html {
	scroll-behavior:					smooth;		/* Emiatt gördül finomat a nyílgomb a projekteknél */
}
body {
	background-color:					white;

	font-family:						'mycalibri';
	font-size:							22px;
	color:								#101010;

	margin:								0;
	padding:							10px max(20px, 4vw) 60px;
}
body.mainpage {
	background-repeat:					no-repeat;
	background-size:					min(1100px, 100vw) auto;
}

hr {
	background-color:					black;
	border:								none;
	height:								1px;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
textarea,
select {
	background-color:					white;
	border:								1px solid black;
	border-radius:						3px;
	padding:							3px 2px;
	box-sizing:							border-box;
}
input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=number]:disabled,
textarea:disabled,
select:disabled {
	background-color:					#F0F0F0;
	border-color:						#D0D0D0;
}
button[type=submit],
button[type=button],
input[type=submit],
input[type=button],
input[type=reset] {
	background-color:					#808080;
	border:								none;
	border-radius:						3px;
	color:								white;
	font-size:							100%;
	padding:							5px 15px;
	cursor:								pointer;
}
button[type=submit]:hover,
button[type=button]:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover {
	background-color:					black;
}
button[type=submit]:disabled,
button[type=button]:disabled,
input[type=submit]:disabled,
input[type=button]:disabled,
input[type=reset]:disabled {
	background-color:					#D0D0D0;
	cursor:								default;
}

div.clear {
	clear:								both;
}

#container {
	max-width:							1200px;
	margin:								auto;
}

#header {
	border-bottom:						1px solid rgba(0, 0, 0, 0.1);
	display:							flex;
	justify-content:					flex-start;
	align-items:						flex-end;
	gap:								0.25em;
}

#header .header-image-container img {
	border-radius:						10px;
	width:								max(10vw, 100px);
	margin-bottom:						7px;
	box-shadow:							0 0 0 10px white;
}
#header .header-title-container {
	flex-grow:							1;
	display:							flex;
	justify-content:					space-between;
	align-items:						flex-end;
	flex-wrap:							wrap;
}

#header h1 {
	background-color:					white;
	font-size:							200%;
	color:								#707070;
	margin:								0;
	padding:							0 0.5em 2px 0.25em;
	white-space:						nowrap;
}
#header a {
	text-decoration:					none;
}

#topbar {
	display:							flex;
	justify-content:					flex-end;
}

#topbar .menu {
	background-color:					white;
	list-style-type:					none;
	margin:								0;
	padding:							0 0 0 0.5em;
	display:							flex;
}

#topbar .submenu {
	background-color:					white;
	border:								1px solid #E8E8E8;
	list-style-type:					none;
	margin:								0;
	padding:							0;
	position:							absolute;
	z-index:							1;
	opacity:							0;
	overflow:							hidden;
	pointer-events:						none;
	box-sizing:							border-box;
	display:							none;

    -webkit-transition:					opacity 0.5s ease;
    -moz-transition:					opacity 0.5s ease;
    -o-transition:						opacity 0.5s ease;
    transition:							opacity 0.5s ease;
}
#topbar .submenu.opened {
	opacity:							1;
	pointer-events:						auto;
}

#topbar .menu li a {
	font-size:							120%;
	line-height:						170%;
	color:								#707070;
	text-decoration:					none;
	padding:							0.1em 0.5em;
	padding-left:						0.5em !important; /* Valamiért az életrajz almenüjénél eltűnik a bal margó, ezzel megmarad */
	white-space:						nowrap;
	display:							block;

    -webkit-transition:					color 0.35s ease;
    -moz-transition:					color 0.35s ease;
    -o-transition:						color 0.35s ease;
    transition:							color 0.35s ease;
}
#topbar .menu>li:first-child a {
	padding-left:						0;
}
#topbar .menu>li:last-child a {
	padding-right:						0;
}
#topbar .menu li a:hover,
#topbar .menu li a.current,
#topbar .submenu li a:hover,
#topbar .submenu li a.current {
	color:								black;
}
#topbar .menu li a.hidden,
#topbar .submenu li a.hidden {
	opacity:							0.75;
	text-decoration:					line-through;
}

#content .article.content,
#content .article.project {
	max-width:							1200px;
}

#content p {
	text-align:							justify;
}

#content hr {
	margin:								2em 0;
}

#content table tr td,
#content table tr th {
	vertical-align:						top;
}

#content h1, 
#content .h1 {
	font-size:							200% !important;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content table tr th {
	text-align:							left;
	color:								#808080;
	margin:								0;
	padding:							1em 0 0.5em;
}
#content table.cv tr td:first-child {
	padding-right:						1em;
}
#content table.contact tr td {
	font-size:							120%;
}

#content .article header {
	padding-bottom:						1em;
}
#content .article header h1 {
	font-size:							230%;
}
#content .article header h1,
#content .article header h2 {
	padding:							0 0 0.25em;
}

/* Projektek */
#content .project {
	margin:								0; /* A <figure> elemnek alapból van margója */
	padding:							3em 0;
	display:							flex;
	justify-content:					space-between;
	gap:								1.5em;
}
#content div.project {				/* Kép nélküli címsorok */
	padding:							0;
}
#content .project-description {
	flex-grow:							1;
}
#content .project-description.even {
	order:								2;
	text-align:							right;
}
#content .project-description h2 {
	color:								black;
	margin:								0;
	padding:							0;
	font-size:							150%;
	font-weight:						normal;
}
#content .project-description.even h2 {
	text-align:							right;
}
#content .project-description-text {
	max-width:							1000px;
	text-align:							justify;
}
#content .project-image-container.even {
	order:								1;
}
#content .project-nav-buttons {
	order:								3;
}
#content .project-image {
	border:								1px solid #E0E0E0;
	width:								30vw;
	padding:							10px;
	box-sizing:							border-box;
}
#content ul.image-data {
	list-style-type:					none;
	margin:								0;
	padding:							0;
	font-size:							120%;
	color:								#808080;
}

#content .project-button {
	background-color:					#808080;
	border-radius:						3px;
	width:								50px;
	height:								50px;
	line-height:						55px;
	text-align:							center;
	text-decoration:					none;
	color:								white;
	margin-bottom:						10px;
	display:							block;
}
#content b.project-button {
	background-color:					#E0E0E0;
	cursor:								default;
}

#preview {
	background-color:					white;
	border-top:							1px solid #D0D0D0;
	border-left:						1px solid #D0D0D0;
	border-top-left-radius:				10px;
	padding:							0.5em 0.5em 0.15em 0.5em;
	font-size:							80%;
	position:							fixed;
	right:								0;
	bottom:								0;
	z-index:							3;
}
#preview i {
	color:								#A0A0A0;
	cursor:								default;
}

/* Tablet nézet */
@media only screen and (max-width: 799px) {
	body {
		font-size:							20px;
	}
	body.mainpage {
		background-size:					800px auto;
		background-position:				right top;
	}
	#content .project-description h2 {
		font-size:							150%;
	}
	#content ul.image-data {
		font-size:							120%;
	}
	#content .project-image {
		width:								40vw;
	}
}

/* Mobil nézet */
@media only screen and (max-width: 599px) {
	body {
		font-size:							18px;
	}
	#topbar .submenu li a {
		padding-block:						0.25em;
	}
	#content .project-description h2 {
		font-size:							130%;
	}
	#content .project-image {
		width:								45vw;
	}
	#content .project-button {
		width:								30px;
		height:								33px;
		line-height:						30px;
		margin-bottom:						5px;
		font-size:							80%;
	}
}

/* Mobil nézet */
@media only screen and (max-width: 499px) {
	body {
		font-size:							14px;
	}
	#topbar .submenu li a {
		padding-block:						0.5em;
	}
	#content .project {
		flex-direction:						column;
		justify-content:					flex-start;
		gap:								1em;
	}
	#content .project-nav-buttons {
		display:							none;
	}
	#content .project-description.even,
	#content .project-description.even h2 {
		order:								1;
		text-align:							left;
	}
	#content .project-image-container {
		order:								2;
	}
	#content .project-image {
		width:								85vw;
	}
}

/* Kisebb mobil nézet */
@media only screen and (max-width: 399px) {
	body {
		font-size:							12px;
		word-wrap:							break-word;
	}
	body.mainpage {
		background-position:				right 70px;
	}
	#header .header-image-container {
		display:							none;
	}
	#topbar .menu {
		flex-wrap:							wrap;
		justify-content:					space-around;
	}
	#topbar .menu li a {
		font-size:							120%;
	}
}