.fg {
    position: fixed;
    left: 0px;
    top: 0px;
    background: #000000d0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    animation: ani 1s forwards;
    flex-direction: column;
}


@keyframes ani {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }




.frog_img {
    opacity: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    margin: auto;
    width: 20%;
    /* animation: ani 1s forwards; */
}

@media (max-width: 992px) {
    .frog_img {
        width: 60%;
  }
}



.close_btn {
    position: fixed;
    right: 0px;
    top: 0px;
    float: right;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    appearance: button;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    &:hover {
        transform: scale(1.3);
    }
    &:active {
        outline: none;
    }
}

.close_btn_text {
    color: whitesmoke;
    font-size: 30px;
    transition: transform 300ms;
    
}



.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
	        animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) ;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-8-1 23:14:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }

  .slide-out-left {
	-webkit-animation: slide-out-left 6s cubic-bezier(.41,.24,.41,.45) both;
	        animation: slide-out-left 6s cubic-bezier(.41,.24,.41,.45) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-1 23:30:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
    }
  }
  @keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
    }
  }
  

  
.vibrate-1 {
	-webkit-animation: vibrate-1 0.3s linear infinite both;
	        animation: vibrate-1 0.3s linear infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-2 0:36:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
 @-webkit-keyframes vibrate-1 {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  @keyframes vibrate-1 {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  

.heartbeat {
	-webkit-animation: heartbeat 0.65s ease-in-out infinite both;
	        animation: heartbeat 0.65s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-2 0:38:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: scale(1.31);
            transform: scale(1.31);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  85% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  50% {
    -webkit-transform: scale(1.31);
            transform: scale(1.31);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  85% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


.fade-in {
	-webkit-animation: fade-in 2.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 2.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-2 1:13:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
 @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }