body {
  --color-background: #ebedf0;
  --color-element: #ffffff;
  --color-element-inactive: #cbcbd1;
  --color-accent: #009EE3;
}

body.dark {
  --color-background: #15141d;
  --color-element: #31313f;
  --color-element-inactive: #505064;
  --color-accent: #009EE3;
}

#default-splashscreen {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
}

.default-splashscreen--visible {
  height: 100%;
  width: 100%;
  display: block !important;
}

#default-splashscreen .splash-screen__logo {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 252px;
  display: none;
}

.logo-visible {
  display: block !important;
}

#default-splashscreen .splash-screen__logo svg {
  height: 100%;
  width: 100%;
}

#default-splashscreen .splash-screen__brand {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  display: none;
}

#default-splashscreen .splash-screen__background {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 10vh;
  align-items: center;
  justify-items: center;
  grid-row-gap: 0;
  padding: 24px;
  animation: background-falling 60s linear infinite;
}

#default-splashscreen .splash-screen__background--rising {
  animation: background-rising 60s linear infinite;
}

#default-splashscreen .splash-screen__background--still {
  animation: none;
}

#default-splashscreen .splash-screen__icon {
  grid-column: span 2;
  position: relative;
}

#default-splashscreen .splash-screen__icon * {
  stroke: var(--color-element-inactive);
}

#default-splashscreen .splash-screen__icon:nth-child(3n) * {
  stroke: var(--color-element);
}

#default-splashscreen .splash-screen__icon:nth-child(6n) * {
  stroke: var(--color-accent);
}

#default-splashscreen .splash-screen__icon:nth-child(5n + 1), #default-splashscreen .splash-screen__icon:nth-child(5n + 2) {
  grid-column: span 3;
}

#default-splashscreen .splash-screen__icon:nth-child(5n + 1) {
  position: relative;
  left: 90%;
}

#default-splashscreen .splash-screen__icon:nth-child(5n + 2) {
  position: relative;
  left: -90%;
}

#default-splashscreen .splash-screen__icon:nth-child(5n + 3) {
  position: relative;
  left: -25%;
}

#default-splashscreen .splash-screen__icon:nth-child(5n + 5) {
  position: relative;
  left: 25%;
}

#default-splashscreen .splash-screen__snowflake {
  animation: snowfall 60s linear infinite;
}

#default-splashscreen .splash-screen__heart:nth-child(3n), #default-splashscreen .splash-screen__heart:nth-child(6n) {
  animation: pulse 2s infinite;
}

#default-splashscreen .splash-screen__santa-hat {
  animation: shakeSantaHat 4s infinite;
}

#default-splashscreen .splash-screen__christmas-tree:nth-child(3n) {
  animation: shakeTree 4s infinite;
  animation-delay: 500ms;
}

#default-splashscreen .splash-screen__christmas-tree:nth-child(6n) {
  animation: shakeTree 4s infinite;
}

#default-splashscreen .splash-screen__flower {
  animation: blossom 8s infinite;
  animation-delay: 2s;
}

#default-splashscreen .splash-screen__flower:nth-child(3n) {
  animation-delay: 2250ms;
}

#default-splashscreen .splash-screen__easter-egg {
  animation: shakeEgg 2s linear infinite;
}

#default-splashscreen .splash-screen__leaf {
  animation: objectSwing 2s infinite;
}

@keyframes background-falling {
  0% {
    transform: translate3d(0, -200vh, 0);
 }
  100% {
    transform: translate3d(0, 0, 0);
 }
}

@keyframes background-rising {
  0% {
    transform: translate3d(0, 0, 0);
 }
  100% {
    transform: translate3d(0, -300vh, 0);
 }
}

@keyframes snowfall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
 }
  25% {
    transform: translate3d(10px, 0, 0) rotate(360deg);
 }
  50% {
    transform: translate3d(-10px, 0, 0) rotate(-360deg);
 }
  75% {
    transform: translate3d(10px, 0, 0) rotate(360deg);
 }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
 }
}

@keyframes pulse {
  0% {
    transform: scale(1);
 }
  50% {
    transform: scale(1.3);
 }
  100% {
    transform: scale(1);
 }
}

@keyframes shakeSantaHat {
  0% {
    transform: rotate(-15deg);
 }
  25% {
    transform: rotate(15deg);
 }
  50% {
    transform: rotate(-15deg);
 }
  75% {
    transform: rotate(15deg);
 }
  100% {
    transform: rotate(-15deg);
 }
}

@keyframes shakeEgg {
  0% {
    transform: rotate(-15deg);
 }
  10% {
    transform: rotate(15deg);
 }
  20% {
    transform: rotate(-15deg);
 }
  30% {
    transform: rotate(15deg);
 }
  40% {
    transform: rotate(0deg);
 }
  100% {
    transform: rotate(0deg);
 }
}

@keyframes blossom {
  0% {
    opacity: 0;
 }
  20% {
    transform: rotate(5deg);
    opacity: 1;
 }
  40% {
    transform: rotate(-5deg);
 }
  60% {
    transform: rotate(5deg);
 }
  80% {
    transform: rotate(-5deg);
    opacity: 1;
 }
  100% {
    transform: rotate(5deg);
    opacity: 0;
 }
}

@keyframes shakeTree {
  0%, 100% {
    transform: translate3d(0, 0, 0);
 }
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
 }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
 }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
 }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
 }
}

@keyframes objectSwing {
  0% {
    transform: rotate(-6deg);
 }
  50% {
    transform: rotate(6deg);
 }
  100% {
    transform: rotate(-6deg);
 }
}