/* 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;

   width: 100%;
}

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

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

   padding: 0.5rem;

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

header .brand-banner {
   display: flex;
   flex-direction: row;
   align-items: center;

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

header .logo {

   height: 2.5em;

   /* margin: 0px 5px; */
   padding: 0.25em;
   margin-right: 0.5em;

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

header .logo-text {
   text-align: center;

   font-size: 1.em;

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

header .logo-text large {
   font-size: 1.2em;
}

@media only screen and (min-width: 360px) {
   header .logo-text {
      font-size: 1.25em;
   }
}

@media only screen and (min-width: 480px) {
   header .logo-text {
      font-size: 1.75em;
   }
}

header .menu {
   display: none;
}

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;
}

main .welcome-message {

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

   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;

   background-color: var(--primary-color-dark);

   opacity: 1;
   /* transition: opacity 3s ease-in; */
   animation: fadeout;
   animation-duration: 2s;
   animation-delay: 1s;
   animation-fill-mode: forwards;
}

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

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

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