* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  /* === fonts === */
  --FF: Arial, Helvetica, sans-serif;
  /* === border raduis === */
  --BR: 50%;
  /* === backgrounds === */
  --BACKGROUND-COLOR: black;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.splash-header {
  display: grid;
  height: 100dvh;
  grid-template-rows: 1fr;
  place-content: center;
}

.splash-header__app-name {
  animation: change-color 1s ease-in-out;
}

.splash-header__logo {
  background-color: rgba(128, 128, 128, 0.279);
  height: 90px;
  width: 90px;
  border-radius: var(--BR);
  margin: 4rem 0 0 3.4em;
}

.splash-header__title-container {
  margin: 0 0 4rem 0;
}

.splash-header__checkmark-stem {
  width: 10px;
  height: 25px;
  background-color: var(--BACKGROUND-COLOR);
  transform: translate(20px, 33px) rotate(-40deg);
  animation: join-from-top 1s ease-in-out;
}

.splash-header__checkmark-kick {
  width: 10px;
  height: 50px;
  background-color: var(--BACKGROUND-COLOR);
  transform: translate(46px, -5px) rotate(49deg);
  animation: join-from-bottom 1s ease-in-out;
}

.splash-header__loader {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.splash-header__loader-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--BR);
  background-color: var(--BACKGROUND-COLOR);
  margin: 0.8rem 0 0 0;
  animation: processing 2s ease-in-out;
}

@keyframes join-from-top {
  from {
    transform: translate(20px) rotate(100deg);
  }
  to {
    transform: translate(20px, 33px) rotate(-40deg);
  }
}

@keyframes join-from-bottom {
  from {
    transform: translate(20px) rotate(-100deg);
  }
  to {
    transform: translate(46px, -5px) rotate(49deg);
  }
}

@keyframes change-color {
  from {
    opacity: 0;
  }
  to {
    color: blue;
    opacity: 1;
  }
}

@keyframes processing {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}