@charset "utf-8";
/* CSS Zauberkugel */

.zauberkugelwrapper{
	display: flex;  
	flex-wrap:wrap;
	justify-content:center;
	margin-left:50px;
	background-color: rgba(255,255,255,0);
	border-radius: 20px;
	padding: 30px;
	}
	
.kugeltext{
	position: relative;
	padding:20px;
	}

.bsptext{
	font-style:italic;
	font-size:11px;
	}


.suchen{
	
	margin-bottom:20px;}
	
.kugelklasse{
	position: relative; 
	display:flex;
	flex-direction:column; 
	align-items: center; 
	justify-content:center;
	padding:0px; 
	width: 300px; 
	height: 300px;
	margin-bottom:60px;
	background-color: transparent;
	border: none;
	}
	
.kugelklasse:focus {
	outline:0;
	}
	
.glaskugelVorne{
	width:300px; 
	position: absolute; 
	top:0px; 
	left:0px; 
	z-index:4;
	}
	

.glaskugelText{
	position:absolute;  
	display:flex;
	flex-direction:column; 
	align-items:center; 
	justify-content:center;
	width:300px;
	height:300px;
	z-index:3; 
	color:grey; 
	letter-spacing:0.3em;
	}
	
.glaskugelLsgicon{
	position: absolute;
	top:50px;
	left:50px;
	width:200px; 
	z-index:3;
	}
	
.symboltable{
	display:inline-block;
	flex-wrap:no-wrap;
	background-color:white;
	border: 2px solid black;
	border-radius: 20px;
	padding:20px;
	padding-right: 10px;
	}
	
td {
	display:inline-block;
	margin:5px;
	padding-left:5px;
	padding-right:5px;
	}

.zufallsicon{
	width:15px;
	height: 15px;
	}
	
.zentriert{
	display:flex;
	align-items:center;
	}
	
.glaskugelLsgicon{
	animation: blink 4s ease-in-out infinite;
	}

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

@media(max-width:1023px){
	#introduction1{
		font-size:30px;
		width:200px;
		padding-top: 70px;
		letter-spacing:0.1em;
		}
		
	.glaskugelWeiter{
		position:absolute;
		top:300px;}
		
	.kugeltext{
		text-align:center;
		}
		
	.bsptext{
		text-align:left;
		}
		
	.symboltable td {
	display:inline-block;
	margin:10px;
	padding-left:10px;
	padding-right:10px;
	}
	
	.symboltable tr{
		white-space:nowrap;
		}
	
	.zufallsicon{
	width:40px;
	height: 40px;
	}
	}