/* Page loader. Squares animation from Uiverse.io by Nawsome (slimy-tiger-93), MIT license. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffbf1;
  transition: opacity .4s ease, visibility .4s ease;
  /* safety net: never block the page if the script did not run */
  animation: loader-failsafe .4s ease 10s forwards;
}
.loader.done { opacity: 0; visibility: hidden; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

.loadingspinner {
  --square: 16px;
  --offset: 20px;
  --duration: 2.4s;
  --delay: 0.2s;
  --timing-function: ease-in-out;
  --in-duration: 0.4s;
  --in-delay: 0.1s;
  --in-timing-function: ease-out;
  width: calc(3 * var(--offset) + var(--square));
  height: calc(2 * var(--offset) + var(--square));
  position: relative;
}

.loadingspinner div {
  position: absolute;
  width: var(--square);
  height: var(--square);
}

.loadingspinner #square1 {
  background: #f56741;
  left: 0;
  top: 0;
  animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,
             squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square2 {
  background: #5079e4;
  left: 0;
  top: var(--offset);
  animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,
             squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square3 {
  background: #ffc700;
  left: var(--offset);
  top: var(--offset);
  animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,
             squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square4 {
  background: #30a368;
  left: calc(2 * var(--offset));
  top: var(--offset);
  animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,
             squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}
.loadingspinner #square5 {
  background: #dd717e;
  left: calc(3 * var(--offset));
  top: var(--offset);
  animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,
             squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}

@keyframes square1 {
  0%      { left: 0; top: 0; }
  8.333%  { left: 0; top: var(--offset); }
  100%    { left: 0; top: var(--offset); }
}
@keyframes square2 {
  0%      { left: 0; top: var(--offset); }
  8.333%  { left: 0; top: calc(2 * var(--offset)); }
  16.67%  { left: var(--offset); top: calc(2 * var(--offset)); }
  25.00%  { left: var(--offset); top: var(--offset); }
  83.33%  { left: var(--offset); top: var(--offset); }
  91.67%  { left: var(--offset); top: 0; }
  100%    { left: 0; top: 0; }
}
@keyframes square3 {
  0%, 100% { left: var(--offset); top: var(--offset); }
  16.67%  { left: var(--offset); top: var(--offset); }
  25.00%  { left: var(--offset); top: 0; }
  33.33%  { left: calc(2 * var(--offset)); top: 0; }
  41.67%  { left: calc(2 * var(--offset)); top: var(--offset); }
  66.67%  { left: calc(2 * var(--offset)); top: var(--offset); }
  75.00%  { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
  83.33%  { left: var(--offset); top: calc(2 * var(--offset)); }
  91.67%  { left: var(--offset); top: var(--offset); }
}
@keyframes square4 {
  0%      { left: calc(2 * var(--offset)); top: var(--offset); }
  33.33%  { left: calc(2 * var(--offset)); top: var(--offset); }
  41.67%  { left: calc(2 * var(--offset)); top: calc(2 * var(--offset)); }
  50.00%  { left: calc(3 * var(--offset)); top: calc(2 * var(--offset)); }
  58.33%  { left: calc(3 * var(--offset)); top: var(--offset); }
  100%    { left: calc(3 * var(--offset)); top: var(--offset); }
}
@keyframes square5 {
  0%      { left: calc(3 * var(--offset)); top: var(--offset); }
  50.00%  { left: calc(3 * var(--offset)); top: var(--offset); }
  58.33%  { left: calc(3 * var(--offset)); top: 0; }
  66.67%  { left: calc(2 * var(--offset)); top: 0; }
  75.00%  { left: calc(2 * var(--offset)); top: var(--offset); }
  100%    { left: calc(2 * var(--offset)); top: var(--offset); }
}
@keyframes squarefadein {
  0%   { transform: scale(.75); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}