@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Quicksand:wght@300;400;700&display=swap');

/* Font Selections
font-family: 'Comfortaa', cursive;
font-family: 'Quicksand', sans-serif; */

/* Theme Colors 
Dark Pink: #f4899d
Light Pink: #f8c1ba
Dark Blue: #3d6799
Light Blue: #7ad3f7
Dark Orange: #ff6f02
Light Orange: #fcb040
Green: #aae071 */

/* Preloader */

.preloader {
	display:block;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #7ad3f7;
   z-index: 100000;	
}

.load-logo {
	width: 250px;
	margin-bottom: 10px;
}

.wrapperanimate{
    width:200px;
	margin-left: 175px;
    transform: translate(-50%, -50%);
}

.circle {
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #f4899d;
    left:20%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:55%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:5%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:20%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 55%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:5%;
    animation-delay: .3s;
}
.wrapperanimate span{
    position: absolute;
    top:75px;
	font-weight: 700;
    font-size: 20px;
	text-align: center;
    letter-spacing: 12px;
    color: #fff;
    left:20%;
}

/* Theme Elements */

.pink-gradient {
    background: rgb(254, 213, 221);
    background: linear-gradient(180deg, rgba(254, 213, 221, 1) 0%, rgba(244, 137, 157, 1) 100%);
}

.blue-gradient {
    background: #3d6799;
    background: linear-gradient(0deg, #3d6799 0%, #7ad3f7 100%);
}

.white-bg {
    background-color: #fff !important;
}

.dark-blue-bg {
    background-color: #3d6799 !important;
}

.light-blue-bg {
    background-color: #7ad3f7 !important;
}

.drop-shadow {
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.text-shadow {
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

.text-glow {
    filter: drop-shadow(0px 2px 3px rgba(255, 255, 255, 1));
}

.bold {
    font-weight: 700;
}

.white-text {
    color: #fff;
}

.dark-blue-text {
    color: #3d6799;
}

.dark-pink-text {
    color: #f4899d;
}

.quicksand {
    font-family: 'Quicksand', sans-serif;
}


/* Navigation */

.nav-height {
    height: 80px;
}

.nav-btn {
    height: 70px;
    padding: 10px 5px;
    transition: all .2s ease-in-out;
}

.nav-btn:hover {
    transform: scale(1.05);
}

.nav-gap {
    gap: 0;
}

.menu-btn {
    height: 50px;
    padding: 10px;
    cursor: pointer;
}

.mobile-close {
    width: 30px;
}

.mob-nav-btn {
    height: 100px;
    padding: 20px;
}


.mob-critters {
    width: 100%;
    height: 125px;
    background-color: #7ad3f7;
    background-image: url(../img/mobile_bg_01.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.mob-activity {
    width: 100%;
    height: 125px;
    background-color: #aae071;
    background-image: url(../img/mobile_bg_05.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
}

.mob-author {
    width: 100%;
    height: 125px;
    background-color: #f4899d;
    background-image: url(../img/mobile_bg_02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
}

.mob-illustrator {
    width: 100%;
    height: 125px;
    background-color: #fcb040;
    background-image: url(../img/mobile_bg_03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
}

.mob-buy {
    width: 100%;
    height: 125px;
    background-color: #3d6799;
    background-image: url(../img/mobile_bg_04.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

.mob-bg {
    background-color: #fff;
    background-image: url(../img/Mobil_Menu_BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.navLogo {
    width: 200px;
    margin-right: 10px;
}


/* Food Animation */

.bg-food-animation {
    background-image: url(../img/bgAnimationPattern.png);
    animation: food_anim 60s linear infinite;
}

@keyframes food_anim {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -2000px 0;
    }
}


/* Section Styling */

.logo {
    width: 100%;
    max-width: 650px;
}

.blurb {
    z-index: 100;
}

.buy-btn {
    width: 270px;
    padding: 20px;
    transition: all .2s ease-in-out;
}

.buy-btn:hover {
    transform: scale(1.1);
}

.about-section-auth {
    width: 100%;
    max-width: 350px;
    padding: 20px;
}

.about-section-ill {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.about-book-bg {
    background-image: url(../img/Critter_BG.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.activity-bg {
    background-image: url(../img/Activity_BG.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-title {
    width: 100%;
    max-width: 400px;
}

.character {
    width: 100%;
    max-width: 350px;
    transition: all .2s ease-in-out;
}

.character:hover {
    transform: scale(1.1);
}

.act_btn {
    width: 100%;
    max-width: 200px;
    transition: all .2s ease-in-out;
}

.act_btn:hover {
    transform: scale(1.1);
}

.about-link {
    width: 80px;
    transition: all .2s ease-in-out;
}

.about-link:hover {
    transform: scale(1.1);
}

/* Subscription Form */

@font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }
  
  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }
  
  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }
  
  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Lucida Grande", sans-serif;
    color: #f4899d;
  }
  
  #sib-container input::placeholder {
    text-align: left;
    font-family: "Lucida Grande", sans-serif;
    color: #f4899d;
  }
  
  #sib-container textarea::placeholder {
    text-align: left;
    font-family: "Lucida Grande", sans-serif;
    color: #f4899d;
  }
  
  .subscribe {
      width: 200px;
  }
  
  .grecaptcha-badge {
      visibility: hidden;
  }

/* Footer */

footer {
    width: 100%;
    box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.2);
}