main { /* main-Bereich */
	display: grid ;
	grid-template-columns: repeat(1, 1fr);
	grid-template-areas: "greeting" /* Bestimmung der Bereiche im Main, um gewünschtes optisches ergebnis zu erzielen */
					   "games";
	
	padding: 2em ;
	
	
	/* Bereich Zuweisungen */
	& p {
		grid-area: greeting ;
	}
	& table {
		grid-area: games ;
	}
}




.greeting{ /* Begrüßungstext */
	text-align: center ;
	text-shadow: 3px 2px 3px #000000 ;
	font-size: 1.4rem ;
	display: block ;
	max-width: 32em ;
	margin: 2em auto ;
	padding: 0.5em ;
	border: solid 0.2em gray ;
	border-radius: 1.0em ;
	color: #f0f0f0 ;
    border-image: linear-gradient(0deg, #800080, #008000) 1;
	
	
	animation: rotbor 2s infinite linear ;
}


/* Animation für die Border, der Begrüßung - ChatGPT das erweitern überlassen, weil es immer das Selbe und repetetiv ist. Auf die Umsetzung bin ich selbst gekommen. */
@keyframes rotbor {
    0% {
        border-image: linear-gradient(0deg, #800080, #008000) 1;
    }
    2% {
        border-image: linear-gradient(7deg, #800080, #008000) 1;
    }
    4% {
        border-image: linear-gradient(14deg, #800080, #008000) 1;
    }
    6% {
        border-image: linear-gradient(21deg, #800080, #008000) 1;
    }
    8% {
        border-image: linear-gradient(28deg, #800080, #008000) 1;
    }
    10% {
        border-image: linear-gradient(35deg, #800080, #008000) 1;
    }
    12% {
        border-image: linear-gradient(42deg, #800080, #008000) 1;
    }
    14% {
        border-image: linear-gradient(49deg, #800080, #008000) 1;
    }
    16% {
        border-image: linear-gradient(56deg, #800080, #008000) 1;
    }
    18% {
        border-image: linear-gradient(63deg, #800080, #008000) 1;
    }
    20% {
        border-image: linear-gradient(70deg, #800080, #008000) 1;
    }
    22% {
        border-image: linear-gradient(77deg, #800080, #008000) 1;
    }
    24% {
        border-image: linear-gradient(84deg, #800080, #008000) 1;
    }
    26% {
        border-image: linear-gradient(91deg, #800080, #008000) 1;
    }
    28% {
        border-image: linear-gradient(98deg, #800080, #008000) 1;
    }
    30% {
        border-image: linear-gradient(105deg, #800080, #008000) 1;
    }
    32% {
        border-image: linear-gradient(112deg, #800080, #008000) 1;
    }
    34% {
        border-image: linear-gradient(119deg, #800080, #008000) 1;
    }
    36% {
        border-image: linear-gradient(126deg, #800080, #008000) 1;
    }
    38% {
        border-image: linear-gradient(133deg, #800080, #008000) 1;
    }
    40% {
        border-image: linear-gradient(140deg, #800080, #008000) 1;
    }
    42% {
        border-image: linear-gradient(147deg, #800080, #008000) 1;
    }
    44% {
        border-image: linear-gradient(154deg, #800080, #008000) 1;
    }
    46% {
        border-image: linear-gradient(161deg, #800080, #008000) 1;
    }
    48% {
        border-image: linear-gradient(168deg, #800080, #008000) 1;
    }
    50% {
        border-image: linear-gradient(175deg, #800080, #008000) 1;
    }
    52% {
        border-image: linear-gradient(182deg, #800080, #008000) 1;
    }
    54% {
        border-image: linear-gradient(189deg, #800080, #008000) 1;
    }
    56% {
        border-image: linear-gradient(196deg, #800080, #008000) 1;
    }
    58% {
        border-image: linear-gradient(203deg, #800080, #008000) 1;
    }
    60% {
        border-image: linear-gradient(210deg, #800080, #008000) 1;
    }
    62% {
        border-image: linear-gradient(217deg, #800080, #008000) 1;
    }
    64% {
        border-image: linear-gradient(224deg, #800080, #008000) 1;
    }
    66% {
        border-image: linear-gradient(231deg, #800080, #008000) 1;
    }
    68% {
        border-image: linear-gradient(238deg, #800080, #008000) 1;
    }
    70% {
        border-image: linear-gradient(245deg, #800080, #008000) 1;
    }
    72% {
        border-image: linear-gradient(252deg, #800080, #008000) 1;
    }
    74% {
        border-image: linear-gradient(259deg, #800080, #008000) 1;
    }
    76% {
        border-image: linear-gradient(266deg, #800080, #008000) 1;
    }
    78% {
        border-image: linear-gradient(273deg, #800080, #008000) 1;
    }
    80% {
        border-image: linear-gradient(280deg, #800080, #008000) 1;
    }
    82% {
        border-image: linear-gradient(287deg, #800080, #008000) 1;
    }
    84% {
        border-image: linear-gradient(294deg, #800080, #008000) 1;
    }
    86% {
        border-image: linear-gradient(301deg, #800080, #008000) 1;
    }
    88% {
        border-image: linear-gradient(308deg, #800080, #008000) 1;
    }
    90% {
        border-image: linear-gradient(315deg, #800080, #008000) 1;
    }
    92% {
        border-image: linear-gradient(322deg, #800080, #008000) 1;
    }
    94% {
        border-image: linear-gradient(329deg, #800080, #008000) 1;
    }
    96% {
        border-image: linear-gradient(336deg, #800080, #008000) 1;
    }
    98% {
        border-image: linear-gradient(343deg, #800080, #008000) 1;
    }
    100% {
        border-image: linear-gradient(350deg, #800080, #008000) 1;
    }
}



.theGames { /* Die drei Spiele die man auf der Homepage sieht */
	font-family: GameSchrift ;
	display: flex ;
	flex-wrap: wrap;
	align-items: center ;
	padding: 0 ;
	margin: 3em auto ;
	text-align: center ;
	
	min-width: 30em ;
	max-width: 80em ;
	max-height: auto ; 
	
	background: linear-gradient(to right, #404040 0%, #800080 34%, #008000 70%, #404040 100% );
	
	align-content: center ;
	
}

figure {
	margin: 1em auto ;	
}

#galaga {
	padding: 0 4em ;
}

img { /* maximale Größe aller Bilder */
	max-width: 20em ;
	height: auto ;
}

@media screen and (min-width: 320px) and ( max-width: 1131px )	{ /* Anpassung für mobile Geräte */
	main{
		padding: 1em ;
	}
	
	.greeting{
		margin: 1em auto ;
		font-size: 1.2rem ;
	}
	.theGames{
		min-width: 1em ;
		max-width: 15em ;
		
		background: radial-gradient(ellipse, #800080 25%, #008000 48%, #404040 65% );	
	}
	
	#galaga {
		padding: 0 ;
	}
	
	img {
		max-width: 15em ;
	}
	
}