/* --- body --- */
body {
		width:					1000px;
		font-family:			Arial, Helvetica;
		font-size:				1em;
		color:					#333333;
		background-color:		#111111;
		margin-top:				10px;
		margin-bottom:			10px;
		margin-left:			auto;
		margin-right:			auto;
}

/* --- Links --- */
a { 	color:					#ffffff;
		text-decoration:		none;

}
a:hover {
		color:					#ffffff;
		text-decoration:		underline;
}

/* --- Hervorhebungen --- */
span {
		color: 					#000000;
		background-color: 		#ffffFF;

		letter-spacing: 		2px;
}

span.ST {
		color: 					#b71178;
		background-color: 		#000000;

}
option.e	{color: 					#ff3399;
		background-color: 		#222222;
		letter-spacing: 		1px;	}
		option.er	{color: 					#ffff00;
		background-color: 		#222222;
		letter-spacing: 		1px;	}
		option.de	{color: 					#ff7f00;
		background-color: 		#222222;
		letter-spacing: 		1px	}
		option.d	{color: 					#00ccff;
		background-color: 		#222222;
		letter-spacing: 		1px	}
		option.dr	{color: 					#ff3399;
		background-color: 		#222222;
		letter-spacing: 		1px	}
		option.dr	{color: 					#ff3399;
		background-color: 		#222222;
		letter-spacing: 		1px	}



/* --- Kopfzeile f�r Logo und Titel --- */
#header{
		Padding: 				5px;
		margin-bottom: 				5px;
		Border-top: 				1px solid #222222;
			Border-left: 				1px solid #222222;
				Border-right: 				1px solid #222222;
					Border-bottom: 				3px solid #ffffff;
		Min-height:				50px;
		background-color: 		#000000;
}

#header h1 {
		font-size:				2em;
		text-align:				center;
		color:					#ffffff;
		font-style:				italic
}

#header img {	float:					left;
		border:					0px solid #222222;
		margin-left: 50px
}

/* --- Navigationsbereich --- */


#nav	 {
height:   40px;
		padding:				5px;
		border:					0px solid white;
		background-color:		#333333;
		margin-LEFT:			8px;
		margin-right:			8px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
			Float:					left;
		color: #ffffff}

		#nav:hover	 {
		height:   40px;
				padding:				5px;
				border:					0px solid white;
				background-color:		#555555;
				margin-LEFT:			8px;
				margin-right:			8px;
				margin-top:				2.5px;
				margin-bottom:			2.5px;
					Float:					left;
				color: #ffffff

}

#navd	 {
height:   30px;
		padding:				5px;
		border:					0px solid white;
		background-color:		#23000e;
		margin-LEFT:			8px;
		margin-right:			8px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
			Float:					left;
		color: #ffffff}

		#navd:hover	 {
		height:   40px;
				padding:				5px;
				border:					0px solid white;
				background-color:		#520f2a;
				margin-LEFT:			8px;
				margin-right:			8px;
				margin-top:				2.5px;
				margin-bottom:			2.5px;
					Float:					left;
				color: #ffffff

}
#nav2	 {
		width:					210px;
		padding:				5px;
		border:					1px solid white;
		background-color:		#111111;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
		border-radius: 15px;
		text-align: center}

#nav3	 {
		width:					210px;
		padding:				5px;
		border:					1px solid white;
		background-color:		Black;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
		border-top-right-radius: 15px;
		text-align: center
}
#bell	 {
		width:					227.9px;
		padding:				5px;
		border:					1px solid red;
		background-color:		#ffc700;
		margin-LEFT:			5px;
		margin-right:			5px;
		margin-top:				2.5px;
		margin-bottom:			2.5px;
		Float:					left;
}

/* --- Inhaltsbereich --- */
#content {		background-color:#000000;
				padding:		20px;
				margin-left:	0px;
				margin-right:	0px;
				color:			#ffffff;

}
#Menu {		background-color:#070707;
				padding:		20px;
				margin-left:	0px;
				margin-right:	0px;
			font-size: 1.3em;
		height: 70px}

			#Menuu {		background-color:#070707;
							padding:		20px;
							margin-left:	0px;
							margin-right:	0px;
							font-size: 1.3em;
						height: 70px}

						#Menud {		background-color:#000000;
										padding:		20px;
										margin-left:	0px;
										margin-right:	0px;
										font-size: 1.3em;
									height: 50px}

									#Menudu {		background-color:#000000;
													padding:		20px;
													margin-left:	0px;
													margin-right:	0px;
													font-size: 1.3em;
												height: 50px}

#content h2 {	color:			#ffffff	}

#content h1 {	color:			#ffffff;
				background-color:#111111;
				width:			auto;text-align: center}
#content img.its{	width:		135px;
				height:			200px;

				margin:			15px;
				Padding:		0px;
				Background-color:	#ff3399}

				#content img.BILDEIN{	width:		450px;
								height:			auto;

								margin:			0px;
								Padding:		0px;
								Background-color:	#ff3399}

#content img.its2{	width:		400px;
				height:			200px;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}

#content img.its4{	width:		345px;
				height:			195px;

				margin:			13px;
				Padding:		0px;
				Background-color:	#ff3399;}
#content img.its5{	width:		731px;
				height:			200px;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its3{	width:		922px;
				height:			390px;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}

#content img.its7{	width:		405px;
				height:			880px;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its6{	width:		221px;
				height:			420px;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its8{	width:		922px;
				height:			auto;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its9{	width:		922px;
				height:			auto;

				margin:			17px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its10{	width:		290px;
				height:			auto;

				margin:			10px;
				Padding:		0px;
				Background-color:	#ff3399}
#content img.its11{	width:		125px;
				height:			auto;

				margin:			2px;
				Padding:		0px;
				Background-color:	#ff3399}

				#content h1.T1{
								Background-color:	#19000b;
							color: #ee0089}
							#content h1.T2{
											Background-color:	#261400;
										color: #ee7a00}
										#content h1.T3{
														Background-color:	#1e2100;
													color: #e9ff00}
img.its12{
width:		70px;
				height: 40px;
				margin:			0px;
				Padding:		0px;
				Background-color:	black;}

tr.htt{		background-color:	#222222;}
#content img.HOME{
		width:					227px;
		height:					auto;
		padding:				3.2px;
		border:					0px solid black;
		background-color:		#222222;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
		}

#content img.HOME3{
		width:					215px;
		height:					300px;
		padding:				5px;
		border:					1px solid black;
		background-color:		#ff3399;
		margin-LEFT:			2,5px;
		margin-right:			2,5px;
		margin-top:				0px;
		margin-bottom:			0px;

}

#content img.HOME2{
		width:					227.9px;
		height:					300px;
		padding:				3.2px;
		border:					1px solid red;
		background-color:		#ff3399;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
		}

		#text {line-height: 30px;
		display: table-cell;
		text-align: justify;
		padding:20px;
		font-size: 1.1em;
		line-height: 1.9
	}

	#Bild {line-height: 30px;
	display: table-cell;
	text-align: justify;
	padding:20px;
	font-size: 1.1em;
	line-height: 1.9;
	background-color: #070707;
}


#content img.L{
		width:					950px;
		height:					auto;
		padding:				3.2px;
		border:					1px solid black;
		background-color:		blue;
		margin-LEFT:			0px;
		margin-right:			0px;
		margin-top:				0px;
		margin-bottom:			0px;
	}

/* --- Fu�zeile --- */
#footer {Padding: 				5px;
		Margin: 				0px;
		Border-bottom: 				1px solid #222222;
		Min-height:				50px;
		background-color: 		#222222;
			Border-left: 				1px solid #222222;
				Border-right: 				1px solid #222222;
				Border-top: 				3px solid #ffffff;
		text-align:				center;
		color:					#ffffff;

}
HR		{border: 				5px double #222222;
}

$background: #222;
$leftFace: #D53A33;
$rightFace: #E79C10;
$topFace: #1d9099;
$scale: 1;
$duration: 3s;
$timingFunction: ease;}

body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100vw;
  margin:0;
  padding:0;
  background:$background;
}

.container {
  position:relative;
  height:100px;
  width:86px;
  transform:scale(#{$scale * .5});
}

.cube {
  position:absolute;
  width:86px;
  height:100px;
}

.right {
  background:$rightFace;
  transform: rotate(-30deg) skewX(-30deg) translate(49px, 65px) scaleY(0.86);
}

.left {
  background:$leftFace;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.86) translate(25px, -50px);
}

.top {
  background:$topFace;
  transform: rotate(210deg) skew(-30deg) translate(-75px, -22px) scaleY(0.86);
  z-index:2;
}

.face {
  height:50px;
  width:50px;
  position:absolute;
  transform-origin: 0 0;
}

@mixin slice($h, $w, $l) {
  .h#{$h}.w#{$w}.l#{$l} {
    z-index: (-#{$h});
    animation-name: h#{$h}w#{$w}l#{$l};
    animation-timing-function: $timingFunction;
    animation-duration: $duration;
    animation-iteration-count: infinite;
    }
  @keyframes h#{$h}w#{$w}l#{$l} {
    0% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    }
    14% {
      transform:translate(($w * -50% - 50%) + ($l * 100% - 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 50 - 25%));
    }
    28% {
      transform:translate(($w * -100% + 50%) + ($l * 100% - 50%), ($h * 50 - 200%) + ($w * 50% - 75%) + ($l * 50 - 25%));
    }
    43% {
      transform:translate(($w * -100% - 100%) + ($l * 100% + 100%), ($h * 100 - 400%) + ($w * 50% - 50%) + ($l * 50 + 50%));
    }
    57% {
      transform:translate(($w * -100% - 100%) + ($l * 50% + 200%), ($h * 100 - 400%) + ($w * 50% - 50%) + ($l * 25 + 100%));
    }
    71% {
      transform:translate(($w * -50% - 200%) + ($l * 50% + 200%), ($h * 100 - 375%) + ($w * 25% - 25%) + ($l * 25 + 100%));
    }
    85% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    }
    100% {
      transform:translate(($w * -50% - 50%) + ($l * 50% + 50%), ($h * 50 - 200%) + ($w * 25% - 25%) + ($l * 25 + 25%));
    }
  }
}

@mixin generateSlice() {
  @for $i from 1 to 4 {
    @for $j from 1 to 4 {
      @for $k from 1 to 4 {
        @include slice($i, $j, $k);
      }
    }
  }
}

@include generateSlice();
View Compiled