@font-face { font-display:swap; font-family: Poppins; font-weight: 400; src: url('../fonts/Poppins/poppins-v20-latin-regular.woff2'); } 
@font-face { font-display:swap; font-family: Poppins; font-weight: 600; src: url('../fonts/Poppins/poppins-v20-latin-600.woff2');}
@font-face { font-display:swap; font-family: Poppins; font-weight: 700; src: url('../fonts/Poppins/poppins-v20-latin-700.woff2');}

:root {
	--primary-color: rgb(192, 0, 192);
	--secondary-color: rgb(0,192,192);
	--third-color:rgb(0,33,76);
	--fourth-color:rgb(0,0,0);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	/* box-sizing: border-box; */
	margin: 0;
	padding: 0;
	font: inherit;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

html {
	height: 100%;
}
body {
	font-family: 'Poppins', sans-serif;
	color: #000000;
	width: 100%;
	min-height:100%;
	background-color:white;
	margin:auto;
	text-rendering: optimizeSpeed;
	/* overflow:hidden; */
	/* -webkit-overflow-scrolling: touch; */

	display: flex;
	flex-direction: column;
}
h1 {
	font-size: 2rem;
	font-weight: 700;
	padding-top: 1.5rem;
	padding-bottom: .5rem;
}
h2 {
	font-size: 1.5rem;
	font-weight: 600;
	padding-top: 1rem;
	padding-bottom: .2rem;
}
h3 {
	font-size: 1rem;
	font-weight: 600;
	padding-top: 1rem;
	padding-bottom: .2rem;
}
h4 {
	font-size: .9rem;
	font-weight: 600;
	padding-top: .3rem;
	padding-bottom: .1rem;
}
h5 {
	font-size: 1.7rem;
	text-align:center;
	padding-bottom: 10px;
	padding-top: 10px
}
p  {
	font-size:.9rem;
	font-weight: 400;
	/* margin:10px 0 5px; */
	/* text-align:justify; */
	/* hyphens:Auto; */
}
ul {
	padding-left: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size:.9rem;
	font-weight: 400;
}
video {
	width: 100%;
}

/* Toogle */
.toggle {
	position: fixed;
	top: 0px;
	right:0px;
	width: 45px;
	height: 45px;
	background: url(../images/icons/burger.png);
	background-size: 28px;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 20;
	cursor: pointer;
	/* -webkit-backdrop-filter: invert(100%); */
	/* backdrop-filter: invert(100%); */
}
.toggle.active {
	background: #ffffff url(../images/icons/cross.png);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
}
.navigation {
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 15;
	display: flex;
	justify-content: center;
	align-items: center;
	/* text-align: center; */
}

.navigation.active {
	left:0;
}

.navigation ul {
	padding: 0;
	position: relative;
	text-align: center;
	/* align-items: center; */
	justify-content: center;
}

.navigation ul li {
	/* display: list-item; */
	position: relative;
	list-style: none;
	/* text-align: center; */
}

.navigation ul li a {
	font-size: 2.5rem;
	color:#000000;
	text-decoration: none;
	font-weight: 400;
}

.navigation ul li a:hover {
	color: var(--primary-color);
}

.navigation .social-bar {
	position: absolute;
	bottom: 20px;
	width: 100px;
	display:flex;
	align-items: center;	
	justify-content: center;
	/* align-items:center; */
}

.navigation .social-bar a img{
	/* transform: scale(2); */
	max-height: 50px;
}

.social-bar {
	justify-content: center;
	display: flex;
	align-items: center;
}

.social-bar a img {
	padding: 10px;
	max-height: 50px;
	/* object-fit: contain; */

}

#social-icons {
	width: auto;
	height:40px;
}

#playdate-project {
	/* background-color:#ffc833; */
	/* background-color:#6c00ff; */
	background-color:#b1aea7;
	/* color:#6c00ff; */
}

#playdate-icon {
	padding-top:20px;
	height:80px;
	width: auto;
}

.copyright-year {
	position: absolute;
	bottom: 30px;
	left: 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	/* justify-content: center; */
	/* align-items: center; */
}
.sidelink {
	display: flex;
	text-align: right;
	flex-wrap: wrap;
	position: absolute;
	bottom: 20px;
	right: 20px;
	max-width: 300px;
	align-items: center;
	justify-content: right;
}

.imprint {
	position: relative;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	padding-left: 10px;

}

.imprint-content {
	position: relative;
	/* top:0px; */
	/* left: 0px; */
	padding: 10px;
	padding-left: 16vw;
	padding-right: 16vw;
	/* padding-top: 10px; */
}

/* Top bar */
.logo {
	position: fixed;
	top: 6px;
	left: 10px;
	font-size: 1.5rem;
	font-weight: 600;
	z-index: 20;
	/* background-color: #00000000; */
	/* -webkit-backdrop-filter: invert(100%);
	backdrop-filter: invert(100%);
	width: 100%; */
}
.logo a:hover {
	text-decoration: none;
	color: var(--primary-color);
}

.invertbar {
	position: fixed;
	-webkit-mask-image: linear-gradient(black,black,transparent);
	mask: linear-gradient(black,black,transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: linear-gradient(white,white 20%,transparent);
	top:0px;
	left:0px;
	width: 100%;
	height:100px;
	z-index: 10;
	/* background-image: linear-gradient(#ffffff88 75%,#ffffff00); */
	/* background-color: #ffffff00; */
	/* -webkit-backdrop-filter: invert(100%); */
	/* backdrop-filter: blur(4px) invert(100%); */

	/* backdrop-filter: invert(100%); */
}

.invertbar-playdate {
	position: fixed;
	-webkit-mask-image: linear-gradient(black,black,transparent);
	mask: linear-gradient(black,black,transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: linear-gradient(#b1aea7,#b1aea7 20%,transparent);
	top:0px;
	left:0px;
	width: 100%;
	height:100px;
	z-index: 10;
	/* background-image: linear-gradient(#ffffff88 75%,#ffffff00); */
	/* background-color: #ffffff00; */
	/* -webkit-backdrop-filter: invert(100%); */
	/* backdrop-filter: blur(4px) invert(100%); */

	/* backdrop-filter: invert(100%); */
}

.back {
	font-family: 'Poppins', sans-serif;
	position: fixed;
	top: 30px;
	left: 10px;
	font-size: 2.3rem;
	font-weight: 700;
	/* background-size: 28px; */
	z-index: 20;
	cursor: pointer;
}

.back a:hover {
	text-decoration: none;
	color: var(--primary-color);
}

section {
	width:auto;
	max-width:100%;
	/* max-height:100vh; */
	/* padding-right:20%; */
	/* overflow-x: hidden; */
	/* overflow-y: scroll; */
	/* margin: auto; */
	padding:0px;
	padding-top:80px;
	/* display: flex; */
	/* flex-direction: column; */
	/* flex-grow: 1; */
}

.textbox {
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	width: 100%;
	height:100%;
	padding: 10px;

	/* border-style: solid; */
	/* border-color: #000000; */
	/* border-width: 4px; */
}

.textbox a:link    {color:var(--fourth-color); background-color:transparent; text-decoration:underline}
.textbox a:hover   {color:var(--primary-color); background-color:transparent; text-decoration:none}
/* a:active  {color:black; background-color:transparent; text-decoration:none} */

.salut {
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	width: 100%;
	height:100%;
}

.salut p {
	font-size: 1.3rem;
}
.salut h1 {
	font-size: 3rem;
}

.salut p a {
	font-size: 1.3rem;
	text-decoration: underline;
	/* color: var(--primary-color); */
}

iframe {
	position:absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height: 100%;
	border:none;
	/* padding:56.25% 0 0 0; */
}

/* grid portfolio layout */
.portfolio {
	padding-left: 16vw;
	padding-right: 16vw;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	/* text-align: center; */
	/* flex-wrap:wrap; */
	/* justify-content: center; */
	/* padding: 10px; */
	/* column-gap: 10px; */
	/* row-gap: 5px; */
	/* padding: 10px; */
}
/* 
.portfolio > * {
	flex: 1 1 500px;
} */

.portfolio .item {
	position: relative;
	padding: 12px;
	display: flex;
}

.portfolio .item img{
	/* max-height:50vh; */
	justify-content: center;
}

.portfolio .item .action {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff77;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: .2s;
}

.portfolio .item:hover .action {
	opacity: 1;
}

.portfolio .item .action a {
	display: inline-block;
	color: #000000;
	text-decoration: none;
	text-align: center;
	font-size:2rem;
	font-weight: 700;
	
	
	/* padding: 5px 15px; */
}
.portfolio .item .action a:hover {
	color: var(--primary-color);
}

/* flexbox portfolio layout */
.portfolioflex {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}

.portfolioflex > * {
	/* flex: 1 1 auto; */
	flex: 1 1 600px;
}

.portfolioflex .item {
	position: relative;
	padding:10px;
}

.portfolioflex .item img{
	
}

.portfolioflex .item .action {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff77;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: .4s;
}

.portfolioflex .item:hover .action {
	opacity: 1;
}

.portfolioflex .item .action a {
	display: inline-block;
	color: #000000;
	text-decoration: none;
	font-size:2rem;
	font-weight: 700;
	
	/* padding: 5px 15px; */
}

.project-wrapper {
	/* display: flex; */
	/* flex-direction: column; */
	padding-left: 16vw;
	padding-right: 16vw;
}

/* project page */
.project {
	/* display: flex; */
	/* flex-wrap:wrap; */

	/* padding-left: 16vw; */
	/* padding-right: 16vw; */
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;

	/* justify-content: center; */
	/* margin-top: auto; */
}

.project > * {
	/* flex: 1 1 auto; */
	flex: 1 1 600px;
}

.inverse {
	color:#ffffff;
	background-color: #000000;
	padding-top: 2vw;
	padding-bottom: 2vw;
}

.full-bleed {
	box-shadow: 0 0 0 100vmax #000000;
	clip-path: inset(0 -100vmax);
}

.project .item {
	position: relative;
	padding: 10px;
	display: flex;
	flex-direction: column;
	/* max-height: 40vh; */
	/* object-fit: contain; */
}

.project .item img{
	width:100%;
	justify-content: center;
	/* max-height:100vh; */
	/* object-fit:contain; */
}

.project .item .camputer{
	/* background: url(../images/projects/camputer/camputerReal_02.gif); */
	/* background-size: 100%; */
	/* background-position: center; */
	/* background-repeat: no-repeat; */
	position:relative;
}

.project .item .camputer .under {
	position: relative;
}

.project .item .camputer .over {
	position: absolute;
	width: 100%;
	top:0;
	left:0;
}

.project .item .camputer .over img:hover{
	opacity: 0;
}

.interactive {
	width:100%;
	position: relative;
	padding:56.25% 10px 10px 10px;
	/* padding: 10px; */
}

.tv{
	display: flex;
}

.tv a {
	padding-right: 10px;
}

#yt-consent-placeholder {
	border: 10px solid #000;
	background-color: #ff00ff;
	height: 100%;
}

.hidden {
	opacity: 0;
}

/* about page */
.about {
	position: relative;
	/* top:0px; */
	/* left: 0px; */
	padding: 10px;
	padding-left: 16vw;
	padding-right:16vw;
	/* padding-top: 80px; */
}

/* contact page */

.contact {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

.contact .panel {
	background: #ffffff77;
	/* box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.1); */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* text-align: center; */
	display: flex;
	width:40vw;
	height:auto;
	padding:20px;
	/* justify-content:center; */
	/* padding: 100px; */
}

.contact .panel .item {
	/* height: 100%; */
	width: 100%;
	/* height: auto; */
	flex: 1 1 auto;
	/* padding: 5px; */
	/* text-align: center; */
	/* place-items: center; */
}

.contact .panel .item img {
	max-height:10vh;
	/* height: 100%; */
	/* max-width: 10vw; */
}

#social-icons-contact {
	/* width: auto; */
	height: 6vw;
	/* width: 6vw; */
	/* width: 8vw; */
	/* width: 5vw; */
}

.skip-nav-link {
	position: absolute;
	padding: 5px;
	left: 10px;
	top: 42px;
	transform: translateX(-140%);
	z-index: 20;
	transition: transform 200ms ease-in;
}
.skip-nav-link:focus {
	transform: translateX(0);
}

.projects-wrapper {
	display: flex;
	/* flex-wrap: wrap; */
	/* align-items: center; */
	justify-content:space-between;
}

.more-project {
	font-size: 1.5rem;
	font-weight: 700;
	padding-left: 10px;
	padding-top: 80px;
}

.next-project {
	font-size: 1.5rem;
	font-weight: 700;
	padding-right: 10px;
	padding-top: 80px;
}

footer {
	/* position: relative; */
	/* color: #ffffff; */
	/* background-color: #129da7; */
	margin-top: auto;
	width: 100%;
	padding: 40px 10px 20px 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}


.footer-item {
	font-size: 1rem;
	/* position: relative; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* padding: 10px; */
}

.footer-item-right {
	align-items: center;
	justify-content: right;
	display: flex;
	flex-wrap: wrap;
	/* padding: 10px; */
	text-align: right;
	/* place-items: right; */
}
.footer-item-right a {
	padding-left: 10px;
}

@media(max-width: 1068px) {
	.logo {
		/* font-size: 1.5rem; */
	}
	.navigation ul li a {
		font-size: 2rem;
	}
	.toggle {
		/* width: 45px;
		height: 45px; */
	}
	.portfolio {
		grid-template-columns: 1fr;
		padding-left: 0px;
		padding-right: 0px;
	}
	.project-wrapper {
		padding-left: 0px;
		padding-right: 0px;
	}
	.imprint-content {
		padding-left: 10px;
		padding-right: 10px;
	}
	.about {
		padding-left: 10px;
		padding-right: 10px;
	}
	.textbox {

	}
	.project {
		grid-template-columns: 1fr;
	}
}

@media (hover: none) {
	
  }

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	 scroll-behavior: auto;
	}
	
	*,
	*::before,
	*::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	  scroll-behavior: auto !important;
	}
  }

img,
picture,
svg	{
	width:100%;
	display: block;
	object-fit:contain;
}

a:link    {color:var(--fourth-color); background-color:transparent; text-decoration:none}
a:visited {color:var(--fourth-color); background-color:transparent; text-decoration:none}
a:hover   {color:var(--primary-color); background-color:transparent; text-decoration:none}
a:active  {color:black; background-color:transparent; text-decoration:none}
a.links:link    {color:white; background-color:transparent; text-decoration:none}
a.links:visited {color:white; background-color:transparent; text-decoration:none}
a.links:hover   {color:white; background-color:transparent; text-decoration:none}
a.links:active  {color:white; background-color:transparent; text-decoration:none}