:root {
	--space-s: clamp(1.25rem, 0.8rem + 1.7143vw, 2rem);
	--space-m: clamp(1.25rem, 0.5rem + 2.8571vw, 2.5rem);
	--space-l: clamp(1.5rem, 0.6rem + 3.4286vw, 3rem);
	--space-xl: clamp(2rem, -0.4rem + 9.1429vw, 6rem);
}

* {
	box-sizing: inherit;
}
html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	color: #333;

	background-image: radial-gradient(#80808080 1px,transparent 0);
	background-size: 1.5em 1.5em;
	background-repeat: repeat;
}

h2, h3, .projects-year {
	margin: 0;
	line-height: 1.25;
	font-weight: 900;
}

h2, .projects-year {
	font-size: clamp(2rem, 1.4rem + 2.2857vw, 3rem);

	text-transform: uppercase;
    font-weight: 900;
	letter-spacing: -.0875em;
	color: #fff;
    -webkit-text-stroke: .075em black;
	paint-order: stroke fill;

}
h2 span, .projects-year span {
	position: relative;
	z-index: 0;
}
h2 span::after, .projects-year span::after {
	content: attr(data-text);
	position: absolute;
	left: 0.1em;
	top: 0.1em;
	z-index: -1;
	color: #000;
	-webkit-text-stroke: 0;
}

h3 {
	font-size: clamp(1.75rem, 1.05rem + 1.7143vw, 2.25rem);
	color: #000;
}
p {
	margin: 0;
}
p:not(:first-child), .line {
	margin-top: 1em;
}

ul {
	margin-top: 0;
	padding-left: 1em;
}

button, a, label {
	-webkit-tap-highlight-color: transparent;
}

.name {
	font-size: calc(clamp(2rem, 1.4rem + 2.2857vw, 3rem) * 1.5);
	line-height: 1;
	display: flex;
	gap: 0 1.5rem;
	flex-wrap: wrap;
}

.centered {
	text-align: center;
	justify-content: center;
}

.lightCyan {
	color: #bafeff;
}

.icon {
	width: 1em;
	height: 1em;
}

img {
	display: block;
	max-width: 100%;
}

.margin-s:not(:first-child) {
	margin-top: var(--space-s);
}
.margin-m:not(:first-child) {
	margin-top: var(--space-m);
}
.margin-l:not(:first-child) {
	margin-top: var(--space-l);
}
.margin-xl:not(:first-child) {
	margin-top: var(--space-xl);
}

.bigger {
	font-size: 1.25em;
}

.lang-sk .text-en,
.lang-en .text-sk {
	display: none;
}

/* section */
.section {
	font-size: clamp(0.875rem, 0.8rem + 0.2857vw, 1rem);
	padding: var(--space-xl) max(50% - 35rem, clamp(1rem, -0.2rem + 4.5714vw, 3rem));
	position: relative;
}
.section.divider-diagonal {
	padding-bottom: calc(var(--space-xl) * 2);
}
.section-implementations::before {
	content: '';
	position: absolute;
	inset: calc(var(--space-xl) * -1) 0 0 0;
	clip-path: polygon(0% var(--space-xl), 100% 0%, 100% calc(100% - var(--space-xl)), 0% 100%);
	z-index: -1;
	background-color: #E0F0FA;
}
.section-contact {
	box-shadow: inset 0 .75em 0 #fff6;
	background-color: color-mix(in srgb, #bafeff 50%, #fff);
}

/* .section-about {
	min-height: 60vh;
	min-height: 60mvh;
	place-content: center;
} */
.section-about::before {
	content: '';
	position: absolute;
	inset: 0;
	--b: color-mix(in srgb, #bafeff 30%, #fff);
	background-color: var(--b);
	background-image: radial-gradient(ellipse at top center, #bafeff, var(--b) 75%);
	background-size: min(200%, 120rem) min(100%, 40vh);
	background-repeat: no-repeat;
	background-position: top center;
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--space-xl)), 0% 100%);
	z-index: -1;
}

/* dividers */
.divider-horizontal::after, .divider-diagonal::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background-image: repeating-linear-gradient(to right, #000, #000 1.25rem, transparent 1.25rem, transparent 2rem);
	z-index: 1;
}
.divider-horizontal::after {
	height: 2px;
	top: calc(100% - 1px);
}
.divider-diagonal::after {
	height: calc(var(--space-xl) + 2px);
	clip-path: polygon(0 calc(100% - 2px), 100% 0, 100% 2px, 0 100%);
	top: calc(100% - var(--space-xl) - 1px);
}

/* nav / links */
.nav-link, a:not([class]) {
	color: #000;
	text-decoration: none;
	background-image: linear-gradient(#FEDB01 0 0);
	font-weight: 700;
	background-size: 100% .1875em;
	background-repeat: no-repeat;
	background-position: bottom;
	transition: background-size .1s ease-in-out;
}
.nav-link {
	font: inherit;
	font-weight: 700;
	border: none;
	background-color: transparent;
	padding: unset;
	display: block;
	font-size: 1.25em;
	cursor: pointer;
	text-transform: uppercase;
}
.nav-link:hover, a:not([class]):hover {
	background-size: 100% 100%;
}
.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .375em 1.25em;
}

/* project switches */
.pSwitch {
	display: none;
}

.projects-switches {
	display: flex;
	flex-wrap: wrap;
	gap: .75em 1em;
	margin-bottom: var(--space-l);
}

.projects-switch-label {
	cursor: pointer;
}
.projects-switch-label span {
	display: block;
	border: 2px solid #000;
	color: #000;
	background-color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	padding: .25em 1.25em;
	box-shadow: 0.125em 0.125em #000, inset .125em .125em #fff6;
	transition: box-shadow .1s linear, background-color .1s, color .1s, transform .1s linear;
}
.projects-switch-label:hover span {
	box-shadow: 0.0625em 0.0625em #000, inset .125em .125em #fff6;
	transform: translate(.0625em, .0625em);
	background-color: #eee;
}

.pSwitch-all:checked ~ .projects-switches .projects-switch-all span,
.pSwitch-vue:checked ~ .projects-switches .projects-switch-vue span,
.pSwitch-pwa:checked ~ .projects-switches .projects-switch-pwa span,
.pSwitch-svelte:checked ~ .projects-switches .projects-switch-svelte span,
.pSwitch-laravel:checked ~ .projects-switches .projects-switch-laravel span {
	background-color: #000;
	color: #fff;
	box-shadow: 0 0 #000, inset .125em .125em #fff6;
	transform: translate(.125em, .125em);
}

.pSwitch-vue:checked ~ .projects:not([data-stack*="vue"]), .pSwitch-vue:checked ~ .projects .project:not([data-stack*="vue"]),
.pSwitch-svelte:checked ~ .projects:not([data-stack*="svelte"]), .pSwitch-svelte:checked ~ .projects .project:not([data-stack*="svelte"]),
.pSwitch-pwa:checked ~ .projects:not([data-stack*="pwa"]), .pSwitch-pwa:checked ~ .projects .project:not([data-stack*="pwa"]),
.pSwitch-laravel:checked ~ .projects:not([data-stack*="laravel"]), .pSwitch-laravel:checked ~ .projects .project:not([data-stack*="laravel"]) {
	display: none;
}

/* projects */
.projects:last-child {
	margin-bottom: calc(var(--space-m) * -1);
}

.projects-year {
	display: flex;
	align-items: center;
	margin-bottom: var(--space-s);
	background-image: repeating-linear-gradient(to right, #000, #000 1.25rem, transparent 1.25rem, transparent 2rem);
	background-size: 100% 2px;
	background-repeat: repeat-x;
	background-position: center;
	line-height: 1;
}
.projects-year span {
	background-color: #fff;
	box-shadow: -.25em 0 #fff;
}

.project-newsbuilder {
	--c: color-mix(in srgb, #0088dd, #00d6c2);
}
.project-ftools {
	--c: #109BDE;
}
.project-simpleui {
	--c: #3c81f0;
}
.project-vp {
	--c: color-mix(in srgb, #5045e2, #0586d1);
}
.project-s1 {
	--c: #f4ac39;
}
.project-s1config {
	--c: #3c21c4;
}
.project-webradio {
	--c: #7D31BF;
}
.project-wedr {
	--c: #56bbf2;
}
.project-switch {
	--c: #6a6ce7;
}
.project-addone {
	--c: #3cddc2;
}
.project-classlist {
	--c: #1c75d4;
}
.project-webtools {
	--c: #2570e9;
}
.project-zoomin {
	--c: #098fd3;
}
.project-skladnik {
	--c: #ee4223;
}
.project-videodb {
	--c: #169aca;
}
.project-docfiller {
	--c: #019e81;
}
.project-abooks {
	--c: #ec0c6d;
}
.project-webmonitor {
	--c: color-mix(in srgb, #46b603, #008f6b);
}
.project-loudscore {
	--c: #222;
}

.project {
	padding: var(--space-s);
	border: 2px solid var(--c, #222);
	background-color: color-mix(in srgb, var(--c, #222) 5%, #fff);
	box-shadow: .25em .25em 0 0 color-mix(in srgb, var(--c, #222) 25%, transparent);
	isolation: isolate;
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-m);
}

.project h3 {
	color: var(--c, #000);
	line-height: 1;
}

.section-header-cont {
	display: flex;
	align-items: center;
	gap: .875em;
}
.section-header {
	display: flex;
	flex-direction: column;
	gap: .3125rem 1rem;
}

.project-logo {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 2.625rem;
	background-clip: content-box;
	box-shadow: .125rem .125rem 0 0 color-mix(in srgb, var(--b, var(--c, #222)) 25%, transparent);

	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: var(--c, #222);
}

.project-logo-feeed, .project-logo-classlist {
	background-color: #fff;
}
.project-logo-zoomin {
	background-color: #075a83;
	--b: #075a83;
}
.project-logo-wedr {
	background-color: #000;
	--b: #102028cc;
}
.project-logo-webradio {
	background-image: linear-gradient(to bottom right, #D043D0, #2A1FAD);
}
.project-logo-vp {
	background-image: linear-gradient(-15deg, #5045e2, #0586d1);
}
.project-logo-s1config {
	background: linear-gradient(45deg, rgb(60, 33, 196), rgb(47, 26, 153));
	--b: rgb(47, 26, 153);
}
.project-logo-newsbuilder {
	background: linear-gradient(45deg, #0088dd, #00d6c2);
}
.project-logo-webmonitor {
	background-image: linear-gradient(to bottom right, #46b603, #008f6b);
}
.project-logo-loudscore {
	background-image: linear-gradient(to bottom, #444, #000);
}
.project-logo-vp .icon {
	transform: rotate(330deg);
}

@media screen and (min-width: 40rem) {
	.projects {
		padding-left: calc(2.5rem + var(--space-m));
		position: relative;
	}
	.projects-year {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		writing-mode: vertical-lr;
		text-orientation: mixed;
		background-image: repeating-linear-gradient(to bottom, #000, #000 1.25rem, transparent 1.25rem, transparent 2rem);
		background-size: 2px 100%;
		background-repeat: repeat-y;
	}
	.projects-year span {
		position: sticky;
		top: 1.25rem;
		box-shadow: 0 -.125em 0 #fff, 0 .125em 0 #fff;
		padding-bottom: 0.125em;
	}

	.section-header {
		flex: 1;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}
	.project h3 {
		line-height: 1.25;
	}
	.project-logo {
		width: 3rem;
		height: 3rem;
		font-size: 2.25rem;
	}
}

/* tags */
.tags {
	display: flex;
	gap: .5em;
}
.tag {
	--b: color-mix(in srgb, var(--a, #222) 75%, #000);
	display: block;
	border: 1px solid var(--b);
	color: var(--b);
	font-size: .75rem;
	padding: .125rem .75rem;
	background-color: #fff;
	font-weight: 700;
	box-shadow: .125rem .125rem color-mix(in srgb, currentColor 25%, transparent);
}
.tag::before {
	content: var(--t);
	display: inline-block;
	vertical-align: top;
}
.tag-css, .progress-css {
	--t: 'CSS';
	--a: #2965f1;
}
.tag-html, .progress-html {
	--t: 'HTML';
	--a: #f06529;
}
.tag-php, .progress-php {
	--t: 'PHP';
	--a: #8993be;
}
.tag-js, .progress-js {
	--t: 'JS';
	--a: #f0db4f;
}
.tag-jquery, .progress-jquery {
	--t: 'jQuery';
	--a: #0e76bb;
}
.tag-smarty, .progress-smarty {
	--t: 'Smarty';
	--a: #d4a627;
}
.tag-laravel, .progress-laravel, .progress-blade {
	--t: 'Laravel';
	--a: #F9322C;
}
.tag-vue, .progress-vue {
	--t: 'Vue';
	--a: #41B883;
}
.tag-pocketbase, .progress-pocketbase {
	--t: 'PocketBase';
	--a: var(--text);
}
.tag-svelte, .progress-svelte {
	--t: 'Svelte';
	--a: #ff3e00;
}
.tag-pwa, .progress-pwa {
	--t: 'PWA';
	--a: #0397FF;
}
.tag-scss, .progress-scss {
	--t: 'SCSS';
	--a: #CD6799;
}
.tag-solidjs {
	--t: "SolidJS";
	--a: #5992CD;
}
.tag-node {
	--t: "Node.js";
	--a: #5FA04E;
}

/* buttons / shadows */
p.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1em;
	margin-bottom: 0.25em;
}

.button, .implemented-item-title {
	background-color: #FEDB01;
	background-color: var(--b1);
	transition: box-shadow .1s linear, background-position .1s ease-in-out, background-color .1s, transform .1s linear;
	--b1: #FEDB01;
	--b2: color-mix(in srgb, #FEDB01 35%, #fff);
}

.button, .implemented-item-img, .implemented-item-title {
	border: 2px solid #000;
	box-shadow: .25em .25em 0 #000, inset var(--s, .3125em) var(--s, .3125em) 0 var(--b2, transparent);
}
.button:hover, .implemented-item:hover .implemented-item-img, .implemented-item:hover .implemented-item-title {
	background-color: var(--b2);
	box-shadow: .125em .125em #000, inset var(--s, .3125em) var(--s, .3125em) 0 var(--b1, transparent);
	transform: translate(.125em, .125em);
}
.button:hover, .implemented-item:hover .implemented-item-title {
	background-position: bottom;
}

.button {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	gap: .5em;
	text-decoration: none;
	color: #000;
	padding: .625em 1.25em;
	position: relative;
}
.button::before {
	content: '';
	z-index: -2;
	position: absolute;
	inset: -2px;
	transition: transform .1s linear;
}

.button:hover::before {
	transform: translate(-.125em, -.125em);
}
.button .icon {
	font-size: 1.5em;
}

/* implemented items grid */
.implemented-items {
	--h: 2530;
	display: grid;
	gap: var(--space-m);
	margin-inline: clamp(-15rem,(50% - 44vw), 0px);
	grid-template-columns: repeat(auto-fill, minmax(clamp(20%,(60rem - 100.01%)* 1000, 42%), 1fr));
}

.implemented-item {
	display: block;
	color: #000;
	text-decoration: none;
	font-weight: 700;
}

.implemented-item:nth-child(2) { --h: 3567; }
.implemented-item:nth-child(3) { --h: 3109; }
.implemented-item:nth-child(4) { --h: 1841; }

.implemented-item-img {
	display: block;
	aspect-ratio: 1;
	background-size: cover;
	margin-bottom: 0.375em;
	transition: background-position calc(var(--h)/800 * .5s) linear, transform .1s linear, box-shadow .1s linear;
}
.implemented-item:hover .implemented-item-img {
	background-position: bottom;
}

.implemented-item-title {
	display: inline-block;
	padding: .25em 1em;
	--s: .1875em;
}

/* skills */
.skill {
	max-width: 20.75rem;
	margin: 0 auto .5em;
	position: relative;
	display: flex;
	align-items: center;
	color: #000;
}
.progress {
	-moz-appearance:none;
	appearance: none;

	height: 1.75em;
	border: 2px solid #000;
	box-shadow: .125em .125em #0004;
	width: 100%;
	margin: auto;
	position: relative;
	background: #f6f6f6;
}
.progress::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset .1875em .1875em #fff8;
	background-image: repeating-linear-gradient(to right, transparent, transparent calc(100% - 2px), #0001 calc(100% - 2px), #0001);
	background-size: calc(20% + 0.4px) 100%;
}
.progress::-webkit-progress-bar {
	background: #f6f6f6;
}
.progress::-webkit-progress-value {
	background: color-mix(in srgb, #bafeff 95%, #000);
}
.progress::-moz-progress-bar {
	background: color-mix(in srgb, #bafeff 95%, #000);
}
.progress-label {
	font-weight: 900;
	left: 1em;
	position: absolute;
	font-size: 0.875em;
}