/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
}

#headerScroller {
  transition: color 0.1s linear; /* smooth transition */
}

/* Layout Container */
.layout-container {
  display: grid;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
  grid-template-columns: 1fr; /* Mobile first default */
  grid-template-areas: 
    "header"
    "main"
    "footer";
  min-height: 100vh;
}

/* Tablet & Desktop */
@media (min-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "main"
      "footer";
  }
}

/* Areas */
.layout-header { 
  grid-area: header; 
  background-color: #e0e7ff; 
  transition: background-color 0.5s linear; /* smooth transition */
}

.layout-footer { 
  grid-area: footer; 
  background-color: #000000; 
}

.layout-main { 
  grid-area: main; 
  background-color: #000000; 
}

/* these are for layout within the layout */
.container {
    font-size: 0; /* Removes whitespace gap between inline-block elements */
}
.box {
    text-align: center;
    display: inline-block;
    width: 50%;
    height: 500px;
    margin: 0px;
    font-size: 16px; /* Reset font size for content */
}

/* CSS animation for blinking text */
.blink {
  animation: blinker 0.5s steps(1) infinite;
}

@keyframes blinker {
  50% {
    opacity: 0; /* Hide text halfway through animation */
  }
}