:root {
		--pink: #8a5057;
		--beige: #e3d6c8;
		--textColor: #e3d6c8	;
		--bgColor: #171717;
		--basicFontSize: 40px;
	}
	/*------------------------------*/
	* {
		margin: 0;
		padding: 0px;
		box-sizing: border-box;
		transform: all .2s liniar;
	}
	::-webkit-scrollbar {
		width: 0px;
		background: transparent; /* make scrollbar transparent */
	}
	body {
		background: linear-gradient(#098578, #470a47, #360303, #360303);;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100%;
	}
	canvas {display: block; vertical-align: bottom; }
	html, body {margin: 0; height: 100%; user-select:none; overflow: auto;}
	li {list-style-type: none;}
	a:link {color: var(--textColor); text-decoration: none;}
	a:visited {color: var(--textColor); text-decoration: none;}
	a:hover {color: var(--secColor); text-decoration: none;}
	a.header {color: var(--secColor);}
	a {
		color: var(--textColor);
		font-size: var(--basicFontSize);
		font-family: 'UbuntuCondensed';
	}
	/*------------------------------*/
	.c-h {/* about container */
		position: relative;
		text-align:left;
		border: 30px solid var(--pink);
		background: var(--pink);
		z-index: 1;
		box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.15); /* doppelte Schatten für stärkeren Effekt */
		border-radius: 8px;
		user-select: text;
	}
	.c-h2 {/* about container */
		position: relative;
		text-align:left;
		border: 30px solid var(--pink);
		background: var(--pink);
		z-index: 1;
		box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.15); /* doppelte Schatten für stärkeren Effekt */
		border-radius: 8px;
	}
	.c-v {
		position: relative;
		min-width: 20px;
		line-height: 20px;
		writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		text-align: center;
		transform: rotate(180deg);
		z-index: 2;
		user-select: text;
	}
	.c-h a {
		pointer-events: none;
		user-select: text;
	}
	.c-h2 a {
	}
	.c-v a {
		pointer-events: none;
	}
    .container {
        display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
    }
	/*------------------------------*/
	@font-face {
		font-family:'UbuntuCondensed';
		font-style: normal;
		font-weight: normal;
		src: local('UbuntuCondensed Regular'), local('UbuntuCondensed-Regular'),
		url(../fonts/ubuntu-condensed-v16-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext-regular.woff2) format('woff2'),

	}
	.neon-text {
	font-family: 'UbuntuCondensed';
	color: #ffffff; /* Neon-Rot */
	font-weight: 100;
	text-shadow: 
	  0 0 5px #FF073A,
	  0 0 10px #FF073A,
	  0 0 20px #FF073A,
	  0 0 40px #F00,
	  0 0 80px #F00,
	  0 0 100px #F00,
	  0 0 150px #F00;
	}
	@media (max-width: 768px) {
		body {
		  font-size: 16px;
		  font-family: Arial, sans-serif;
		}
		.container {
		  width: 90%;
		  margin: 0 auto;
		}
		.nav {
		  display: none;
		}
		.nav-mobile {
		  display: block;
		}
	  }
	  /*------------------------------*/
	.c_gallery { /* gallery container */
		width: 90%;
		margin: auto;
		padding: 30px 0px;
		position: relative;
		overflow: hidden;
		grid-auto-rows: 235px;
		 
	}
	.c_gallery > a {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2em;
		overflow: hidden;
	}
	.c_gallery > a > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		box-shadow: 0px 0px 10px #000;
	}
	.c_gallery a img:hover {
		transform:scale(1.4);
		transition: transform 1s ease-in-out;
	}
	.c_gallery {
		display: grid;
		grid-gap: 5px;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		grid-auto-rows: 235px;
		grid-auto-flow: dense;
	}
	.horizontal {grid-column: span 2;}
	.vertical {grid-row: span 2;}
	.big {grid-column: span 2;grid-row: span 2;}
	/*------------------------------*/