@import "https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap";

:root {
  --light-brown: rgba(51, 22, 22, 0);
  --dark-brown: rgba(5, 21, 10, 0.45);
  --hover-brown: rgba(220, 105, 105, 0.61);
  --olive-green: rgba(140, 164, 123, 0.9);
  --batch-green: #c8e6c9;
  --dark-red: rgba(150, 17, 64, 0.89);
  --hover-red: #790d16;
  --hover-green: #a7df89;
  --pale-green: #e8f5e9;
  --transparent-beige: rgba(33, 33, 22, 0.55);
  --light-beige: #efebe9;
  --subtle-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  --creamy-ivory: #ffffff;
  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.2);
  --muted-leather: #a98c8d;
  --soft-gold: #ffd54f;
  --rich-velvet: #6a1b9a;
  --harmonious-blue: rgba(93, 99, 117, 0.65);
  --harmonious-purple: #ba68c8;
  --harmonious-green: #64a868;
  --harmonious-yellow: rgba(0, 74, 170, 0.84);
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}


@keyframes appear-black {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes disappear {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

.table-background {
  background-image: url('/static/images/Logo-weiss.svg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  animation: appear 4.5s ease-out;
  transition: opacity 0.5s ease-in-out;
}


.table-background-main {
  background-image: url('/static/images/Logo-weiss.svg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  animation: appear 4.5s ease-out;
  transition: opacity 0.5s ease-in-out;
}
.table-background-black {
  background-image: url('/static/images/Logo-weiss.svg');
  background-size: 110%; /* Das Bild wird größer gemacht */
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  animation: appear-black 4.5s ease-out;
  transition: opacity 0.5s ease-in-out;
}

body.fade-out .table-background,
body.fade-out .table-background-black {
  animation: disappear 2.5s ease-out forwards;
}