@import url('https://fonts.googleapis.com/css2?family=Itim:wght@300;400;500;700&display=swap');
:root {
--gaya-font: 'Quicksand', sans-serif;
--gaya-font1: 'Itim', cursive;
--gaya-font2: 'Nunito Sans', sans-serif;
--gaya-font3: 'Caveat', cursive;
}
body {overflow:hidden;background:#000;font-family:var(--gaya-font1); margin: 0;}
body::before{content:"\00A9  Rayys | feelthisray";color:white;opacity:.5;font-size:10px;position:fixed;bottom:25px;right:25px;z-index:150}
@keyframes jj{0%  {transform: scale(1.2);} 50% {transform: scale(1.5);} 100% {transform: scale(1);}}
@keyframes rto{from {transform:scale(1);} to {transform:scale(1.1);}}
#counter{position:fixed;color:white;font-size:11px;top:20px;left:20px;z-index:999}

#bodyblur{opacity:.5;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.5s ease;}
#wallpaper2, #wallpaper3, #wallpaper4{display:none}
    @keyframes jj{0%  {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);}}
#beneranblur{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);transition:all 3s ease;}
    
section {position:relative;z-index:99;padding: 0;height: 100vh;display: flex; flex-direction: column;align-items:left;text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);border-top:1px solid #fff}
section {background:none;background-image: var(--bg);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;}
section.first{border-top:0 solid #fff}
/*section.first > img{opacity:0}*/
section:nth-child(even) {color:white}
section:nth-child(odd) {color:white}
section > :first-child {margin-top:100px}

.stiker{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);width:90px;height:90px;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 1s ease}
section .wp img{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;background:none;border:none}
section .wp::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);}

h1 {font-size: 2rem;}
h1, h2, h3,h4,h5{margin: 0;text-align: center;margin: 1rem 0;}
p{color:white;font-size:17px;font-family:var(--gaya-font1);line-height:1.5em;text-align:center}
p.bold{font-weight:700}
a {color:white;text-decoration: none;transition: all 0.3s ease-in-out;&:hover, &:focus, &:active {color: #f1e8d9;}}
#hsatu{transition: all .3s ease}
#judulakhir{z-index:100;font-size:30px;font-family:var(--gaya-font3);transition:all .5s ease}
#teksnimasi, #kalimatakhir, #palingakhir{z-index:100;margin-right:auto;margin-left:auto;font-size:14px;font-family:var(--gaya-font2);}
#teksnimasi{text-align:left;margin-left:50px;margin-right:70px;}
#kalimatakhir, #teksnimasi{font-size:17px;font-family:var(--gaya-font1);font-weight:400}
.tipeA{font-family:var(--gaya-font);}

svg{vertical-align: middle;width: 22px;height: 22px;fill: #fff}
.menu{position: fixed;bottom: 23vh;width:100%;z-index: 999;display:flex;justify-content:center;align-items:center;transition: all 1s ease}
.tombol{background-color: rgba(255,255,255,.4);border-radius: 50%;overflow: hidden;display: flex;align-items: center;justify-content: center;width: 45px;height: 45px;-webkit-transition: all .2s ease-out;transition: all .2s ease-out}
.tombol svg{margin: auto;fill: #fff}

#Tombol, #TombolWA{position:relative;opacity:0;margin-left:auto;margin-right:auto;display:flex;align-items:left;list-style:none;transition:all 1s ease;}
#Tombol a, #TombolWA 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:8px;line-height:15px;background:rgba(0,0,0,.5);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}

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

#counter{position:fixed;color:white;font-size:11px;top:20px;left:20px;z-index:999}
.fa-heart {opacity:.3;color:white;font-size: 20px;position: fixed;animation:  heartMove linear 1;top: -10vh;z-index: 999;}
@keyframes heartMove {0%{transform: translateY(-10vh) ;} 100%{transform: translateY(100vh) ;}}

.swal2-modal > *{font-size:16px;color:white}
.swal2-title{line-height:1.3em;font-size:17px;text-align:center;padding:15px 30px 0 30px;}
.swal2-timer-progress-bar-container > *{opacity:.7;background:#00B6FF;margin:0 14px}
.swal2-modal{background: rgba(0,0,0, .6);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);box-shadow: 0 4px 30px rgba(255,255,255, 0.3);border: 1px solid rgba(255, 255, 255, 1);border-radius: 12px;max-width:325px;top:-60px;}
.swal2-image{background: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 30px rgba(255,255,255, 0.3);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.3);border-radius: 50%;padding:10px;}
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel{position: relative;background-color: #4839eb;color: #fff;border-radius:18px;z-index: 1;transition: all 0.2s;}

svg{vertical-align: middle;width: 22px;height: 22px;fill: #fff}
.lovein svg{stroke:#ff0000 !important;stroke-width:1.3;fill:none !important;width:35px;height:35px}

.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);
    }
            }
            
.lg{font-size:18px;}
b.merah{color:red}
b.kuning{color:yellow}
b.putih{text-shadow:none;padding-left:3px;padding-right:3px;background:white;border-radius:5px}
b.garismerah{border-bottom:2px solid red}
b.gariskuning{border-bottom:2px solid yellow}
.scale0{opacity:0;transform:scale(0);transition:all 1s ease}
.scale1{opacity:1;transform:scale(1);transition:all 1s ease}