html, body {
    height: 100%;
    margin: 0;
  }

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background: #f0f0f0;
    animation: fadeToBlack 1s ease forwards;
    justify-content: center;
    align-items: center;
}

.logo-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fadeToBlack {
    from {
      background-color: #666666;
    }
    to {
      background-color: transparent;
    }
  }

body {
    background-color: black;
    color: #666666;
    font-family: 'Orbitron', sans-serif;
  }

.hero {
    background-image: url('/static/bg2_low.jpg');
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

  .hero.loaded {
    background-image: url('/static/bg2.webp');
  }

.logo {
    min-width:512px;
    height:auto;

    opacity: 0;
    visibility: hidden;
    animation: fadeIn 1s ease-in-out forwards;
}

.logo.loaded {
    opacity: 1;
}

@keyframes fadeIn {
    0% {
      opacity: 0;
      visibility: hidden;
    }
    100% {
      opacity: 1;
      visibility: visible;
    }
}

@media (max-width: 768px) {
    .logo {
      min-width:512px;
      width: 80%;
      height: auto;
    }
  }

footer {
    font-size:0.6em;
}