body {
    background-color: #fff;
  }

  .bg  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #main-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 80%, rgba(15, 14, 14, .4) 100%), url(../images/mt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  .code-bakers{
    fill=opacity: 0%;
    stroke: black;
    stroke-width: 0.5px;
    /*fill: #250c77;*/
    fill: #250c77;
    stroke: #250c77;
  }
  .code-bakers .code{
    fill: #eb2188;
    stroke:  #eb2188;
  }
  .yeti_avatar .path {
    fill=opacity: 0%;
    fill: #edf4f7;
    animation: draw_yeti 5s linear forwards;
    stroke: #250c77;

  }
  .yeti_fingers{
    opacity: 0%;
    animation: draw_yeti_fingers 5s linear forwards;
  }
  .text .path {
    animation: draw_text 5s linear forwards;
  }
  .lines{
    //opacity: 0%;
    //animation: draw_text_lines 5s linear forwards;
  }

   @keyframes draw_yeti{
    0%,15%{
      stroke-dashoffset: 300;
    }
     0%,60%{
        fill-opacity:0%;

     }
    60% {

      stroke-dashoffset: 0;
    }
    100% {
       fill-opacity:100%;
      stroke-dashoffset: 0;
    }

  }
  @keyframes draw_yeti_fingers{
    0%,60%{
       opacity:0%;
    }

   100% {
      opacity:100%;
     stroke-dashoffset: 0;
   }

 }
  @keyframes draw_text{
     0%,15%{
      stroke-dashoffset: 300;
    }
     0%,60%{
        fill-opacity:0%;
     }
     60% {
       stroke-dashoffset: 0;
     }
     100% {
      stroke-dashoffset: 0;
       stroke-width: 0;
       fill-opacity:100%;
     }
   }
    @keyframes draw_text_lines{
     0%,60%{
        opacity:0%;
     }
     100% {
      opacity:100%;
     }
   }