.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  z-index: 1000;
}

#logoKlein {
  width: 250px;
  height: auto;
  position: relative;
}

#overlay.changebackground {
  animation: changeBackgroundColor 1s ease-in-out;
}

#logoKlein.shrink {
  animation: moveLogo 1s ease-in-out;
  position: absolute;
  transform: unset;
}

.d-none {
  display: none;
}

.main-container {
  display: none;
}

.main-container.show {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@keyframes moveLogo {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
  }
  100% {
    top: 16px;
    left: 16px;
    width: 100px;
  }
}

@keyframes changeBackgroundColor {
  0% {
    background-color: rgba(246,247,248,1);
  } 
  100% {
    background-color: rgba(246,247,248,0);
  } 
}