/* all pages have sections header/main/footer stacked in a column,
   header is always visible, footer is displayed at the bottom unless
   main is taller than viewport height. */
body {
   /* flex container styles */
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;

   /* fill entire viewport */
   min-height: 100vh;
   min-width: 100vw;
   width: 100%;
   height: 100%;
}

header {
   /* flex item style */
   flex-shrink: 0;

   /* keep header at top of viewport */
   /* position: sticky;
   top: 0;
   z-index: 9; */

   display: flex;
   flex-direction: column;
   align-items: center;

   width: 100%;

   /* border: 1px black solid;
   border-radius: 1px; */
}

header .content {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

   /* limit width to content constraints */
   min-width: var(--content-min-width);
   max-width: var(--content-max-width);
   width: 100%;

   /* border: 1px black solid;
   border-radius: 1px; */
}

header .logo {

   margin: 1rem auto;

   width: 80%;
   max-height: 96px;

   /* border: 1px red solid;
   border-radius: 1px; */
}

main {
   /* flex item style */
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: auto;

   /* limit width to content constraints */
   min-width: var(--content-min-width);
   max-width: var(--content-max-width);
   width: 100%;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   /* opacity: 0;
   animation: fadein;
   animation-duration: 2s;
   animation-delay: 4s;
   animation-fill-mode: forwards; */

}

main .welcome-message {

   h1, p {
      margin: 20px;
   }
}


footer {
   /* flex item style */
   flex-shrink: 0;

   /* limit width to content constraints */
   min-width: var(--content-min-width);
   max-width: var(--content-max-width);
   width: 100%;

   display: flex;
   flex-direction: row;
   justify-content: center;

   padding: 1rem;
}

.splash {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
   width: 100vw;
   height: 100vh;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   opacity: 1;
   animation: fadeout;
   animation-duration: 2s;
   animation-delay: 4s;
   animation-fill-mode: forwards;
}

.splash img {
   max-width: 500px;
   width: 80%;

   opacity: 1;
   animation: fadeout;
   animation-duration: 2s;
   animation-delay: 2s;
   animation-fill-mode: forwards;

}

@keyframes fadein {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

@keyframes fadeout {
   from {
      opacity: 1;
   }
   to {
      opacity: 0;
   }
}