html {
	font-size: 14pt;
	background: #ecb096;
	color: #000;
	font-family: 'Helvetica', 'Arial', sans-serif;
	}
body {
	margin: 0;
	position: relative;
	overflow-x: hidden;
	}

a:link, a:visited {
	text-decoration: underline;
	color: inherit;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
	text-decoration-style: dotted;
	}
a:hover {
	text-decoration: underline;
	color: inherit;
	text-decoration-style: wavy;
	}
.scrollarea {
	height: 600vh;
	position: relative;
	z-index: 1;
	}

main.page {
	position: fixed;
	z-index: 1000;
	color: #fff;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	}
.left-top, .right-bottom {
	position: absolute;
	font-weight: bold;
	font-size: 7vw;
	line-height: 0.9em;
	z-index: 999;
	color: #000;
	}

.left-top {
	top: 1rem;
	left: 1rem;
	}
.right-bottom {
	bottom: 1rem;
	right: 1rem;
	}


.kobifranco .kobi, .kobifranco .kobi-anim, .kobi-clone {
	position: absolute;
	right: 10%;
	height: 32%;
	top: 15%;
	}
.kobifranco .franco, .kobifranco .franco-anim, .franco-clone {
	position: absolute;
	left: 10%;
	height: 32%;
	top: 50%;
	}
 

 .kobi-anim, .franco-anim {
  transform-origin: center center;
  will-change: transform;
	}

.js-clone {
  pointer-events: none; /* damit sie nicht anklickbar sind */
  /* ggf. leicht andere Opazität, wenn du sie unterscheiden willst */
  /* opacity: 0.8; */
}






@media only screen and (max-width: 1000px) {

	.left-top, .right-bottom {
		font-size: 11vw;
		}

	.right-bottom {
		bottom: 9rem;
		right: 1rem;
		}
	.kobifranco .kobi, .kobifranco .kobi-anim, .kobi-clone {
		position: absolute;
		right: 10%;
		height: 15%;
		top: 22%;
		}
	.kobifranco .franco, .kobifranco .franco-anim, .franco-clone {
		position: absolute;
		left: 3%;
		height: 15%;
		top: 39%;
		}
	 

	 .kobi-anim, .franco-anim {
	  transform-origin: center center;
	  will-change: transform;
		}

	.js-clone {
	  pointer-events: none; /* damit sie nicht anklickbar sind */
	  /* ggf. leicht andere Opazität, wenn du sie unterscheiden willst */
	  /* opacity: 0.8; */
	}

	
}