* {
  box-sizing: border-box;
}

#splash {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  color: white;
  height: 100%;
  width: 100%;
  padding: 20px 40px;
  position: fixed;
  z-index: +999;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  /* url("https://png.pngtree.com/background/20230612/original/pngtree-forest-with-trees-glowing-on-their-top-picture-image_3177550.jpg")
      no-repeat bottom/cover; */
  background-color: rgb(0, 0, 0);
  animation: flash 1000ms ease-in 8.5s 1 reverse forwards;
}

#splash * {
  font-family: "Fredoka", sans-serif;
  text-align: center;
}

#splash img {
  object-fit: contain;
  height: 40px;
}

#splash #logo-container {
  /* border: 1px solid red; */
  line-height: 0.9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 280px;
  /* padding: 20px; */
}

#splash #logo-container h1 {
  text-align: center;
  line-height: 0.9;
  margin: 0 0 0px;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: initial;
  text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.6);
  text-align: center;
  z-index: +999;
}

#splash #logo-container .logo-card {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0%;
  left: 0%;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url("./assets/boy2.png") no-repeat center/120px;
  background-blend-mode: normal, normal;
  background-color: var(--card-bgcolor);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 20px;
  box-shadow: inset 1px 3px 8px 2px rgba(255, 255, 255, 0.3),
    inset -2px -3px 8px rgba(0, 0, 0, 0.3),
    1px 3px 35px rgba(199, 155, 250, 0.3);
}

#splash #logo-container .logo-card.left {
  background-color: purple;
  transform: translate(-25%, 0%) rotateZ(-35deg) scale(0.98);
  box-shadow: inset 1px 3px 8px 2px rgba(255, 255, 255, 0.3),
    inset -2px -3px 8px rgba(0, 0, 0, 0.3),
    1px 3px 35px rgba(199, 155, 250, 0.3);
}

#splash #logo-container .logo-card.middle {
  background-color: #dc143c;
  transform: translate(0%, -5%) rotateZ(2deg) scale(1.08, 1.02);
  box-shadow: inset 1px 3px 8px 2px rgba(255, 255, 255, 0.3),
    inset -2px -3px 8px rgba(0, 0, 0, 0.3),
    1px 3px 35px rgba(138, 0, 34, 0.3);
}

#splash #logo-container .logo-card.right {
  background-color: rgb(207, 89, 4);
  /* background-color: #dc143c; */
  /* top: 0%;
  right: 50%; */
  transform: translate(25%, 0%) rotateZ(30deg) scale(0.98);
  box-shadow: inset 1px 3px 8px 2px rgba(255, 255, 255, 0.3),
    inset -2px -3px 8px rgba(0, 0, 0, 0.3),
    1px 3px 35px rgba(128, 58, 1, 0.3);
}

#splash p {
  /* font-family: "Varela Round", sans-serif; */
  font-weight: 400;
  text-transform: capitalize;
  font-size: 20px;
  margin-top: 2vh;
  z-index: +999;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.7);
  /* animation: flash 1000ms ease 0s infinite alternate forwards; */
}

@media only screen and (max-width: 768px) {
  /* #splash h1 {
    margin: 0 0 -120px;
  } */
}