body {
  margin: 0;
}

.toolbar {
  background-color: #04a;
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
}

.workinprogress { /* work in progress field inside toolbar */
  color: white;
  font-size: small;
  font-style: italic;
  font-weight: bold;
  white-space: nowrap;

  position: absolute;
  left: 50%;
  top: 50%;
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* spinner start */
.spinoverlay {
/*
  background-color: rgba(0, 0, 0, 0.275);
*/
  display: table;
  height:100vh;
  width:100%;
  position: fixed;
  top: 0;
  z-index: 5;
}

.spincenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

/* alternative spinner method (mine) */
@media screen and (orientation: portrait) {
  .spinner-img {
    height: 20vw;
    width: 20vw;
    animation: loading-spinner-img 12s ease infinite;
  }
}

@media screen and (orientation: landscape) {
  .spinner-img {
    height: 20vh;
    width: 20vh;
    animation: loading-spinner-img 12s ease infinite;
  }
}

@keyframes loading-spinner-img {
  0%, 100% {
    animation-timing-function: linear; /* cubic-bezier(0.5, 0, 1, 0.5); */
  }
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(3600deg);
  }
}
/* alternative spinner metod end */
/* spinner end */

/* footer start */
.footer {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 100%;
}

.footer::before  {
  content: "";
  position: absolute;
  top: 5%;
  height: 200%;
  width: 100%;
  z-index: -1;
  background-image: url("clouds.svg");
  background-position: 50% 0%;
  transform: rotate(180deg);
}

.copyright { /* copyright field inside footer */
  color: gray;
  font-size: small;
  font-style: italic;
  white-space: nowrap;

  position: absolute;
  left: 50%;
  top: 80%;
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) { /* 16/9 ratio screen assumed */
  body {
    min-height: 91vh;
    padding-bottom: 9vh;
  }
  .container { /* needed for centering trick */
    height: calc(78vh - 60px); /* 6/7 of residual space minus average toolbar size */
  }
  .footer {
    height: 9vh;
  }
  .footer::before {
    background-size: 195% 100%;
  }

}

@media screen and (orientation: landscape) { /* 16/9 ratio screen assumed */
  body {
    min-height: 84vh;
    padding-bottom: 16vh;
  }
  .container { /* needed for centering trick */
    height: calc(72vh - 60px); /* 6/7 of residual space minus average toolbar size */
  }
  .footer {
    height: 16vh;
  }
  .footer::before {
    background-size: 110% 100%;
  }
}
/* footer end */