#timeline{overflow:hidden;padding:3em 1em 4em 1em;background-color:var(--bg2)}#timeline h3{margin:auto;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;margin-bottom:1.5rem}#timeline .card{padding:1em;border-radius:1em;position:relative;background-color:var(--bg1)}#call_in{color:#fff;max-width:100%;padding:4em 1em;text-align:center;position:relative;box-shadow:0 7px 25px #ccc;background-image:var(--grad1);background-color:var(--color1)}#call_in img{top:-2em;left:.25em;max-width:25em;position:absolute;width:calc(100% - 2em)}#call_in img:nth-child(2){top:unset;left:unset;bottom:-2em;right:.25em}@media only screen and (min-width: 750px){#timeline>div{margin:auto;padding:0 3em;max-width:1200px}#call_in{padding:6em 3em}#call_in h2{font-size:3em}}@media only screen and (min-width: 2000px){#call_in img:nth-child(1){left:calc(100vw - 2000px + 1em)}#call_in img:nth-child(2){right:calc(100vw - 2000px + 1em)}}@media (prefers-color-scheme: dark){#_3d_element img{content:url('main_graphic_dark.png')}#call_in{box-shadow:none}}
.circle{
  position: absolute;
  z-index: -2;
  animation-name: float;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.circle.zero{
  top: 3em;
  width: 1em;
  left: -1.5em;
  animation-delay: .75s;
}
.circle.one{
  top: -1em;
  left: -1em;
  width: 3em;
}
.circle.two{
  top: -1.5em;
  right: -3em;
  width: 8em;
  animation-delay: .25s;
  animation-direction: reverse;
}
.circle.tree{
  right: 5em;
  width: 1.5em;
  top: -1.5em;
  animation-delay: .75s;
  animation-direction: reverse;
}
.circle.four{
  top: -2em;
  right: -1em;
  width: 2.5em;
  animation-delay: 1s;
  animation-direction: reverse;
}
.circle.five{
  left: -2em;
  width: 5em;
  bottom: -1.5em;
  animation-delay: .75s;
  animation-direction: reverse;
}
.container{
  z-index: 2;
  margin:auto;
  max-width:25em;
  /* background: red; */
  margin-bottom:1em;
  position: relative;
}