/* Jost */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v19/92zatBhPNqw73oTd4jQmfxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v19/92zatBhPNqw73ord4jQmfxIC7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}*/

/* Jost italic */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v19/92zUtBhPNqw73oHt4D4hXRAy7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v19/92zUtBhPNqw73oHt7j4hXRAy7lRq.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}*/

/* Boldonse  */
@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/boldonse/v1/ZgNQjPxGPbbJUZemjB37jGDENYCP.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*@font-face {
  font-family: 'Boldonse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/boldonse/v1/ZgNQjPxGPbbJUZemjB31jGDENYCPgE4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}*/

/* Oliver */
@font-face {
	font-family: 'Oliver';
	src: url('/fonts/oliver-regular.ttf') format('truetype')
}

:root {
	color-scheme: light dark;

	--light-page-bg:#E8E8ED;
	--light-main-bg:#FDFDFD;
	--light-main-text:#302D3B;
	--light-preview-bg:#FDFDFDDD;
	--light-linkedin:#0A66C2;
	--light-whatsapp:#007F30;

	--dark-page-bg:#000;
	--dark-main-bg:#302D3B;
	--dark-main-text:#FDFDFD;
	--dark-preview-bg:#302D3BDD;
	--dark-linkedin:#FDFDFD;
	--dark-whatsapp:#FDFDFD;

	--timing-bounce: linear(0, 0.01, 0.03, 0.07, 0.13, 0.2, 0.28, 0.39, 0.5, 0.64, 0.79, 0.95, 0.94, 0.87, 0.82, 0.78, 0.76, 0.75, 0.76, 0.78, 0.83, 0.88, 0.95, 0.98, 0.95, 0.94, 0.94, 0.96, 0.99, 0.99, 0.99, 1 100% 100%);
}


/* ANIMATIONS */
@keyframes rotate {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

@keyframes scale-up {
	from { transform:scale(0); }
	to { transform:scale(1); }
}

@keyframes wiggle {
  0% {
    transform: rotate(7.5deg);
  }
  25% {
    transform: rotate(-11.25deg);
  }
  50% {
    transform: rotate(18.75deg);
  }
  75% {
    transform: rotate(-11.25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


html, body {
	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-family: "Jost", sans-serif;
	font-weight: normal;
	font-size:14px;
	text-align:center;

    margin:0; 
    padding:0; 
	background-color:light-dark(var(--light-page-bg), var(--dark-page-bg));
	cursor:url('/img/cursor-default.png'), auto;

	transition-property:background;
	transition-duration:600ms;
	transition-timing-function: ease-in-out;
}
body {
	padding:64px 0;
}

a {
	color:light-dark(black, white);
}
.clickable, a { 
	cursor:url('/img/cursor-pointer.png') 18 0, auto 
}
.previewable {
	cursor:url('/img/cursor-inspect.png') 18 0, auto 
}

button {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));;
	font-size:16px;
	font-weight:600;
	padding:6px 16px;

	background:light-dark(var(--light-main-text), var(--dark-main-text));
	border:0;

	transition-timing-function: var(--timing-bounce);

	transition-property:all;
	transition-duration:300ms;
}
button:hover {
	transform: translate(-4px, -4px);
	box-shadow:8px 8px 0 light-dark(var(--light-main-bg), var(--dark-main-bg));;
}


/* DARK MODE */
html.light {
  /* forces light color-scheme */
  color-scheme: light;
}
html.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

html.dark .dark-invert {
	filter:invert() grayscale(1);
}
html.dark .dark-white {
	filter:grayscale(1) brightness(3);
}

.darken {
	mix-blend-mode:darken;
}
html.dark .darken.dark-invert {
	mix-blend-mode:lighten;
}




/* RESPONSIVE CLASSES */
.mobile-only-block,
.mobile-only-inline,
.mobile-only-inline-block {
	display:none !important;
}
@media (max-width: 768px) {
	.mobile-only-inline-block {
		display:inline-block !important;
	}

	.mobile-hidden {
		display:none !important;
	}
}


/* LOADER */
.loader {
	position:relative;
	width:64px;
	height:64px;
	margin:0 auto;
	background:white;
	filter:brightness(0.66) blur(0.5px) contrast(999);

	overflow:hidden;
	mix-blend-mode: darken;
}

.loader:before {
	content:"";
	display:block;
	width:64px;
	height:64px;
	background:url("/img/loader.png");

	animation: rotate 2s linear infinite;
}

.loader:after {
	content:'';
	position:absolute;
	inset:-8px;
	background: radial-gradient(3px at center, black, white);
	background-size: 4px 4px;
	mix-blend-mode: screen;

	transform:rotate(33deg);
}

html.dark .loader {
	background:black;
	mix-blend-mode:lighten;
}

html.dark .loader::before {
	filter:invert();
}



/* TITLE BLOCK  */
h2.title-block {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));;
	font-family: "Boldonse", monospace;
	font-size:32px;
	letter-spacing:1px;

	display:inline-block;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
	margin:128px auto 64px auto;
	padding:12px 24px;
	box-shadow:16px 16px 0 light-dark(var(--light-main-bg), var(--dark-main-bg));;

	user-select: none;
}

@media (max-width:640px) {
	.about-me-block {
		flex-direction: column-reverse;
		margin:64px 16px;
	}

	.about-me-image {
		max-height:64px;
	}
}




/* CURSOR PLOP */
@keyframes cursor-plop {
	100% { background-position-y: -468px; }
}

.cursor-plop {
	position:absolute;
	width:36px;
	height:36px;

	background-image:url("/img/cursor-plop.png");
	background-position-y:0;
	z-index:20;

	pointer-events:none;

	animation:cursor-plop 390ms steps(13);
}
.cursor-plop.alternate {
	transform:rotate(45deg);
}


/* NAVIGATION */
nav {
	font-size:16px;
	text-align:center;
	background:light-dark(var(--light-page-bg), var(--dark-page-bg));
	position:fixed;
	top:0;
	width:100%;
	z-index:10;

	transition-property:background;
	transition-duration:600ms;
	transition-timing-function: ease-in-out;
}

nav > ul.site-nav {
	list-style:none;
	padding:0;
	margin:24px 20px 8px 20px;
}
nav > ul.site-nav > li {
	display:inline-block;
	position:relative;
}
nav > ul.site-nav > li.active {
	border-bottom:4px solid light-dark(var(--light-main-text), var(--dark-main-text));
}
nav > ul.site-nav > li > a {
	display:inline-block;
	padding:8px 32px;
	color:light-dark(var(--light-main-text), var(--dark-main-text));
	text-decoration:none;
	transition: transform 300ms var(--timing-bounce);
}
nav > ul.site-nav > li:hover > a {
	transform:translate(0, -8px);
}
nav > ul.site-nav > li > a > img {
	vertical-align:sub;
}
html.dark nav > ul.site-nav > li > a > img {
	filter:invert();
}

nav > ul.site-nav > li > ul {
	display:none;

	position:absolute;
	width:215px;
	top:38px;
	left:0;
	margin:0;
	padding:0;

	list-style:none;
	text-align:left;
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));;

	box-shadow:8px 8px 0 light-dark(var(--light-main-text), var(--dark-main-text));
}
nav > ul.site-nav > li:hover > ul {
	display:block;
}

nav > ul.site-nav > li > ul > li > a {
	display:inline-block;
	padding:12px 32px;

	color:light-dark(var(--light-main-text), var(--dark-main-text));
	text-decoration:none;
	transition: transform 300ms var(--timing-bounce);
}
nav > ul.site-nav > li > ul > li:hover > a {
	transform: translate(8px, 0);
}

@media (max-width: 768px) {
	nav {
		text-align:left;
	}
	nav > ul.site-nav {
		margin:8px 96px 8px 8px;
	}
	nav > ul.site-nav > li > a {
		padding:8px 16px 8px 16px;
	}
}

/*@media (max-width: 400px) {

	nav > ul.site-nav {
		margin:8px 96px 8px 8px;
	}
}*/



/* DARK/LIGHT MODE SWITCH */
.mode-switch {
	position:absolute;
	top:24px;
	right:24px;
	height:36px;

	list-style:none;
	margin:0;
	padding:0 4px;

	background:light-dark(var(--light-main-text), var(--dark-main-text));
	border-radius:20px;
}
.mode-switch li {
	display:inline-block;
	padding:8px 12px;
	border-radius:20px;
	margin:0;
}

.mode-switch li img {
	display:block;
	position:relative;
	z-index:5;
}

.mode-switch:after{
	content:'';
	position:absolute;
	left:0;
	width:52px;
	height:36px;
	border-radius:20px;

	background:light-dark(var(--light-main-bg), var(--dark-main-bg));;
	outline:4px solid light-dark(var(--light-main-text), var(--dark-main-text));

	transition:all 300ms ease-out;
}
html.dark .mode-switch:after {
	left:48px;
}

@media (max-width: 768px) {
	.mode-switch {
		top:10px;
		right:4px;
	}
}


/* TAGS */
.tags {
	list-style:none;
	margin:16px 0;
	padding:0;
}
.tags li {
	color:light-dark(var(--light-main-bg), var(--dark-main-bg));;
	font-size:12px;

	display:inline-block;
	height:17px;
	position:relative;
	padding:0 4px;
	margin:4px 4px;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
}
.tags li:before {
	content:"";

	position:absolute;
	left:-6px;
	width:6px;
	height:100%;
	background-image:url("/img/tag-left.svg");
	background-position:bottom left;
}
.tags li:after {
	content:"";

	position:absolute;
	right:-6px;
	width:6px;
	height:100%;
	background-image:url("/img/tag-right.svg");
	background-position:top right;
}

html.dark .tags li:before {
	background-image:url("/img/tag-left-darkmode.svg");
}
html.dark .tags li:after {
	background-image:url("/img/tag-right-darkmode.svg");
}



/* SCRENSHOTS */
.screenshot-container {
	position:relative;
	display:inline-block;
	min-height:64px;

	padding:0;
	background-color:light-dark(var(--light-main-text), var(--dark-main-text));
	background-image:url("/img/loader-dark.gif");
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-position:center center;

	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));
}
html.dark .screenshot-container {
	background-image:url("/img/loader.gif");
	background-blend-mode:darken;
}
.screenshot-container:before {
	content:'';
	display:block;

	width:296px;
	height:18px;
	background:url("/img/border-image-top.svg");

	position:absolute;
	top:-24px;
	left:16px;
}
.screenshot-container:after {
	content:'';
	display:block;

	width:296px;
	height:18px;
	background:url("/img/border-image-bottom.svg");

	position:absolute;
	bottom:-24px;
	right:16px;
}
.screenshot-container.no-border:before,
.screenshot-container.no-border:after {
	background:none;
}

html.dark .screenshot-container:before {
	background-image:url("/img/border-image-top-darkmode.svg");
}
html.dark .screenshot-container:after {
	background-image:url("/img/border-image-bottom-darkmode.svg");
}

.screenshot-container img {
	display:block;
	width:100%;
	box-sizing:border-box;
}



/* HOVERING LETTERS */
.sep-letter {
	position:relative;
	z-index:5;
	display:inline-block;
	transition-property:transform;
}

.sep-letter.float {
	transition-duration:240ms;
	transition-timing-function:ease-out;
}
.sep-letter.float:hover {
	transform: translate(0, -16px);
}
.sep-letter.float:has(+ .sep-letter:hover) {
	transform: translate(0, -8px);
}
.sep-letter.float:hover + .sep-letter {
	transform: translate(0, -4px);
}
.sep-letter.float.grow:hover {
	transform: translate(0, -16px) scale(1.25);
}

.sep-letter.wiggle {
	transition-duration:240ms;
	transition-timing-function: var(--timing-bounce);
}
.sep-letter.wiggle:nth-child(2n):hover {
	transform:rotate(30deg);
}
.sep-letter.wiggle:nth-child(2n+1):hover {
	transform:rotate(-30deg);
}
.sep-letter.wiggle.grow:nth-child(2n):hover {
	transform:scale(1.25) rotate(30deg) !important;
}
.sep-letter.wiggle.grow:nth-child(2n+1):hover {
	transform:scale(1.25) rotate(-30deg) !important;
}