@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;
	}

    *{padding:0;margin:0;}
	body{background:linear-gradient(0.25turn,rgb(0,38,77),rgb(0,38,70));background:#000;background-size:cover;background-position:center;height:100vh;overflow:hidden;color:black;}
	.circ div{position:fixed;width:60px;height:60px;background-color:transparent;border:6px solid rgba(255,255,255,0.5);border-radius:50%;}
	.circ div:nth-child(1){top:12%;left:42%;animation:animate 10s linear infinite;}
	.circ div:nth-child(2){top:70%;left:50%;animation:animate 7s linear infinite;}
	.circ div:nth-child(3){top:17%;left:6%;animation:animate 9s linear infinite;}
	.circ div:nth-child(4){top:20%;left:60%;animation:animate 10s linear infinite;}
	.circ div:nth-child(5){top:67%;left:10%;animation:animate 6s linear infinite;}
	.circ div:nth-child(6){top:80%;left:70%;animation:animate 12s linear infinite;}
	.circ div:nth-child(7){top:60%;left:80%;animation:animate 15s linear infinite;}
	.circ div:nth-child(8){top:32%;left:25%;animation:animate 16s linear infinite;}
	.circ div:nth-child(9){top:90%;left:25%;animation:animate 9s linear infinite;}
	.circ div:nth-child(10){top:20%;left:80%;animation:animate 5s linear infinite;}
	@keyframes animate{0%{transform:scale(0) translateY(0) rotate(0);opacity:.8;}100%{transform:scale(1.3) translateY(-90px) rotate(360deg);opacity:0;}}
	
    html, body {position: relative;height: 100%;}
    body {font-family: 'Itim', cursive;font-size: 14px;color: #fff;text-shadow: 0px 2px 2px rgba(0, 0, 0, .5);margin: 0;padding: 0;}
    
    #bodyblur{opacity:.45;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);transition:all 1s ease;} 
    #sthisblur{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;}
    #wallpaper{width:100%;height:100%;transform: scale(1.3);transition:all 1.3s ease;}
    
    p{margin-left:50px;margin-right:70px;text-align:left}
    #ket{margin:20px}

    .swiper {width: 100%;height: 100%;padding:0;margin:0;}
    .swiper-slide {text-align: center;font-size: 18px;/*background: #fff;*/display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top:-100px;}
    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
    .swiper-pagination{margin-bottom:27vh}
    .swiper-pagination-bullet-active{background-color: #fff !important;opacity:1 !important}
    .swiper-pagination-bullet{background-color:rgba(255,255,255, 1) !important;}
    .swiper-button-next, .swiper-button-prev{display:flex;top:unset;bottom:-100px}
    
    .kotak{margin:0;margin-top:-50px;transition:all .7s ease;padding:20px;text-align:center;max-width:80%;width:400px;min-height:270px;position:relative;z-index:1}
    .dkotak{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.2);}

    .sembunyi{display: none !important;}
    .stiker{display:flex;justify-content:center;align-items:center;margin-left:auto;margin-right:auto;margin-bottom:20px;transition:all .75s ease}
    .stiker img{width:90px;height:90px;box-shadow: 0 4px 30px rgba(255,255,255, 0.3);background: rgba(255, 255, 255, 0.7);border: 3px solid rgba(255, 255, 255, 1);border-radius: 50%;box-shadow:0 8px 32px rgba(0,0,0,0.2);padding:10px;}
    .stiker img.sty2{background:none;filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));box-shadow: none;backdrop-filter: none;-webkit-backdrop-filter: none;border: none;border-radius: 0;padding:0;width: auto;height:90px;}
	.merah{color:red}
	.kuning{color:yellow}
	.putih{text-shadow:none;padding-left:8px;padding-right:8px;padding-top:2px;padding-bottom:2px;background-color:white;border-radius:12px}
	span.garismerah{border-bottom:2px solid red}
	span.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{margin-top:10px;position:relative;width:100%;height: 190px; overflow: auto;background-color:none;}
    .blocktext > h1{text-align:left;padding-left:40px;padding-right:60px;}
    
    #Tombol, #Tombol2{margin-top:20px;position:relative;margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;list-style:none;transition:all .5s ease;}
    #Tombol a, #Tombol2 a{display:inline-flex;align-items:center; margin:0;margin:10px;transition:all .2s ease;padding:10px;outline:0;border:2px solid white;border-radius:30px;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}
    #Tombol, #Tombol2{position:relative;opacity:0;margin-left:auto;margin-right:auto;display:flex;justify-content:center;align-items:center;list-style:none;transition:all .5s ease;}
    #Tombol a, #Tombol2 a{display:inline-flex;align-items:center; margin:0;margin:10px;transition:all .2s ease;padding:10px;outline:0;border:2px solid white;border-radius:30px;line-height:15px;background:rgba(255, 182, 193, .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}
    #Tombol2{margin-top:10px}
    
    .swal2-modal > *{font-size:16px;color:white}
	.swal2-title{line-height:1.3em;font-size:18px;text-align:center;padding:15px 30px 0 30px;}
	.swal2-timer-progress-bar-container > *{opacity:.7;background:#00B6FF;margin:0 2px}
	.swal2-modal{background: rgba(0,0,0, .4);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);box-shadow: 0 4px 30px rgba(255,255,255, 0.3);border: 2.5px solid #fff;border-radius:30px;max-width:300px;top:-100px;}
	.swal2-image{background: rgba(255, 255, 255, 0.7);border: 3px solid rgba(255, 255, 255, 1);border-radius: 50%;box-shadow:0 8px 32px rgba(0,0,0,0.2);border-radius: 50%;padding:10px;}
	.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel{font-family:var(--gaya-font);font-weight:700;position: relative;background-color: #EB39C2;color: #fff;border: 2.5px solid #fff;border-radius:30px;padding:8px 12px;z-index: 1;transition: all 0.2s;}
	.swal2-input,.swal2-textarea,.swal2-select {font-family:var(--gaya-font);border-radius: 30px !important;border: 2.5px solid #fff;width:80%}
	.swal2-input:focus,.swal2-textarea:focus,.swal2-select:focus {outline: none;box-shadow: none;border: 2.5px solid #fff;}
	.swal2-confirm:focus, .swal2-cancel:focus {box-shadow: none;outline: none !important;}