/*

    CSS-Datei für die Startseite von beat.doebe.li
    
    Last change: 27.10.2023
    
*/

/*  
    Allgemeines
    --------------------------------------------------------------------------
*/
		
		body {
		  font-family:'courier new',courier;      /* Standard-Schriftart          */
			margin:0px 0px 0px 0px;                 /* Kein Rand                    */
			background:black;                       /* Schwarzer Hintergrund        */
			color:white;                            /* Weisse Schrift               */  
		  overflow: hidden;                       /* Rauslappendes Abschneiden    */  

		  display: -webkit-box;                   /* Wir arbeiten mit Flexbox     */  
		  display: -ms-flexbox;
		  display: flex;
		  height: 100%;
		  
		  flex-direction: column;                 /* Primäre Achse: Senkrecht     */
		  flex-wrap: wrap;                        /* Alle Elemente untereinander  */
		  justify-content:center                  /* Alle Elemente zentriert      */ 
		
		  -webkit-perspective: 1000px;
		  perspective: 1000px;
		  -webkit-transform-style: preserve-3d;
		  transform-style: preserve-3d;
		  
		}

		a {
			text-decoration:none;                   /* Links nicht unterstreichen    */
			}

		a:link {color:white;}	                    /* Links sind weiss              */
		a:visited {color:#c0c0c0;}                /* Besuchte Links sind grau      */
		
		img { border: 0; }
		
		.en {display:none}

		h2 {font-size:80%}
		span {font-size:80%}
		
		li {
 			display: inline-block;                 /* Alle Einträge auf einer Zeile  */
			list-style-type:none;                  /* Keine Aufzählungszeichen       */
			margin-left:10px;margin-right:10px;}   /* Links und rechts etwas Abstand */
		
/*  
    Karussel
    --------------------------------------------------------------------------
*/

		#drag-container {
			align-items:center;
			height:50%
		}

		#spin-container {
			position: relative;
			}
			
		#drag-container,
		#spin-container {
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		  margin: auto;
		
		  -webkit-transform-style: preserve-3d;      /* Kinder-Elemente bleiben im 3D-Raum */
		  transform-style: preserve-3d;
		  
		  -webkit-transform: rotateX(-10deg);        /* Neigung des Karussels gegen vorne  */
		  transform: rotateX(-10deg);
		}

		#drag-container img {
			width: 100%;
		  height: 100%;
		}

		#drag-container .blah {
		  -webkit-transform-style: preserve-3d;
		  transform-style: preserve-3d;
		  position: absolute;
		  overflow: visible;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  text-align: center;
		   -webkit-box-shadow: 0 0 8px #fff;
		  box-shadow: 0 0 8px #fff;
		  -webkit-box-reflect: below 10px
		    linear-gradient(transparent, transparent, #0005);
		}

		#drag-container img:hover {
		  -webkit-box-shadow: 0 0 15px #fffd;
		  box-shadow: 0 0 15px #fffd;
		  -webkit-box-reflect: below 10px
		    linear-gradient(transparent, transparent, #0007);
		}

		#drag-container p {
		  position: absolute;
		  top: 100%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
		  transform: translate(-50%, -50%) rotateX(90deg);
		  color: #fff;
		}

		#ground {
		  width: 900px;
		  height: 900px;
		  position: absolute;
		  top: 100%;
		  left: 50%;
		  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
		  transform: translate(-50%, -50%) rotateX(90deg);
		  background: -webkit-radial-gradient(
		    center center,
		    farthest-side,
		    #9993,
		    transparent
		  );
		}

		@-webkit-keyframes spin {
		  from {
		    -webkit-transform: rotateY(0deg);
		    transform: rotateY(0deg);
		  }
		  to {
		    -webkit-transform: rotateY(360deg);
		    transform: rotateY(360deg);
		  }
		}
		@keyframes spin {
		  from {
		    -webkit-transform: rotateY(0deg);
		    transform: rotateY(0deg);
		  }
		  to {
		    -webkit-transform: rotateY(360deg);
		    transform: rotateY(360deg);
		  }
		}
		@-webkit-keyframes spinRevert {
		  from {
		    -webkit-transform: rotateY(360deg);
		    transform: rotateY(360deg);
		  }
		  to {
		    -webkit-transform: rotateY(0deg);
		    transform: rotateY(0deg);
		  }
		}
		@keyframes spinRevert {
		  from {
		    -webkit-transform: rotateY(360deg);
		    transform: rotateY(360deg);
		  }
		  to {
		    -webkit-transform: rotateY(0deg);
		    transform: rotateY(0deg);
		  }
		}