/* =========================================================
   CENTERGY — BASE SHELL
   Shared application-shell styles.
   ========================================================= */

header{
  position:relative;
  z-index:100;
}

.page-background{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:.2;
  z-index:-1;
}

.logo-img{
  height:2.75rem;
}

@media(min-width:640px){
  .logo-img{
    height:3rem;
  }
}

/* Mobile only:
   Keep the menu strip and app shell on the same nearly
   edge-to-edge width, with only a thin blue border. */
@media(max-width:639px){

  body > div.container:has(.menu-shell),
  main.container{
    width:calc(100vw - 4px);
    max-width:none;
    margin-left:2px;
    margin-right:2px;
    padding-left:0;
    padding-right:0;
    transform:none;
  }

  .app-shell{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:4px;
    padding-right:4px;
    transform:none;
  }
}

@keyframes showupToast{
  0%{
    opacity:0;
    max-height:0;
    margin-bottom:0;
    transform:translateY(-4px);
  }

  10%{
    opacity:1;
    max-height:200px;
    margin-bottom:.75rem;
    transform:translateY(0);
  }

  80%{
    opacity:1;
    max-height:200px;
    margin-bottom:.75rem;
  }

  100%{
    opacity:0;
    max-height:0;
    margin-bottom:0;
    transform:translateY(-6px);
  }
}

.showup-toast{
  overflow:hidden;
  animation:showupToast 6s ease-in-out forwards;
}