@font-face {
  font-family: 'makinas_scrap';
  src: url('Makinas-Scrap-5.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

#main_container {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center; }

.circle {
  overflow: visible;
  z-index: -1;
  stroke-linecap: round;
  position: absolute;
  width: 1em;
  height: 1em;
  fill: none;
  stroke-width: 5%;
  stroke: #a4d4ff;
  stroke-dasharray: 0 0 0 3.14159;
  stroke-dashoffset: .000001; }

.line {
  z-index: -1;
  position: absolute;
  width: 1em;
  height: 1em;
  fill: none;
  stroke-width: 6%;
  stroke-linecap: round;
  stroke: #a4d4ff;
  overflow: visible;
  top: 100%;
  stroke-dashoffset: -6;
  stroke-dasharray: 6; }

#line_2 {
  top: 140%; }

@keyframes line_1_move {
  0% {
    right: calc(50% - .2em);
    stroke-dashoffset: -6; }
  50% {
    stroke-dashoffset: 0; }
  100% {
    right: calc(50% + 3);
    stroke-dashoffset: 6; } }

@keyframes line_2_move {
  0% {
    right: calc(50% - .5em);
    stroke-dashoffset: -6; }
  50% {
    stroke-dashoffset: 0; }
  100% {
    right: calc(50% + 2);
    stroke-dashoffset: 6; } }

.text ~ .line {
  stroke-dashoffset: 6; }

.text ~ #line_1 {
  right: calc(50% + 3em);
  animation: ease-in-out line_1_move 2s 0s; }

.text ~ #line_2 {
  right: calc(50% + 2em);
  animation: ease-in-out line_2_move 1.75s .25s; }

.text ~ #circle_3 {
  animation: linear draw_circle 1.5s 0s; }

.text ~ #circle_4 {
  animation: linear draw_circle 1.5s .25s; }

.text ~ #circle_1 {
  animation: linear draw_circle 1.5s .125s; }

.text ~ #circle_2 {
  animation: linear draw_circle 1.5s .5s; }

@keyframes draw_circle {
  0% {
    transform: rotate(0deg);
    stroke-dasharray: 0 0 0 3.14159; }
  50% {
    stroke-dasharray: 0 1.57079 2.09439 0; }
  100% {
    transform: rotate(90deg);
    stroke-dasharray: 0 3.14159 0 0; } }

#circle_1 {
  bottom: 120%;
  right: calc(50% - 2.5em); }

#circle_2 {
  bottom: calc(210% - .5em);
  right: 50%; }

#circle_3 {
  top: calc(50% - 5em);
  left: calc(50% - 5em);
  width: 10em;
  height: 10em;
  stroke-width: 1.25%; }

#circle_4 {
  bottom: calc(210% - 1em);
  width: 2em;
  height: 2em;
  right: calc(50% - .5em);
  stroke-width: 2.5%; }

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

@keyframes grow_text {
  0% {
    transform: scale(.8);
  }
  62.5% {
    transform: scale(1);
  }
  100% {
    transform: scale(3);
  }
}

#text_container {
  position: relative;
  font-family: makinas_scrap;
  color: #83a9cc;
  /*#bde0ff*/
  font-size: calc(80vw / (6 * 3)); }

.text {
  transform: scale(3);
  animation: ease-out show 2s 0s, ease grow_text 3.2s 0s;
}