@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');


body{
    font-family: "Inclusive Sans", sans-serif;
    main{
        position: relative;
    }

    .bowlArea{
        position: absolute;
        z-index: 1;
        top: 5%;
        right:5%;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        color: #1D7A7A;

        .comment{
            position: absolute;
            border-radius: 100rem;
            background: #E56E2F;
            color: white;
            padding: 0.2rem 0.8rem;
            font-size: 1rem;
            font-weight: 600;
            border: none;
            z-index: 1;
            top: 50%;
            left: -84%;
        }

        .comment:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            right: -1rem;
            top: 20%;
            border: 0.5rem solid transparent;
            border-left: 1rem solid #E56E2F;
            border-radius: 0.6rem;
            z-index: 1;
        }


        .guppyDeath{
            position: absolute;
            border: 0.2rem solid #D0D0D0;
            border-radius: 2rem;
            padding: 0.5rem 1rem;
            font-size: 1rem;
            font-weight: 600;
            background: #E6E6E6;
            color: #212121;
            width: fit-content;
            align-items: center;
            z-index: 1;
        }

        .waterNotif{
            position: absolute;
            display: inline-block;
            z-index: 1;
             left: 50%;
            transform: translate(-50%, -50%);
            top: 30%;
           padding: 0.2rem 1rem;
           border-radius: 100rem;
           background: #B1DEDF;
           color: #1D7A7A;
           font-size: 1rem;
           font-weight: 600;
        }
    }

    .fishBowl{
        height: 10rem;
        overflow: hidden;
        width: 10rem;
        padding-block-start: 1rem;
        border-top: 0rem;
        border-radius: 5rem;
        border-block-start: none;
        background-color: rgba(226, 250, 250, 0.562);
        mask-image: linear-gradient(
            0deg,
            black 0 9rem,
            transparent 1px 200px
            );
        
    }

    .water{
      height: 100%;
      display: flex;
      justify-content: end;
      flex-direction: column;

      .waterTop{
          background-color: #B1DEDF;
          height: 1rem;
          border-radius: 100rem;
          transform: translateY(0.5rem);
        mask-image: radial-gradient(50% 42%, black 100%, transparent 100%);
      }


      .waterLevel{
        background-color: #CFF6F6;
        height: 80%;
        width: 100%;
      }
    }

    .innerBowl {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      .fish{
          height: 3rem;
          position: relative;
          top: 30%;
          pointer-events: all;
      }

      

      .fish:hover{
       transform: scale(1.4);
      }

      .applyFishShake{
        animation-name: fishShake;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      /* Fixing the position of fish when it dies */
      .deadFishPosition{
        top: 7.5rem;
        left: 4rem;
        z-index: 1;
      }
      .grass{
          position: absolute;
          width: 5rem;
          height: 6rem;
          top: 5.1rem;
          left: 14%;
      }
    }
    
}


/* ANIMATIONS */

/* Bowl first appears */
@keyframes bowlAppear {
    from {
        scale: 0;
    }
    to{
        scale: 1;
    }
}

.applyBowlAppear{
    animation: bowlAppear;
    animation-duration: 0.3s;
}


/* Water level notification */
@keyframes waterNotifAppear {
     0% { opacity: 0; transform: translateY(-0.5rem) }
    25% { opacity: 1; transform: translateY(0rem) }
    50% { opacity: 1; transform: translateY(0rem) }
    75% { opacity: 0; transform: translateY(0.5rem) }
    100% { opacity: 0; }
}

.applywaterNotifAppear{
    animation: waterNotifAppear 4s;
}

/* Bowl shake on message sent */
/* got the animation from here https://codepen.io/EeKay/pen/OJBMpxK  */
@keyframes shake {
    0% { transform: translateX(0) }
    25% { transform: translateX(0.5rem) }
    50% { transform: translateX(-0.5rem) }
    75% { transform: translateX(0.5rem) }
    100% { transform: translateX(0) }
    }

.applyShake {
animation: shake;
animation-duration: 0.4s;
}


/* Fish swim across the bowl and back */
@keyframes fishMove {
        from {
    left: 6rem;
  }
  50%{
    left: 0;
  }
  51%{
    left: -1rem;
    transform: scaleX(1);
  }
  54%{
    left:-1rem;
    transform: scaleX(-1);
  }

  96%{
    left: 7rem;
    transform: scaleX(-1);
  }
  98.9%{
    left: 7rem;
    transform: scaleX(1);
  }
  99%{
    left:6rem;
  }

  to {
    left: 6rem;
  }
}

.applyFishMove {
    animation-name: fishMove;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Fish swim frantic when water level is very low */
@keyframes fishShake {
        from {
            
    left: 6rem;
  }
  50%{
    left: 0;
  }
  51%{
    left: -1rem;
    transform: scaleX(1);
  }
  54%{
    left:-1rem;
    transform: scaleX(-1);
  }

  96%{
    left: 7rem;
    transform: scaleX(-1);
  }
  98.9%{
    left: 7rem;
    transform: scaleX(1);
  }
  99%{
    left:6rem;
  }

  to {
    left: 6rem;
  }
}

/* Initial fish scare  */
@keyframes initialFishShake {
           from {
            
    left: 6rem;
  }
  50%{
    left: 0;
  }
  51%{
    left: -1rem;
    transform: scaleX(1);
  }
  54%{
    left:-1rem;
    transform: scaleX(-1);
  }

  96%{
    left: 7rem;
    transform: scaleX(-1);
  }
  98.9%{
    left: 7rem;
    transform: scaleX(1);
  }
  99%{
    left:6rem;
  }

  to {
    left: 6rem;
  }
    }

.applyInitialFishShake{
animation: initialFishShake;
animation-duration: 0.8s;
animation-iteration-count: 2;
}