/* ---------------Robot Setup--------------- */
.intro 
{
  height: 120vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.robot
{
  position: relative;
  width:192px;
  height:auto;
  display:flex;
  justify-content: center;
  align-items: center;
}
.eyes
{
  position: absolute;
  width:192px;
  height:auto; 
  display: flex;
  margin-top: -192px;
  margin-left: 0px;
  display:flex;
  justify-content: center;
  align-items: center;
  animation: lookAround 2s ease-in-out;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;

}
.speech
{
  margin-top: 0px;
  margin-left: 0px;
  padding: 10px 18px;
  background: white;
  border-radius: 20px;
  opacity: 0;
  justify-content: right;
  align-items: center;
  
  animation: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
/* ---------------Eye Animation--------------- */
@keyframes lookAround
{
  0%
    {
      transform: translateX(0px);
    }
  20%
    {
      transform: translateX(-20px);
    }
  40%
    {
      transform: translateX(20px);
    }
  60%
    {
      transform: translateX(0px);
    }
  80%
    {
      transform: translateX(0px);
    }
  100%
    {
      transform: translateX(-20px);
    }
}
/* ---------------Hello Animation--------------- */
@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}