body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

body > div {
    width: 100%;
    height: 100%;
}

#footer {
    bottom: 30px;
    left: 30px;
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: baseline;
}

#phlogo {
    height: 100%;
}

#footer > span {
    color: #fff;
    font-family: sans-serif;
    padding-bottom: 7px;
    margin-top: auto;
    display: block;
    margin-left: 21px;
}

#fileInput {
    position: fixed;
    right: 30px;
    bottom: 30px;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
height: 60px;
  aspect-ratio: 1;
  display: none;
  animation: l8-0 1.5s infinite linear;
  position: fixed;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  background: #C01B81;
  clip-path: polygon(0 0%,100% 0,100% 100%);
  animation: inherit;
  animation-name: l8-1;
}
.loader:after {
  --s:-1;
}
@keyframes l8-0 {
  66%      {transform: skewX(0deg)}
  80%,100% {transform: skewX(-45deg)}
}
@keyframes l8-1 {
  0%   {transform:scale(var(--s,1)) translate(-0.5px,0)}
  33%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),calc(1px - 50%))}
  66%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),0%)}
  100% {transform:scale(var(--s,1)) translate(calc(0.5px - 50%),0%)}
}