* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
min-height: 100%;
overflow: hidden;
}

.bgimg {
min-height: 100vh;
min-height: 100dvh;
height: 100vh;
height: 100dvh;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
overflow: hidden;
}

.background-picture {
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
z-index: 0;
}

.background-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: nebula-zoom 30s ease-in-out infinite alternate;
transform-origin: center center;
will-change: transform;
}

.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: min(84vw, 980px);
z-index: 2;
}

.main-logo {
display: block;
width: 100%;
height: auto;
}

.logo-subtitle {
margin-top: clamp(8px, 1.6vw, 18px);
font-family: "Montserrat", sans-serif;
font-size: clamp(16px, 2.4vw, 28px);
font-weight: 300;
line-height: 1.25;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.94);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68);
}

.bottom-copy {
position: absolute;
bottom: max(14px, env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-family: "Montserrat", sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.4;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
z-index: 2;
}

.image-caption,
.footer-line {
max-width: 100%;
color: rgba(255, 255, 255, 0.86);
}

.image-caption {
text-decoration: none;
}

.image-caption:hover,
.image-caption:focus {
color: rgba(255, 255, 255, 0.96);
text-decoration: underline;
}

@keyframes nebula-zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.06);
}
}