@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Itim&display=swap');

:root {
--poppins: 'Poppins', sans-serif;
--nunito: 'Nunito Sans', sans-serif;
--caveat: 'Caveat', cursive;
--quicksand: 'Quicksand', sans-serif;
--itim: 'Itim', cursive;
--inter: 'Inter', sans-serif;
}

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #000;
      font-family: 'Itim', cursive;
      font-size: 14px;
      color: #fff;
      text-shadow: 0px 2px 2px rgba(0, 0, 0, .5);
      margin: 0;
      padding: 0;
    }
    
    #background{opacity:.6;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);transition:all 1s ease;} 
#wallpaper{animation: jj 10s infinite;width:100%;height:100%;transform: scale(1);transition:all 1.3s ease;}
#wallpaper2, #wallpaper3, #wallpaper4{display:none}
    @keyframes jj{0%  {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);}}

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /*background: #fff;*/
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top:-100px;
    }
    
    p{margin-left:60px;margin-right:60px;text-align:left}

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .swiper-pagination{margin-bottom:20vh}
    .swiper-pagination-bullet-active{background-color: #fff !important;opacity:1 !important}
    .swiper-pagination-bullet{background-color:rgba(158, 158, 158, 1) !important;}
    .swiper-button-next, .swiper-button-prev{opacity:0;cursor:none}
    .swiper-button-next:hover, .swiper-button-prev:hover{opacity:0}
    .swiper-button-prev{display:none}
    
    .sembunyi{display: none !important;}
    .stiker{display:flex;justify-content:center;align-items:center;width:90px;height:90px;margin-left:auto;margin-right:auto;box-shadow: 0 4px 30px rgba(255,255,255, 0.3);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);background: rgba(255, 255, 255, 0.7);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 50%;padding:10px;margin-bottom:20px;transition:all .75s ease}
.stiker img{width:85px;height:85px;border-radius:50%}
b.merah{color:red}
b.kuning{color:yellow}
b.putih{text-shadow:none;padding-left:8px;padding-right:8px;padding-top:2px;padding-bottom:2px;background-color:white;border-radius:12px}
.garismerah{border-bottom:2px solid red}
.gariskuning{border-bottom:2px solid yellow}
    p{color:white;font-size:15px;line-height:1.5em;}
    .scale0{opacity:0;transform: scale(0);transition: all .9s ease;}
    .scale1{opacity:1;transform: scale(1);transition: all .9s ease;}
    svg{vertical-align: middle;width: 22px;height: 22px;fill: #fff}
    .heart-icon {z-index:100;width: 30px;height: 30px;position: fixed;animation:  heartMove linear 1;top: -10vh;}

@keyframes heartMove {
  0% {transform: translateY(-10vh);}
  100% {transform: translateY(100vh);}
}
    svg.line{fill: none;stroke: #fff;stroke-width: 2;animation: moving .7s linear infinite alternate;}
    .spin{animation: spin 3s linear infinite alternate;}
@keyframes spin {
  from {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-20deg);
  }
}
@keyframes moving {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(3px);
  }
}
    .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background:#000;z-index:100;}
    .loading-message {font-size: 13px;text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);color:white;text-align: center;}
    .blocklove{display: none;flex-direction: column;justify-content: center;align-items: center;}
    .lovein{background:#fff;color:#FF0900;border-radius:50%;width:40px;height:40px;padding:10px;font-size:30px;display:flex;align-items:center;text-align:center;justify-content:center;transition:all .3s ease;}
    .lovein:hover{transform: scale(.9);color:#FF0900;}
    .lovein svg{stroke:#FF0600;width:30px;height:30px}
    
    .blocktext{position:relative;width:100%;height: 420px; overflow: auto;}
    #Tombol{position:relative;margin-top:20px;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;list-style:none;transition:all 1s ease;}
#Tombol a{cursor:pointer;display:inline-flex;align-items:center; margin:0;margin:10px;transition:all .2s ease;padding:10px;outline:0;border:1px solid white;border-radius:12px;line-height:15px;background:rgba(0,0,0,.3);color:white;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;box-shadow: rgba(255,255,255, 0.15) 0px 7px 29px 0px;z-index:1}