*,
*::before,
*::after {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

:root {
  --total-time: 10s;
  --coffe-delay: calc(var(--total-time) / 3.5);
  --coffe-time: calc(var(--total-time) / 4);
  --cup-delay: calc(var(--total-time) / 2.7);
  --cup-time: calc(var(--total-time) / 3);
  --under-delay: calc(var(--total-time) / 1.5);
  --under-time: calc(var(--total-time) / 3.75);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000000;
}

.container {
  width: 540px;
  height: 540px;
  background: #f1f1f1;
  box-shadow: 0 5px 30px rgb(199, 199, 199);
}

.coffee {
  fill: #d3935b;
  opacity: 0;
  animation: anim var(--coffe-time) linear var(--coffe-delay);
  animation-fill-mode: forwards;
}

.cup {
  fill: #6aa1d1;
  opacity: 0;
  animation: anim var(--cup-time) linear var(--cup-delay);
  animation-fill-mode: forwards;
}

.under {
  fill: #d3a5a5;
  opacity: 0;
  animation: anim var(--under-time) linear var(--under-delay);
  animation-fill-mode: forwards;
}

.line {
  fill: none;
  stroke-width: 1;
  stroke: rgb(78, 78, 78);
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: line var(--total-time) ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes anim {
  to {
    opacity: 1;
  }
}