/* style.css */

body {
  background-color: #0e0e0e;
  color: #fff;
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 0;
  background: linear-gradient(135deg, #0e0e0e, #1a1a1a);
}

.container.text-center {
  display: flex;
  flex-direction: column;
  align-items: center;      /* center children horizontally */
  justify-content: center;
  text-align: center;
}

/* Responsive Logo */
.logo {
  width: 40%;                /* scales with container */
  max-width: 140px;          /* cap maximum size */
  height: auto;              /* keeps aspect ratio */
  aspect-ratio: 1 / 1;       /* ensures square ratio for logo */
  background-image: url('img/logo.png');
  background-size: contain;   /* scale image proportionally */
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  margin: 0 auto 1em auto;   /* center horizontally + spacing below */
  -webkit-user-drag: none;
  user-drag: none;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  opacity: 0;                 /* start invisible */
  animation: fadeIn 4s forwards; /* fade in over 2 seconds */
  animation-delay: 1s;         /* wait 1 second before fading in */
}

p {
  color: #aaa;
  font-size: 1.25em;
  margin-top: 0.5em;
}

/* Keyframes for fade-in */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Copyright notice */
.copyright {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: #666;
  font-size: 0.9em;
  opacity: 0;
  animation: fadeInCopyright 2s forwards;
  animation-delay: 3s; /* appears after main H1 fades in */
}

@keyframes fadeInCopyright {
  to {
    opacity: 1;
  }
}