/* Color variable */
:root {
	--color: #0765EE;
}

html, body {
	color: #000;
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-family: "Roboto Condensed", sans-serif;
	background: #333;
}

/* Main elements */
h1, h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }
h1, h2, h3, h4, h5, h6 { margin: 1rem 0; }

a, a:link, a:visited {
	color: #0765EE;
	color: var(--color);
	transition: color 500ms;
	text-decoration: none;
}

a:hover, a:active {
	color: #333;
	transition: color 500ms;
}

.preload * { 
	transition: none !important;
	animation-duration: 0.001s !important; 
}

/* Header & Header nav */
@keyframes shakethat {
	0% {transform: translateX(0);}
	5% {transform: rotate(5deg);}
	10% {transform: translateX(-5px)}
	15% {transform: rotate(-5deg)}
	20% {transform: translateX(5px)}
	25% {transform: rotate(5deg)}
	30% {transform: translateX(-5px)}
	35% {transform: rotate(-5deg)}
	40% {transform: translateX(5px)}
	45% {transform: rotate(5deg)}
	50% {transform: translateX(-5px)}
	55% {transform: rotate(-5deg)}
	60% {transform: translateX(5px)}
	65% {transform: rotate(5deg)}
	70% {transform: translateX(-5px)}
	75% {transform: rotate(-5deg)}
	80% {transform: translateX(5px)}
	85% {transform: rotate(5deg)}
	90% {transform: translateX(-5px)}
	95% {transform: rotate(-5deg)}
	100% {transform: translateX(0);}
}

header {
	color: #FFF;
	background: #333;
}

header a img:hover {
	animation-name: shakethat;
	animation-duration: 1s;
}

header h1 {
	font-size: 2rem;
}

header h2 {
	color: #CCC;
}

header nav {
	margin: 1rem 0;
	padding-left: 0;
	padding-right: 0;
}

header nav a {
	margin: 0 0.5rem;
}

header nav a:first-of-type {
	margin-left: 0;
}

header nav a:last-of-type {
	margin-right: 0;
}

header nav a, header nav a:link, header nav a:visited {
	color: #FFF;
}

header nav a:hover, header nav a:active {
	color: #0765EE;
	color: var(--color);
}

/* Main navigation */
body > nav {
	color: #FFF;
	background: #0765EE;
	background: var(--color);
	font-size: 1.17rem;
}

body > nav a {
	font-weight: bold;
	display: inline-block;
}

body > nav a, body > nav a:link, body > nav a:visited {
	color: #FFF;
	transition: color 500ms, background 500ms;
}

body > nav a:hover, body > nav a:active, body > nav a#active {
	color: #0765EE;
	color: var(--color);
	background: #FFF;
	transition: color 500ms, background 500ms;
}

/* Main part */
main {
	background: #FFF;
}

article h1::first-letter, article h2::first-letter {
	color: #0765EE;
	color: var(--color);
}

article h1, article h2 {
	margin: 1rem 0 0;
}

article p {
	margin: 0 0 1rem;
}

/* Footer */
footer {
	color: #FFF;
	background: #0765EE;
	background: var(--color);
}

footer a, footer a:link, footer a:visited {
	color: #CCC;
}

footer a:hover, footer a:active {
	color: #333;
}

/* Elements */
#transcription {
	font-family: Consolas,monaco,monospace; 
}

#photo {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 1rem auto;
}

#htb {
	display: block;
	float: right;
	margin: 0 0 0.5rem 1rem;
}

#ceh {
	width: 4rem;
	display: block;
	float: right;
	margin: 0 0 0.5rem 1rem;
}

#review {
	margin: 1rem 0;
	font-style: italic;
	padding: 1rem 0 1rem 3rem;
	border-left: 0.5rem solid;
	border-color: #0765EE;
	border-color: var(--color);
	position: relative;
}

#review::before{
  position: absolute;
  left: 0.5rem;
  top: -0.5rem;
  content: "\201C";
  color: #0765EE;
  color: var(--color);
  font-size: 4rem;
}

#review blockquote {
	margin: 0;
}

#review figcaption {
	font-style: normal;
}

.project-header {
	position: relative;
}

.project-header h2 {
	display: inline-block;
	margin: 0;
}

.project-links {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

.project-links a {
	display: inline-block;
	font-size: 1.5rem;
}

/* Formularz */
article form#inputform input {
	display: block;
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
	margin: 0 0 1rem;
    padding: 1rem;
    color: #333;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #CCC;
	transition: 500ms border-color;
	outline: none;
}

article form#inputform input:focus, article form#inputform input:hover {
	border-color: #0765EE;
	border-color: var(--color);
	transition: 500ms border-color;
}

article form#inputform button {
	width: 100%;
	margin: 0;
    padding: 1rem;
	color: #FFF;
    font-size: 1rem;
	background: #0765EE;
	background: var(--color);
	border: none;
	cursor: pointer;
	transition: color 500ms, background 500ms;
}

article form#inputform button:hover {
	color: #0765EE;
	color: var(--color);
	background: #333;
	transition: color 500ms, background 500ms;
}

/* Menu developerskie */
#developer {
	padding: 1rem;
	position: fixed;
	color: #FFF;
	background: rgba(50, 50, 50, 0.80);
	font-weight: bold;
	z-index: 10;
}

#developer a {
	color: #FFF;
}

#developer a:hover {
	color: #0765EE !important;
	color: var(--color) !important;
}

#developer ul {
    margin: 0;
    padding: 0 0 0 1rem;
}

/* Mobile fixes */
@media (max-width: 767px) {
	html, body {
		font-size: 20px;
	}
	
	.project-links {
		position: static;
		transform: none;
	}
}

/* Tablet fixes */
@media (min-width: 768px) and (max-width: 1024px) {
	.project-links {
		position: static;
		transform: none;
	}
}

/* Darkmode */
.darkmode {
	color: #CCC;
}

.darkmode main {
	background: #333;
}

.darkmode article h1, .darkmode article h2 {
	color: #FFF;
}

.darkmode article form#inputform input {
	background: #333;
	color: #CCC;
}

.darkmode main a:hover, .darkmode main a:active {
	color: #FFF
}

.darkmode main strong {
	color: #FFF;
}