/* Base Imports */
@import url('brand/css/text.css');
@import url('brand/css/color.css');
@import url('brand/css/media.css');

/* Component Imports */
@import url('brand/css/components/nav.css');
@import url('brand/css/components/contact.css');
@import url('brand/css/components/blog.css');
@import url('brand/css/components/table.css');

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

/* Loader */

#loader {
  position: fixed;
  inset: 0;

  background: var(--color-off-white);
  display: grid;
  
  place-items: center;
  z-index: 9999;
  transition: opacity 220ms ease;
}

#loader img {
  /* Roughly 2x larger on desktop, capped by viewport on small screens */
  width: clamp(480px, 90vw, 1280px);
  height: auto;
  image-rendering: pixelated;
  max-width: 100vw;
}

@media (max-width: 768px) {
  #loader img {
    width: 95vw;
    max-width: 100vw;
  }
}

@media (max-width: 480px) {
  #loader img {
    width: 200vw !important;
    height: auto !important;
    max-width: 200vw;
    min-width: unset;
  }
}

/* Footer */

footer {
  font-family: 'Curtive Mono', monospace;
  background-color: var(--dark-blue-text);
  color: var(--light-blue-bg); /* text readable against dark blue */
  min-height: 10vh;
  padding: 1.5rem 1rem;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 768px) {
  footer {
    padding: 1.75rem 1.25rem;
    font-size: 0.95rem;
  }
}