:root { 
	--advanced-stroke-color: blue;
	--app-stroke-color: black;
	--kids-stroke-color: #FF5C91;
    --main-stroke-width: 13;
	--images-stroke-width: 13;

	--color-one: red;
	--color-two: green;
	--color-three: yellow;
	--color-four: pink;
	--color-six: black;
	--color-seven: violet;
	--color-eight: blue;
	--color-nine: turquoise;
	--color-ten: grey;
}

body {
  color: black;
  background: white;
  padding: 0px;
  margin: 0px;
	left: 0px;
	top: 0px;
  height: 100%;
    font-family: sans-variable !important;;
  overflow: hidden;
font-weight: normal;
	background: black;
 font-variation-settings: 'wght' 625;
}

a {
	text-decoration: none;
	color: black;
	display: inline;
	background: white;
    padding: 0.2dvh 0.6dvh;
    margin: 1dvh 0dvh;
    border-radius: 1dvh;
}

.blocks {
  padding: 0;
  text-align: center;
  font-size: 6vw;
	position: absolute;
	top: 0px;
	line-height: 32dvh;
	z-index: 1;

}

.comp-button {
    background: white;
    padding: 0.2dvh 0.6dvh;
    margin: 0.4dvh 0dvh;
    border-radius: 1dvh;
    display: inline-block;
}

img {
	height: calc(100dvh / 3 * 2 - 12dvh);
	margin-top: 6dvh;
    opacity: 1;
}

.description-img {
	height: calc(100dvh / 3 * 2 - 4vw);
	margin-top: 2vw;
}

.tools-img {
	height: 90%;
	margin-top: -2dvh;
}
.shapes {
	width: 33%;
	height: 33%;
	float: left;
	padding-bottom: 4vw;
}

.shapes-description {
	font-size: 25px;
	line-height: 28px;
	text-align: left;
	padding: 6dvh 6dvh 0dvh 6dvh;
}

.table {
	display: table;
}

.table-cell {
	display: table-cell;
	padding-right: 1vh;
}

.table-cell-2 {
	display: table-cell;
}

.block-2 img {
	height: calc(100dvh / 3 - 6dvh);
	margin-top: 3dvh;
}

.block {
	width: 50vw;
	height: calc(100dvh/3);
	float: left;
	display: block;
	position: relative;
    border-radius: 5vw;
	background-color: white;
	overflow: hidden;
}

.block-title {
	width: 100%;
	position: absolute;
	top: 30px;
	font-size: 20px;
	text-align: center;
	line-height: 0px;
}

.block-title-bottom {
	width: 100%;
	position: absolute;
	bottom: 30px;
	font-size: 20px;
	text-align: center;
	line-height: 0px;
	opacity: 0.3;
}

.composition-title {
	position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5vw;
    opacity: 0;
}

.block-4:hover .composition-title{
    opacity: 1;
}

.block-4:hover img{
    opacity: 0;
}

.touchcomposition {
    opacity: 1;
}

.touchimage {
    opacity: 0;
}

.block-index{
    width: 50vw;
    height: calc(100dvh / 3);
    display: inline-block;
}

.block-color {
	border-radius: 20vw;
    width: 16dvh;
    display: inline-block;
    height: 16dvh;
    margin-top: calc((100dvh / 6) - 8dvh);
    mix-blend-mode: multiply;
}



.block-color-2 {
	border-radius: 20vw;
    width: 35dvh;
    height: 35dvh;
    display: inline-block;
    margin-top: calc((100dvh / 6) + 0dvh);
    mix-blend-mode: multiply;
}

.block-color-2-zwei {
    margin-left: -20dvh;
}

.block-color-zwei {
    margin-left: -10dvh;
}

.block-1 {
}


.block-2 {
	background-color: LightGray;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(100vw / 4);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
}


.block-3 {
	background-color: WhiteSmoke;
	width: calc(100vw / 2);
	position: absolute;
	left: calc(0vw);
	top: calc(100dvh / 3);
	z-index: 2;
}


.block-4 {
	background-color: #ddd;
	width: calc(100vw / 2);
	position: absolute;
	left: calc(50vw);
	top: calc(0vh);
	z-index: 2;
	height: calc(100dvh / 3 * 2);
	line-height: 64vh;
}

.block-5 {
	background: white;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(0vw);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
}

.block-6 {
	background-color: LightGray;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(100vw / 2);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
}

.block-start {
	background-color: LightGray;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(100vw / 4 * 3);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
}

.block-back {
	background-color: LightGray;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(100vw / 4 * 3);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
	background-color: rgba(50,50,50,1);
	color: #ccc;
}

.block-back:hover{
	background-color: rgba(60,60,60,1) !important;
	cursor: pointer;
}

.block-about {
	background-color: LightGray;
	width: calc(100vw / 4);
	position: absolute;
	left: calc(100vw / 2);
	top: calc(100dvh / 3 * 2);
	z-index: 2;
	background-color: rgba(50,50,50,1);
	color: #ccc;
}

.block-about:hover{
	background-color: rgba(60,60,60,1) !important;
	cursor: pointer;
}

.block-7 {
	width: 100vw;
	height: calc(100dvh / 3);
}

.block-8 {
	width: 50vw;
	height: calc(100dvh / 3 * 2);
	background-color: white;
	line-height: 64dvh;
}

.block-9 {
	width: 25vw;
	height: calc(100dvh / 3 * 2);
	background-color: LightGray;
	line-height: 64dvh;

}

.block-10 {
	width: 25vw;
	height: calc(100dvh / 3);
	background-color: rgba(50,50,50,1);
	color: #ccc;
}

.block-11 {
	width: 25vw;
	height: calc(100dvh / 3);
}

.block-11:hover {
	background-color: white !important;
	cursor: pointer;
}

.block-10:hover{
	background-color: rgba(60,60,60,1) !important;
	cursor: pointer;
}


#new-visible:hover {
	background-color: white !important;
	cursor: pointer;
}

.description {
	font-size: 1.7vw;
	line-height: 1.9vw;
	text-align: left;
	padding: 3vw;
}


.st0 {
	fill:none;
	stroke: var(--app-stroke-color);
	stroke-width: var(--main-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

.st1 {
	fill:none;
	stroke: var(--kids-stroke-color);
	stroke-width: var(--images-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

.st2 {
	fill:none;
	stroke: var(--advanced-stroke-color);
	stroke-width: var(--images-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

.st3 {
	fill:none;
	stroke: var(--app-stroke-color);
	stroke-width: var(--images-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

.st4 {
	fill:none;
	stroke: var(--advanced-stroke-color);
	stroke-width: var(--main-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}

.st5 {
	fill:none;
	stroke: var(--kids-stroke-color);
	stroke-width: var(--main-stroke-width);
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
}


strong {
	font-weight: normal;
}

.animation {
	 margin-top: 100dvh;
	 padding-top: 100dvh;
   -webkit-animation: bar 1s cubic-bezier(0.000, 1, 0.100, 1);
	animation-fill-mode: forwards;
}

.animation.eins {
	animation-delay: 0.2s;
}

.animation.zwei {
	animation-delay: 1s;
}

.animation.drei {
	animation-delay: 0.6s;
}

.animation.vier {
	animation-delay: 0.4s;
}

.animation.funf {
	animation-delay: 0.8s;
}

.animation.sechs {
	animation-delay: 1.2s;
}

.animation.sieben {
	animation-delay: 1.4s;
}

.animation.acht {
	animation-delay: 0s;
}

.animation.eins-index {
	animation-delay: 0.2s;
}

.animation.zwei-index {
	animation-delay: 0.4s;
}

.animation.drei-index {
	animation-delay: 0.6s;
}

.animation.vier-index {
	animation-delay: 0.8s;
}

.animation.funf-index {
	animation-delay: 1s;
}

.animation.sechs-index {
	animation-delay: 1.2s;
}

.animation.sieben-index {
	animation-delay: 1.4s;
}

@keyframes bar
{
  0% {
	 margin-top: 100vh;
	 padding-top: 100vh;
  }

  100% {
	  	margin-top: 0px;
	 padding-top: 0vh;

  }
}


@keyframes blink
{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes jump
{
  0% {
	  opacity: 0;
       line-height: 40dvh;
  }
	
  50% {
	  opacity: 1;
        line-height: 32dvh;
  }
	
	  50% {
	  opacity: 1;
        line-height: 32dvh;
  }
	
	  100% {
	  opacity: 0;
        line-height: 20dvh;
  }
}

	
.title {
	font-size: 2dvh;
	line-height: 4dvh;
}
		
.inactive {
}

.buttons {
  width: calc((100vw / 2) - 1px);
  height: calc(15dvh);
  display: block;
  text-align: center;
  float: left;
  position: relative;
}

.menu-item {
  display: block;
  width: 18dvh;
  height: calc(100dvh / 3);
  left: calc(50% - 9dvh);
  margin: 0dvh 0dvh 0dvh -0.6dvh;
  position: relative;
  font-variant-numeric: tabular-nums;
}



		
.navbar {
  padding: 3dvh 1dvh 0dvh 1dvh;
  height: 0px;
  position: relative;
  display: block;
  text-align: center;
  font-size: 2dvh;
	z-index: 3;
}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
		
.navbar {
  padding: 3dvh 1dvh 0dvh 1dvh;
  height: calc(5dvh - 1.5vw);
  position: relative;
  display: block;
  text-align: center;
  font-size: 2dvh;
	z-index: 3;
}

}

		
.bottomnav {
	height: calc(15dvh);
	position: fixed;
	bottom: 10dvh;
	z-index: 3;
	}
.one {
	width: calc(50% - 1dvh);
	text-align: left;
	float: left;
	padding-left: 1dvh;
		}
		
.two {
	width: calc(50% - 1dvh);
	text-align: right;
	float: left;
	padding-right: 1dvh;
}
		
#start-hidden {
	display: none;
}
		
#new {
	display: none;
}
		
#new-visible {
	display: inline-block;
}

.level {
	/* padding: 0.4vh 1.5vh 0.6vh 1.5vh; */
}

.button {
	/* border: 0.2vh solid white; */
	/* border-radius: 5dvh; */
	/* display: inline-block; 
	/* padding: 0.4dvh 1.5dvh 0.6dvh 1.5dvh; */
}

#clockdiv {
	  font-size: 6vw;
	width: 100vw;
	position: absolute;
	left: -50vw;
	
}

.leerzeichen-1 {
	display: inline-block;
	float: left;
	margin-left: -1vw;
}

.leerzeichen-2 {
	display: inline-block;
	float: left;
	margin-left: -1vw;
}

.time-big {
	display: block;
  font-size: 6vw;
	animation: jump 1s ease;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-transform: translateZ(0);
	margin-left: 0.6vw;
}


.clock-gradient {
	position: fixed; 
	background: rgba(0,0,0,0); 
	height: 0px; 
	top: 0px; 
	left: 0px; 
	width: 100vw;  
	-webkit-transition: height 1s linear;
	-moz-transition: height 1s linear;
	-o-transition: height 1s linear;
	transition: height 1s linear; 
mix-blend-mode: multiply;
	z-index: 10;
	display: none;
}

#clock-gradient-2 {
	animation: blink 1s ease;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

#timesup-2 {
	animation: jump 0.2s ease;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

#word-random {
	padding: 0.5dvh 1.5dvh 0.5dvh 1.5dvh;
	border-radius: 5dvh;	
	background: blue;
}

.deletebutton {
	padding: 0dvh 1.5dvh 0dvh 1.5dvh;
	border: 0.4dvh solid;
	border-radius: 5dvh;
	margin-left: 1dvh;
	text-align: center;
}


span {
	position: relative;
}






[contenteditable]:focus {
    outline: 0px solid transparent;
	
}

/* Portrait */
@media screen and (orientation:portrait) {
.block-1, .block-2, .block-3, .block-4, .block-5, .block-6 {
	position: relative;
	width: 50vw;
	height: calc((100dvh / 3)) ;
	left: inherit;
	top: inherit;
}

.description {
    font-size: 4vw;
    line-height: 4.4vw;
	padding: 3dvh;
}

.shapes {
	width: 50%;
	height: 30%;
	float: left;
	padding-bottom: 1dvh;
}

.shapes-description {
	font-size: 16px;
	line-height: 18px;
	text-align: left;
	padding: 3dvh 0dvh 0dvh 3dvh;
}

.block-4 {
	line-height: 32dvh;
}

.block-7 {
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-8 {
	height: calc(100dvh / 6 * 4);
}

.block-9 {
	height: calc(100dvh / 6 * 4);
	width: 50vw;
}

#greeting {
	line-height: 66dvh;
}



.block-10, .block-11 {
	width: 50vw;
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-6 {
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-start {
	left: 50vw;
	width: 50vw;
	top: calc(100dvh / 6 * 5);
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-back {
	width: 50vw;
	top: calc(100dvh / 6 * 5);
	left: 50vw;
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-about {
	width: 50vw;
	top: calc(100dvh / 3 * 2);
	left: 50vw;
	height: calc(100dvh / 6);
	line-height: 16dvh;
}

.block-title {
	top: 20px;
	font-size: 15px;
}

.block-title-bottom {
	bottom: 20px;
	font-size: 15px;
}

img {
	height: calc(100dvh / 3 - 12dvh);
	margin-top: 5dvh;
}

.description-img {
    width: calc(50vw);
    height: auto;
    margin-top: calc(30vh - 20vw);
}


.description-img-new {
	margin-top: calc(33dvh - 37vw);
	height: auto;
    width: 44vw;
}



.block-2 img {
	height: calc(100dvh / 3 - 10dvh);
	margin-top: 5dvh;
}

.animation.eins {
	animation-delay: 0.1s !important;
}

.animation.zwei {
	animation-delay: 0.2s !important;
}

.animation.drei {
	animation-delay: 0.3s !important;
}

.animation.vier {
	animation-delay: 0.4s !important;
}

.animation.funf {
	animation-delay: 0.5s !important;
}

.animation.sechs {
	animation-delay: 0.6s !important;
}

.animation.sieben {
	animation-delay: 0.7s !important;
}

.animation.acht {
	animation-delay: 0s !important;
}

@keyframes jump
{
  0% {
	  opacity: 0;
       line-height: 20dvh;
  }
	
  50% {
	  opacity: 1;
        line-height: 16dvh;
  }
	
	  50% {
	  opacity: 1;
        line-height: 16dvh;
  }
	
	  100% {
	  opacity: 0;
        line-height: 10dvh;
  }
}

.block-color-2 {
    border-radius: 20vw;
    width: 18dvh;
    height: 18dvh;
    display: inline-block;
    margin-top: calc((100dvh / 6) + 2dvh);
    mix-blend-mode: multiply;
    display: block;
    margin-left: calc((50vw - 18dvh) / 2) !important;
}

.block-color-2-zwei {
	margin-left: 0px;
    margin-top: -11vw;
}

.tools-img {
	height: 65%;
	margin-top: 1dvh;
}

}