header, nav, main, footer {
    max-width: 100%;
}

* {
    box-sizing: border-box;
}


html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
	overflow-x: hidden;
}


body {
    background-color: black;
    color: orange;
    font-family: "Courier New", Courier, monospace;
	position: relative;
    z-index: 0;
	flex-grow: 1;
}


header {
    background-color: black;
	position: relative;
    width: 100%;
	height: auto;
	overflow: hidden;
	flex-shrink: 0;
	margin-bottom: 20px;
}

footer {
	background-color: black;
    color: orange;
    font-family: "Courier New", Courier, monospace;
}


.img-flicker-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

#headerImage, .flicker-layer {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.1s ease-in-out;
}


.flicker-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

@keyframes flickerAnimation {
    0%, 90%, 100% { opacity: 0; }
    91%, 92% { opacity: 1; }
    93%, 94% { opacity: 0; }
    95%, 96% { opacity: 1; }
    97%, 98% { opacity: 0; }
    99%, 100% { opacity: 1; }
}

.flicker-layer {
    animation: flickerAnimation 6s infinite;
}

.img-flicker-container:hover #headerImage {
    opacity: 0;
}

.img-flicker-container:hover .flicker-layer {
    opacity: 1;
    animation: none;
}

nav {
    background-color: black;
    display: flex;
    justify-content: center;
	align-items: center;
    padding: 1em 0;
    margin: 0 auto;
    width: 100%;
	flex-shrink: 0;
	z-index: 0;
	border-top: 1px dotted orange;
    border-bottom: 1px dotted orange;
}


nav img {
    margin: 0;
    padding: 0;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
	padding: 0;
    margin: 0;
}


.nav-button {
    max-width: 130px;
    height: auto;
	cursor: pointer;
	transition: background-image 0.3s ease-in-out;
	margin: 0 1em;
}

#nav1:hover {
    content: url('NAV/ZumBuch_on.png');
}

#nav2:hover {
    content: url('NAV/Leseprobe_on.png');
}

#nav4:hover {
    content: url('NAV/News_on.png');
}

#nav5:hover {
    content: url('NAV/ZumAutor_on.png');
}

#nav6:hover {
    content: url('NAV/Universum_on.png');
}


.galaxy-background {
    display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: row;
	padding: 1em;
    position: relative;
    flex-grow: 1;
    width: 100%;
    min-height: 0;
    height: 100%;
    z-index: 1;
}


.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
    opacity: 0;
}


.background-image.wave1 {
    background-image: url('main/wave1.png');
    animation: pulse 50s infinite 0s;
}

.background-image.wave2 {
    background-image: url('main/wave2.png');
    animation: pulse1 50s infinite 10s;
}

.background-image.wave3 {
    background-image: url('main/wave3.png');
    animation: pulse1 50s infinite 20s;
}

.background-image.wave4 {
    background-image: url('main/wave4.png');
    animation: pulse1 50s infinite 30s;
}

.background-image.wave5 {
    background-image: url('main/wave5.png');
    animation: pulse1 50s infinite 40s;
}


@keyframes pulse {
    0%, 10% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.6;
    }
    40% {
        opacity: 0.1;
    }
}

@keyframes pulse1 {
    0%, 10% {
        opacity: 0;
    }
    20% {
        opacity: 0.7;
    }
    40% {
        opacity: 0;
    }
}


.image-container {
	position: relative;
    margin: 2em;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1/1;
	display: flex;
    justify-content: center;
    align-items: center;
}

.image-container a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.image-container a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.laser-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1%;
    border: 5px solid rgba(255, 165, 0, 0.8);
    border-radius: 50%;
    animation: pulse-orange 2s infinite;
    z-index: 1;
}

.image-container:hover .laser-ring {
    border-color: rgba(255, 0, 0, 0.8);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 0 40px rgba(255, 165, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 165, 0, 0.8), 0 0 80px rgba(255, 165, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 0 40px rgba(255, 165, 0, 0.8);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 0, 0, 0.8), 0 0 80px rgba(255, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.8);
    }
}


.hines-ring {
    border-color: rgba(128, 0, 128, 0.8);
    animation: pulse-hines 2s infinite;
}

.image-container:hover .hines-ring {
    border-color: rgba(255, 255, 255, 0.8);
    animation: pulse-hines-hover 2s infinite;
}

@keyframes pulse-hines {
    0% {
        box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 40px rgba(128, 0, 128, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(128, 0, 128, 0.8), 0 0 80px rgba(128, 0, 128, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 40px rgba(128, 0, 128, 0.8);
    }
}

@keyframes pulse-hines-hover {
    0% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 0 80px rgba(255, 255, 255, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.8);
    }
}


.vexnet-ring {
  border-color: rgba(0, 255, 255, 0.8);
  animation: pulse-vexnet 2s infinite;
}

.image-container:hover .vexnet-ring {
  border-color: rgba(0, 255, 255, 1);
  animation: pulse-vexnet-hover 2s infinite;
}

@keyframes pulse-vexnet {
  0% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.8), 0 0 80px rgba(0, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.8);
  }
}

@keyframes pulse-vexnet-hover {
  0% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 255, 1), 0 0 80px rgba(0, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 1);
  }
}


footer {
    background-color: black;
    padding: 5px;
    text-align: center;
    border-top: 1px solid orange;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 50px;
	max-width: 100%;
}

.footer-links a {
    text-decoration: none;
    color: orange;
    font-size: 0.875rem;
    font-weight: normal;
}

.footer-links a:hover {
    color: yellow;
    text-decoration: underline;
}

@media (max-width: 768px) {
			
	.galaxy-background {
        flex-direction: column;
    }
	
	.image-container {
		max-width: 200px;
	}
		
	.nav-button {
        max-width: 90px;
		height: auto;
		cursor: pointer;
		transition: background-image 0.3s ease-in-out;
		margin: 0 2px;
    }
		
    .footer-links {
		flex-wrap: wrap;
        gap: 1em;
    }
	
	.footer-links a {
		white-space: nowrap;
	}
}