/* ---------------Robot Setup--------------- */
/* removed height so thiers less space in the robot area */
/* moved flex-direction to robot group to fix speech bubble issue */
.intro 
{
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
}

.robots
{
  position: relative;
  display: flex;
  flex-direction: column; /* needed to make the robots next to each other */
  align-items: center;
}

/* removed display inline-block didnt work for what i wanted, changed to flex */
.robot
{
  width: 200px;
  height: 120px;
  background: #dddddd; /* light grey */
  border-radius: 20px;
  display: flex;
  flex-direction: column; /* needed to make the robots next to each other */
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.eyes
{
  display: flex;
  gap:30px;
}
.eye1
{
  animation-delay: 0.5s;
  width: 18px;
  height: 18px;
  background: #000000; /* black */
  border-radius: 50%;
  animation: lookAround 1.5s ease-in-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
}
.eye2
{
  animation-delay: 0.5s;
  width: 20px;
  height: 25px;
  background: #000000; /* black */
  border-radius: 20%;
  animation: lookAround 1.5s ease-in-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
}
.eye1 
{
  transition: transform 0.3s ease;
}
.eye2 
{
  transition: transform 0.3s ease;
}
.eye1 
{
  animation: lookRight 3s ease-in-out forwards;
}
.eye2 
{
  animation: lookLeft 2s ease-in-out forwards;
}
/* changed margin to absolute positioning and a top location */
.speech1, .speech2
{
  position: absolute;
  top: -40px;
  padding: 10px 18px;
  background: white;
  border-radius: 20px;
  opacity: 0;
  
  animation: fadeIn;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
/* ---------------Eye Animation--------------- */
@keyframes lookRight
{
  0%
    {
      transform: translateX(0px);
    }
  30%
    {
      transform: translateX(6px);
    }
  60%
    {
      transform: translateX(6px);
    }
  100%
    {
      transform: translateX(0px);
    }
}
@keyframes lookLeft
{
  0%
    {
      transform: translateX(0px);
    }
  30%
    {
      transform: translateX(-6px);
    }
  60%
    {
      transform: translateX(-6px);
    }
  100%
    {
      transform: translateX(0px);
    }
}
/* ---------------Hello Animation--------------- */
@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 1;
  }
}