:root {
    --foreground: rgb(183, 183, 183);
    --background_subtle: rgb(230, 230, 230);
    --background: rgb(162, 162, 162);
    --highlight_color: rgb(57, 179, 186);
}

body {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0);
    padding-left: 50px;
    padding-top: 50px;
    
  }

  .ear {
    padding-left: 50px;
    padding-top: 50px;

    fill: var(--background_subtle);
    
    stroke: var(--foreground);
    stroke-opacity: 0;

    stroke-width: 5px;

    animation: fill-in-stroke 0.5s forwards;
    animation-delay: 3s;
    animation-timing-function: linear;

  }

.svg-container {
    animation: to-visible 2s forwards;
    animation-delay: 0s;
    animation-timing-function: linear;
  }


  .highlight {
    animation: to-highlight 0.5s forwards;
    animation-delay: 5s;
    animation-timing-function: linear;
  }

  .subtitle {
    animation: to-visible 0.5s forwards;
    animation-delay: 4s;
    animation-timing-function: linear;

  }

  .coming-soon {
    animation: to-visible 0.5s forwards;
    animation-delay: 6s;
    animation-timing-function: linear;

    stroke-width: 0;
  }


  .outer {
    stroke: var(--foreground);
    stroke-width: 10;
    stroke-linecap: round;
    fill: none;

    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

    animation: dash_outer 3s forwards;
    animation-timing-function: linear;


  }
  
  .inner {
    stroke: var(--background_subtle);
    stroke-width: 8;
    stroke-linecap: round;

    fill: none;

    stroke-dasharray: 1000;
    stroke-dashoffset: 300;

    animation: dash_inner 3s forwards;
    animation-timing-function: linear;

  }

  .inner_bg {
    stroke: var(--foreground);
    stroke-width: 7.75;
    stroke-linecap: round;

    fill: none;
  }  

  .robot_center {
    fill: var(--foreground);
    fill-opacity: 0;

    animation: fill-in 0.5s forwards;
    animation-delay: 3s;
  }

  .robot {
    fill: var(--foreground);
    fill-opacity: 0;
    animation: fill-in 0.5s forwards;
    animation-delay: 3s;
    animation-timing-function: linear;

  }



  .robot:hover {
  fill: #37b3ba;
}
  .ear_canal {
    fill: none;
    stroke: var(--foreground);
    stroke-opacity: 0;
    stroke-width: 6px;

    animation: fill-in-stroke 0.5s  forwards;
    animation-delay: 3s;
    animation-timing-function: linear;

    /* stroke: #f00;
    stroke-width: 1; */
  }



  @keyframes dash_outer {
    to {
      stroke-dashoffset: 500;
    }
  }
  
  @keyframes dash_inner {
    to {
      stroke-dashoffset: 1000;
    }
  }

  @keyframes fill-in {
    to {
      fill-opacity: 1;
    }
  }
  
  @keyframes fill-in-stroke {
    to {
      stroke-opacity: 1;
    }
  }

  @keyframes to-highlight {
    to { 
      color: var(--highlight_color); 
    }
}

  @keyframes to-visible {
    to { opacity: 1; }
}