@charset "utf-8";
/* CSS Document 
Copyright: Stellarius ©2022
*/

html {
  scroll-behavior: smooth; /* beim klicken auf einen Link bewegt sich die Seite langsam zum ausgewählten Inhalt */
}

body { /*background: url("../bild/background_FINAL_c.png") top center no-repeat, linear-gradient(#17182A 73%, #010101 100%);*/
		background: url("../bild/starfield_bow_b_FINAL.png") top left repeat, linear-gradient(#17182A 73%, #010101 100% );
		background-size: contain ; /* automatische Anpassung der Breite */
		width: 100%;
		height: 5000px;
		font-family:Arial, Helvetica, sans-serif;

}
/* START *** DIV attribute und Fading Funktionen */
div{ -moz-animation: fadeIn 5s ;
		animation: fadeIn 5s;
 		-webkit-animation: fadeIn 5s;
  		-o-animation: fadeIn 5s;
  		-ms-animation: fadeIn 5s; 
		text-align:center;
		
		margin: auto;
 		max-width: 800px;
 		/*border: 3px solid #73AD21;*/
 		padding: 10px;}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* ENDE *** DIV attribute und Fading Funktionen */

img {
  max-width: 100%;
  height: auto;
}
.trans-weiss {
	background-color: rgba(255, 255, 255, .75);
}
.trans-schwarz {
	background-color: rgba(0, 0, 0, .75);
}

/* START *** Responsive Navigation Styles: Navi verschwindet bei mobile Devices */ 
/* Basiert auf W.S. Toh auf "Codeboxx" https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ 
	bearbeitet von Stellarius */

/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
	position: -moz-sticky; /* Position der Navigation wird am oberen Rand der Seite festgehalten */
	position: sticky;
	position: -o-sticky;
	position: -ms-sticky;
	top: 0px;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding-top: 5px;
  color: #000;
  text-decoration: none;
/*  text-align: center; */
}
#hamitems a:hover { }

/* (C) HIDE HAMBURGER */
#hamburger { display: none; }

/*--------------------------------------------------*/
/* [ON SMALL SCREENS] */
@media screen and (max-width: 672px){
  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }  
}

/* ENDE *** Responsive Navigation Styles: Navi verschwindet bei mobile Devices */ 

/* START *** Geiler Hover Effekt von Kocsten auf Codepen https://codepen.io/kocsten */

.glow-on-hover {
    width: 100px;
    height: 30px;
    border: none;
    outline: none;
    color: #fff;
    background: rgba(255, 255, 255, .0);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
	margin-right: 5px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000;
}

.glow-on-hover:active:after {
    background: rgba(255, 255, 255, .75);
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .75);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* ENDE *** Geiler Hover Effekt */

/* START *** HR-Tag Regenbogen von Kanha Sahu auf Codepen https://codepen.io/kanhasahu/pen/PNaZZG */
hr{
	margin: 100px;
	border: none;
	height: 2px; 
}
hr.rainbow2{
    background: #ff0000;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff0000), color-stop(25%,#ffff00), color-stop(50%,#00ff00), color-stop(75%,#00ffff), color-stop(100%,#0000ff));
    background: -webkit-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
    background: -moz-linear-gradient(-45deg, #ff0000 0%, #ffff00 25%, #00ff00 50%, #00ffff 75%, #0000ff 100%);
    background: -o-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
    background: -ms-linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
    background: linear-gradient(-45deg, #ff0000 0%,#ffff00 25%,#00ff00 50%,#00ffff 75%,#0000ff 100%);
}

/* ENDE *** HR-Tag Regenbogen */
.content{
	/*background:url(../bild/trans-weiss.png);*/
	background-color: rgba(255, 255, 255, .75);
  	height: 600px;
}