:root {
	--colors-transparent: transparent;
	--colors-black: #000;
	--colors-white: #fff;
	--colors-gray-50: #d1cdd6;
	--colors-gray-100: #c6c1cc;
	--colors-gray-200: #b2aeb8;
	--colors-gray-300: #9e9aa3;
	--colors-gray-400: #8b888f;
	--colors-gray-500: #525053;
	--colors-gray-600: #363537;
	--colors-gray-700: #222222;
	--colors-gray-800: #191919;
	--colors-gray-900: #131313;
	--colors-red-50: #fff5f5;
	--colors-red-100: #fed7d7;
	--colors-red-200: #feb2b2;
	--colors-red-300: #fc8181;
	--colors-red-400: #f56565;
	--colors-red-500: #e53e3e;
	--colors-red-600: #c53030;
	--colors-red-700: #9b2c2c;
	--colors-red-800: #822727;
	--colors-red-900: #63171b;
	--colors-orange-50: #fffaf0;
	--colors-orange-100: #feebc8;
	--colors-orange-200: #fbd38d;
	--colors-orange-300: #f6ad55;
	--colors-orange-400: #ed8936;
	--colors-orange-500: #dd6b20;
	--colors-orange-600: #c05621;
	--colors-orange-700: #9c4221;
	--colors-orange-800: #7b341e;
	--colors-orange-900: #652b19;
	--colors-yellow-50: #fffff0;
	--colors-yellow-100: #fefcbf;
	--colors-yellow-200: #faf089;
	--colors-yellow-300: #f6e05e;
	--colors-yellow-400: #ecc94b;
	--colors-yellow-500: #d69e2e;
	--colors-yellow-600: #b7791f;
	--colors-yellow-700: #975a16;
	--colors-yellow-800: #744210;
	--colors-yellow-900: #5f370e;
	--colors-green-50: #f0fff4;
	--colors-green-100: #c6f6d5;
	--colors-green-200: #9ae6b4;
	--colors-green-300: #68d391;
	--colors-green-400: #48bb78;
	--colors-green-500: #38a169;
	--colors-green-600: #2f855a;
	--colors-green-700: #276749;
	--colors-green-800: #22543d;
	--colors-green-900: #1c4532;
	--colors-teal-50: #e6fffa;
	--colors-teal-100: #b2f5ea;
	--colors-teal-200: #81e6d9;
	--colors-teal-300: #4fd1c5;
	--colors-teal-400: #38b2ac;
	--colors-teal-500: #319795;
	--colors-teal-600: #2c7a7b;
	--colors-teal-700: #285e61;
	--colors-teal-800: #234e52;
	--colors-teal-900: #1d4044;
	--colors-blue-50: #ebf8ff;
	--colors-blue-100: #bee3f8;
	--colors-blue-200: #90cdf4;
	--colors-blue-300: #63b3ed;
	--colors-blue-400: #4299e1;
	--colors-blue-500: #3182ce;
	--colors-blue-600: #2b6cb0;
	--colors-blue-700: #2c5282;
	--colors-blue-800: #2a4365;
	--colors-blue-900: #1a365d;
	--colors-cyan-50: #edfdfd;
	--colors-cyan-100: #c4f1f9;
	--colors-cyan-200: #9decf9;
	--colors-cyan-300: #76e4f7;
	--colors-cyan-400: #0bc5ea;
	--colors-cyan-500: #00b5d8;
	--colors-cyan-600: #00a3c4;
	--colors-cyan-700: #0987a0;
	--colors-cyan-800: #086f83;
	--colors-cyan-900: #065666;
	--colors-purple-50: #faf5ff;
	--colors-purple-100: #e9d8fd;
	--colors-purple-200: #d6bcfa;
	--colors-purple-300: #b794f4;
	--colors-purple-400: #9f7aea;
	--colors-purple-500: #805ad5;
	--colors-purple-600: #6b46c1;
	--colors-purple-700: #553c9a;
	--colors-purple-800: #44337a;
	--colors-purple-900: #322659;
	--colors-pink-50: #fff5f7;
	--colors-pink-100: #fed7e2;
	--colors-pink-200: #fbb6ce;
	--colors-pink-300: #f687b3;
	--colors-pink-400: #ed64a6;
	--colors-pink-500: #d53f8c;
	--colors-pink-600: #b83280;
	--colors-pink-700: #97266d;
	--colors-pink-800: #702459;
	--colors-pink-900: #521b41;
	--borders-none: 0;
	--borders-1px: 1px solid;
	--borders-2px: 2px solid;
	--borders-4px: 4px solid;
	--borders-8px: 8px solid;
	--fonts-heading: Roboto Mono;
	--fonts-body: Roboto Mono;
	--fonts-mono:
		SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;
	--fonts-code: Roboto Mono;
	--transition-property-common:
		background-color, border-color, color, fill, stroke, opacity,
		box-shadow, transform;
	--transition-property-colors:
		background-color, border-color, color, fill, stroke;
	--transition-property-dimensions: width, height;
	--transition-property-position: left, right, top, bottom;
	--transition-property-background:
		background-color, background-image, background-position;
	--transition-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--transition-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-duration-ultra-fast: 50ms;
	--transition-duration-faster: 100ms;
	--transition-duration-fast: 150ms;
	--transition-duration-normal: 200ms;
	--transition-duration-slow: 300ms;
	--transition-duration-slower: 400ms;
	--transition-duration-ultra-slow: 500ms;
}

@font-face {
	font-family: "unifont";
	src: url("unifont.ttf");
}

/* ****************** GENERAL SETTINGS **************** */
body {
	display: flex;
	flex-flow: column wrap;
	margin: 0;
	min-height: 100vh;
	font-family: "unifont";
	background-color: var(--colors-gray-800);
	color: var(--colors-white);
}

input,
select,
textarea,
button {
	margin: 2px;
	vertical-align: middle;
	padding: 7px;
	background-color: var(--colors-gray-800);
	border-radius: 7px;
	border: var(--borders-2px);
	border-color: var(--colors-teal-700);
	color: var(--foreground);
	transition: var(--transition-easing-ease-in-out);
	transition-duration: var(--transition-duration-normal);
	transition-delay: var(--transition-duration-fast);
	transition-property: all;
}

dialog {
	padding: 12px;
	background-color: var(--colors-gray-800);
	border-radius: 4px;
	border: var(--borders-2px);
	border-color: var(--colors-orange-700);
	color: var(--foreground);
}

input:hover,
select:hover,
button:hover {
	cursor: pointer;
	border-color: var(--colors-teal-400);
	background-color: var(--colors-gray-500);
	transform: scale(1.03, 1.03);
}

textarea {
	width: 30vw;
	height: 10vh;
}

a {
	text-decoration: none;
	color: var(--colors-gray-50);
}
a:visited {
	text-decoration: none;
	color: var(--colors-gray-50);
}
a:active {
	text-decoration: none;
	color: var(--colors-gray-50);
}

h1 {
	/* główny tytuł strony */
	font-family: var(--fonts-mono);
	color: var(--colors-cyan-700);
	text-align: center;
	font-size: 2rem;
}
h2 {
	/* subtitle  */
	font-size: 1.6rem;
	color: var(--colors-cyan-700);
	text-align: center;
}
h3 {
	/* error msg */
	font-size: 1.4rem;
	color: var(--colors-red-400);
	margin: auto;
}
h4 {
	/* podtytuły w panelach */
	font-size: 1.2rem;
	padding: 4px;
	margin: 0;
}

.panel {
	/* tile like for organization */
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	flex-grow: 0;

	margin: 10px;
	padding: 10px;

	border-radius: 8px;
	border: var(--borders-2px);
	border-color: var(--colors-orange-700);

	transition-duration: var(--transition-duration-normal);
	transition-delay: var(--transition-duration-fast);
	transition-property: all;
}
.panel:hover,
.tile:hover {
	border-color: var(--colors-orange-400);
}

.tile {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	flex-grow: 0;

	margin: 10px;
	padding: 10px;
	border-radius: 8px;
	border: var(--borders-2px);
	border-color: var(--colors-orange-700);

	transition-duration: var(--transition-duration-normal);
	transition-delay: var(--transition-duration-fast);
	transition-property: all;
}

.proj-title {
	color: var(--colors-purple-400);
	border-radius: 8px;
	padding: 4px;
	background-color: var(--colors-orange-900);
}

.panel .p {
	/* pole tekstu */
	padding: 8px;
	border-radius: 8px;
	background-color: var(--colors-gray-600);
	display: flex;
	flex-flow: column wrap;
	margin-top: 2px;
	margin-bottom: 2px;
}

/* ******************MENU SETTINGS **************** */
.menu {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
}

.menu .menu-item {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;

	margin-left: 5%;
	margin-right: 5%;
}

.menu ol {
	order: 1;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	padding: 0;
}

.menu ol li {
	cursor: pointer;

	top: 0;
	position: relative;

	padding: 10px;
	margin: 5px;

	border-radius: 8px;
	border: var(--borders-2px);
	border-color: var(--colors-green-500);

	transition: var(--transition-easing-ease-in-out);
	transition-duration: var(--transition-duration-normal);
	transition-delay: var(--transition-duration-fast);
	transition-property: var(--transition-property-position);
}
.menu ol li:hover {
	top: -5px;
	border-color: var(--colors-green-300);
}

/* ****************** MAIN CONTENT SETTINGS **************** */
.content {
	display: flex;
	flex-grow: 1;
	margin-left: 12vw;
	flex-flow: column wrap;
	margin-right: 12vw;
	transition-duration: var(--transition-duration-normal);
	transition-delay: var(--transition-duration-fast);
	transition-property: all;
}

/* ****************** CV SETTINGS **************** */
.panel .p .entry {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	margin: 8px;
}
.header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.panel li > i, /* for accent in CV's skills section  */
.accent {
	color: var(--colors-blue-400);
}

/* ****************** FOOTER SETTINGS **************** */
.footer {
	min-height: 1vh;
	flex-grow: 0;
	flex-shrink: 0;
	background-color: var(--colors-gray-700);
	padding: 1vh;
	text-align: center;
}

#profileImage {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}

@media (max-width: 1200px) {
	.menu {
		flex-flow: column wrap;
		align-items: center;
	}
	#profileImage {
		display: flex;
		flex-flow: column wrap;
		align-content: center;
	}
	.menu ol {
		order: 1;
	}
	.menu h3 {
		order: 2;
	}
	.menu h1 {
		order: 3;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 10px;
	}
	.menu ol li:hover {
		top: 0;
	}
}