/* ========================================================================== */
/* Portfolio design variables                                                */
/* ========================================================================== */

:root {
	/* Fonts and typography */
	--main-font-family: "Inter";
	--main-font-size: 100%;
	--main-font-weight: 300;
	--main-letter-spacing: normal;
	--main-line-height: 160%;
	--headline-font-family: "Syne";
	--headline-font-weight: 700;
	--headline-letter-spacing: normal;
	--quote-font-family: "RockSalt";
	--quote-font-weight: 400;
	--quote-letter-spacing: normal;
	--handwriting-font-family: "Syne";
	--handwriting-font-weight: 400;
	--handwriting-letter-spacing: normal;
	--buttons-letter-spacing: 0.1em;

	/* Core colors */
	--main-html-background-color: #eaeaea;
	--main-background-color: #ffffff;
	--main-color: #232323;
	--main-color-soft-contrast: #010101;
	--main-color-hard-contrast: #ffffff;
	--main-link-color-hover: #656565;
	--iso-blue: #3e88d1;
	--iso-darkblue: #001a6d;
	--effect-color: goldenrod;
	--effect-color-meta: darkgrey;
	--effect-color-dependent-background-color: #eeeeee;
	--effect-color-dependent-color: #333333;
	--schedule-row-background-color: hsl(0, 0%, 90%);
	--schedule-row-background-color-second: hsl(0, 0%, 80%);

	/* Layout and surfaces */
	--main-gap: 2rem;
	--main-border-radius: 0;
	--navi-height: 51px;
	--main-content-container-margin: 0 auto var(--main-gap) auto;
	--main-content-container-width: 1000px;
	--main-content-width: 100%;
	--main-content-article-padding: var(--main-gap);
	--sidebar-padding: 0 var(--main-gap) var(--main-gap) var(--main-gap);
	--article-preview-padding: var(--main-gap) var(--main-gap) 0 var(--main-gap);
	--back-padding: var(--main-gap) 0;
	--cell-size: 40px;
	--gallery-grid-item-width: 300px;
	--table-border-color: darkgrey;
	--table-border-width: 2px;
	--table-padding-left-right: 0.6em;
	--table-padding-top-bottom: 0.4em;

	/* Banner */
	--banner-background-image: none;
	--banner-padding-bottom: 16%;
	--banner-cutout-color: #ffffff;
	--banner-cutout-background-color: transparent;
	--banner-cutout-full-background-color: transparent;
	--banner-mix-blend-mode: normal;
	--banner-text: "";
	--banner-font: "Syne";
	--banner-font-size: 8vh;
	--banner-font-weight: 700;
	--banner-text-align: center;
	--banner-text-transform: none;
	--banner-line-height: 1.1;
	--banner-weather-local: none;

	/* Stories and content blocks */
	--story-background-color: #e8e8e8;
	--story-color: #141414;
	--story-color-link-hover: #888888;
	--lined-paper-background-color: #ffffff;
	--lined-paper-color: #141414;
	--lined-paper-line-color: #b8c8d8;
	--post-it-background-color: #fff59d;
	--post-it-color: #141414;
	--category-background-color: #ffffff;
	--category-link-color: #141414;
	--category-link-color-hover: #888888;
	--chess-square-light: #f0d9b5;
	--chess-square-dark: #b58863;
	--chess-square-highlighted: #f6f669;
	--list-counter-type: decimal;

	/* Navigation */
	--css-menu-background-color: #ffffff;
	--css-menu-background-opacity: 1;
	--css-menu-link-color: #141414;
	--css-menu-link-hover: #888888;
	--css-menu-link-active: #3e88d1;
	--css-menu-dropdown-background-color: #ffffff;
	--css-menu-scroll-background-color: #ffffff;
	--css-menu-scroll-background-opacity: 1;
	--css-menu-scroll-link-color: #141414;
	--css-menu-scroll-link-color-hover: #888888;
	--css-menu-scroll-link-color-active: #3e88d1;
	--css-menu-scroll-dropdown-background-color: #ffffff;

	/* Buttons */
	--button-animation-time: 0.75s;
	--button-border-width: 0;
	--button-transparent: transparent;
	--button-background-color: transparent;
	--button-background-color-hover: var(--main-link-color-hover);
	--button-color: var(--main-color);
	--button-color-hover: var(--main-link-color-hover);
	--button-food-background-color: #ffffff;
	--button-food-background-color-hover: #141414;
	--button-food-color: #141414;
	--button-food-color-hover: #ffffff;
	--button-more-background-color: #ffffff;
	--button-more-background-color-hover: #141414;
	--button-more-color: #141414;
	--button-more-color-hover: #ffffff;
	--button-more-padding: 1em 1.5em;
	--button-offtopic-background-color: #ffffff;
	--button-offtopic-background-color-hover: #141414;
	--button-offtopic-color: #141414;
	--button-offtopic-color-hover: #ffffff;
	--button-add-color: #006400;
	--button-add-color-hover: #00b400;
	--button-add-background-color-hover: #bebefe;
	--button-cancel-color: #780000;
	--button-cancel-color-hover: #b40000;
	--button-cancel-background-color-hover: #ffbebe;
	--button-save-color: #000064;
	--button-save-color-hover: #0000b4;
	--button-save-background-color-hover: #bebeff;
	--button-not-shown-color-hover: #ffffff;
	--button-iso-color: #5c3880;
	--button-iso-color-hover: #e7cfff;
	--button-editor-popover-background-color: #141414;
	--button-editor-popover-color: #ededed;

	/* Button animation and circular progress */
	--button-animation-content: "";
	--button-animation-bottom: 0;
	--button-animation-height: 1.5px;
	--button-animation-height-hover: 1.5px;
	--button-animation-left: 0;
	--button-animation-top: auto;
	--button-animation-transform: none;
	--button-animation-width: 0;
	--button-animation-width-hover: 100%;
	--button-circular-content: "";
	--button-circular-frame-color: transparent;
	--button-circular-frame-content: none;
	--button-circular-frame-offset: 0px;
	--button-circular-frame-progress: 0deg;
	--button-circular-frame-progress-hover: 359.5deg;
	--button-circular-frame-time: 0.5s;
	--button-circular-frame-width: 1px;

	/* Image and hover effects */
	--hover-fx-back: rgba(0, 0, 0, .5);
	--hover-fx-zoom: scale(1);
	--hover-fx-zoom-default: scale(1);
	--hover-fx-zoom-effect: scale(1);
	--image-fx-filter: none;
	--image-fx-overlay-background: none;
	--image-fx-overlay-background-color: transparent;
	--image-fx-overlay-mix: normal;

	/* Shadows */
	--box-shadow-box-shadow: none;
	--box-shadow-border-radius: var(--main-border-radius);
	--box-shadow-left: 0;
	--box-shadow-right: 0;

	/* Icons and utility values */
	--iso-logo: "\\f21a";
	--iso-logo-full: "\\f21b";
	--animation-duration: 2s;
	--add-light: rgb(190, 255, 190);
	--add-dark: rgb(0, 100, 0);
	--cancel-light: rgb(255, 190, 190);
	--cancel-dark: rgb(120, 0, 0);
	--save-light: rgb(190, 190, 255);
	--save-dark: rgb(0, 0, 100);
}

/* General */
.main-content-container {
	padding: 0 10px;
}

.portfolio-container-padding {
	padding: calc(var(--main-gap) * 1.5) 0;
}

/* Breadcrumb */
.portfolio-breadcrumb {
	padding: 0.5rem 0;
}

/* Navi */
.portfolio-navi {
	align-items: center;
	display: grid;
	font-size: 1.5rem;
	gap: var(--main-gap);
	justify-content: center;
	position: relative;
	grid-template-areas:
		"about main genres";
}

.portfolio-navi-element {
	position: relative;
}

.portfolio-navi-element.navi-about {
	grid-area: about;
}

.portfolio-navi-element.navi-genres {
	grid-area: genres;
}

.portfolio-navi-element.navi-main {
	grid-area: main;
	font-size: 2rem;
	font-weight: 900;
	line-height: 150%;
	text-align: center;
}

@media only screen and (max-width: 450px) {
	.portfolio-navi {
		grid-template-areas:
			"main" "genres" "about";
		grid-auto-flow: row;
		gap: 0.75rem
	}

	.portfolio-navi .portfolio-navi-element {
		text-align: center;
	}

	.portfolio-navi .portfolio-navi-element.portfolio-navi-element.navi-main {
		line-height: 1;
	}
}

/* Slider */
.portfolio-carousel.simple-grid .grid-item {
	width: calc(100vw - 10px * 2) !important;
	max-width: 980px;
}

.portfolio-carousel .hover-fx-chico::after {
	height: calc(100% - 4em);
	width: calc(100% - 4em);
}

.portfolio-carousel .hover-fx-padding {
	padding: 4em;
}

.portfolio-carousel .simple-grid-scrolling-wrapper {
	padding: 0;
}

.portfolio-carousel.simple-grid .btn.btn-carousel-previous,
.portfolio-carousel.simple-grid .btn.btn-carousel-next {
	border: 0;
	border-radius: 0;
	color: #ffffff;
	height: 100%;
	top: 0;
	width: 6rem;
}

.portfolio-carousel.simple-grid .btn.btn-carousel-previous {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.85), transparent);
	left: 0;
	transform: translateX(125%);
}

.portfolio-carousel.simple-grid .btn.btn-carousel-next {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.85), transparent);
	right: 0;
	transform: translateX(-125%);
}

.portfolio-carousel.simple-grid:hover .btn.btn-carousel-previous {
	transform: translateX(0);
}

	.portfolio-carousel.simple-grid .btn.btn-carousel-previous,
	.portfolio-carousel.simple-grid .btn.btn-carousel-next {
		transform: translateX(0);
		opacity: 1;
	}

.portfolio-carousel.simple-grid:hover .btn.btn-carousel-next {
	transform: translateX(0);
}

.portfolio-carousel.simple-grid .btn.btn-carousel-previous>i,
.portfolio-carousel.simple-grid .btn.btn-carousel-next>i {
	color: #ffffff;
}

.portfolio-carousel.simple-grid .btn.btn-carousel-previous:hover,
.portfolio-carousel.simple-grid .btn.btn-carousel-next:hover,
.portfolio-carousel.simple-grid .btn.btn-carousel-previous::after,
.portfolio-carousel.simple-grid .btn.btn-carousel-next::after {
	background-color: transparent;
}

/* About */
.portfolio-about {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 3fr 5fr;
	max-width: 100%;
	position: relative;
	width: 100%;
}

.portfolio-about-image-container {
	position: relative;
}

.portfolio-about>.portfolio-about-image-container:nth-of-type(2) img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.portfolio-circular-portrait {
	margin: 1em 0;
}

.form-mail {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
}

.form-mail .button-wrapper-container {
	margin-top: 0;
}

/* Instagram */
.portfolio-headline-instagram{
	text-align: center;
}
.portfolio-instagram{
	max-width: 300px;
}

/* Footer */
.portfolio-footer {
	text-align: center;
	line-height: 250%;
}

@media only screen and (max-width: 768px) {
	.portfolio-about {
		display: block;
	}
}