/* Color Variables */
:root {
  --color-black-grey: #2e3234;
  --color-signal-black: #282828;
  --color-black-brown: #211f20;
  --color-jet-black: #0a0a0a;
  --color-signal-white: #f4f4f4;
}

/* Color Classes */
.color-black-grey {
  color: var(--color-black-grey);
}
.color-signal-black {
  color: var(--color-signal-black);
}
.color-black-brown {
  color: var(--color-black-brown);
}
.color-jet-black {
  color: var(--color-jet-black);
}
.color-signal-white {
  color: var(--color-signal-white);
}

.background-black-grey {
  background-color: var(--color-black-grey);
}
.background-signal-black {
  background-color: var(--color-signal-black);
}
.background-black-brown {
  background-color: var(--color-black-brown);
}
.background-jet-black {
  background-color: var(--color-jet-black);
}
.background-signal-white {
  background-color: var(--color-signal-white);
}

/* Base Styles */
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

main {
  min-height: 90vh;
}

/* Ensure responsive images maintain aspect ratio */
picture img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Animation for homepage */
.adg-100 {
  animation: background-change 50s infinite;
  -webkit-animation: background-change 50s infinite;
}

@keyframes background-change {
  0% {
    background: var(--color-signal-black);
    color: var(--color-signal-white);
  }
  25% {
    background: var(--color-jet-black);
    color: var(--color-signal-white);
  }
  50% {
    background: var(--color-black-brown);
    color: var(--color-jet-black);
  }
  75% {
    background: var(--color-black-grey);
    color: var(--color-signal-white);
  }
  100% {
    background: var(--color-signal-black);
    color: var(--color-signal-white);
  }
}

@-webkit-keyframes background-change {
  0% {
    background: var(--color-signal-black);
    color: var(--color-signal-white);
  }
  25% {
    background: var(--color-jet-black);
    color: var(--color-signal-white);
  }
  50% {
    background: var(--color-black-brown);
    color: var(--color-jet-black);
  }
  75% {
    background: var(--color-black-grey);
    color: var(--color-signal-white);
  }
  100% {
    background: var(--color-signal-black);
    color: var(--color-signal-white);
  }
}

.adg-100 svg {
  max-width: 40%;
}

.adg-100 svg path {
  fill: var(--color-signal-white);
  animation: logo-change 50s infinite;
  -webkit-animation: logo-change 50s infinite;
}

@keyframes logo-change {
  0% {
    fill: var(--color-signal-white);
  }
  25% {
    fill: var(--color-signal-white);
  }
  50% {
    fill: var(--color-jet-black);
  }
  75% {
    fill: var(--color-signal-black);
  }
  100% {
    fill: var(--color-signal-white);
  }
}

@-webkit-keyframes logo-change {
  0% {
    fill: var(--color-signal-white);
  }
  25% {
    fill: var(--color-signal-white);
  }
  50% {
    fill: var(--color-jet-black);
  }
  75% {
    fill: var(--color-signal-black);
  }
  100% {
    fill: var(--color-signal-white);
  }
}

.link {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}