@import url('https://fonts.googleapis.com/css2?family=Inter&family=Itim&display=swap');

:root {
    --warna-bg: rgba(0, 0, 0, .3);
    --warna-teks: #fff;
    --warna-bingkai:white;
    --bingkai: 8px;
    --bingkai-kiri: 2px solid var(--warna-bingkai);
    --bingkai-kanan: 2px solid var(--warna-bingkai);
    --gaya-font: 'Work Sans', sans-serif;
    --gaya-font2: 'Ubuntu', sans-serif;
    --gaya-font3: 'Lilita One', sans-serif;
    }
@keyframes fanim {0% {background-position: 0% 0%;}25% {background-position: 100% 100%;} 50% {background-position: 0% 100%;} 75% {background-position: 50% 50%;} 100% {background-position: 0% 0%;}}
body{background-color:#000;font-family:var(--gaya-font);padding: 20px 25px;-webkit-user-select: none; -ms-user-select: none; user-select: none;} a{text-decoration:none;}
body::before{content:"\00A9 Agus Purwanto | 2025";color:white;opacity:.7;font-size:10px;position:fixed;bottom:5px;right:5px;z-index:150}
#bodyblur{animation: jj 7s infinite;opacity:0.7;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);transition:all 1s ease;} 
#wallpaper{width:100%;height:100%;transform: scale(1);transition:all 1.7s ease;}
#beneranblur{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.3);transition:all 3s ease;}

    @keyframes jj{0%  {transform: scale(1.1);} 50% {transform: scale(1.2);} 100% {transform: scale(1.1);}}
    @keyframes rts{from {transform:scale(.1);} to {transform:scale(1);}}
    @keyframes rto{from {transform:scale(1);} to {transform:scale(1.1);}}
    @keyframes aniopa{0% {transform: scale(1);} 50% {transform: scale(.75);} 100% {transform: scale(1);}}
    @keyframes rtf{from {transform: rotate(0deg);} to {transform: rotate(360deg);}} @keyframes rt{from {transform: scale(.9);/* transform: rotate(-5deg); */} to {transform: scale(1);/* transform: rotate(5deg); */}}
    @keyframes kont{0%  {left:-1px; top:-3px;} 50% {left:1px; top:3px;} 100% {left:-1px; top:-3px;}}

    @keyframes leaves {0% {transform: scale(1.0);} 100% {transform: scale(.9);}}
    /* #loveIn{animation: leaves .7s ease-in-out infinite alternate;-webkit-animation: leaves 1s ease-in-out infinite alternate;} */
    .lovein{background:#fff;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);}
        
      #scontainer{width:80%;margin:20px auto;min-height:650px;margin-top:150px;color:#000}@media screen and (max-width:400px){#container{width:100%;margin:50% auto;min-height:800px}}.wrapper{position:fixed}.box div{position:fixed;width:60px;height:60px;background-color:transparent;border:6px solid rgba(255,255,255,.6);border-radius:50%;z-index:-10}.box div:nth-child(1){top:12%;left:42%;animation:animate 10s linear infinite}.box div:nth-child(2){top:70%;left:50%;animation:animate 7s linear infinite}.box div:nth-child(3){top:17%;left:6%;animation:animate 9s linear infinite}.box div:nth-child(4){top:20%;left:60%;animation:animate 10s linear infinite}.box div:nth-child(5){top:67%;left:10%;animation:animate 6s linear infinite}.box div:nth-child(6){top:80%;left:70%;animation:animate 12s linear infinite}.box div:nth-child(7){top:60%;left:80%;animation:animate 15s linear infinite}.box div:nth-child(8){top:32%;left:25%;animation:animate 16s linear infinite}.box div:nth-child(9){top:90%;left:25%;animation:animate 9s linear infinite}.box 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}}{display:none !important}
    
    blockquote{position:absolute;opacity:0;visibility:hidden;margin-top:100px;background:var(--warna-bg);border-radius:8px;box-shadow: rgba(255,255,255, 0.3) 0px 7px 29px 0px;transform: scale(.1);transition:all 1s ease;margin-top:120px;margin-left:0;margin-right:0;color:var(--warna-teks);text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);}
    blockquote{width:400px;text-align:center;line-height:1.3em;padding:10px 20px;}
    blockquote::before{content: "";position: absolute;border: 1px solid white;border-radius:8px;top: -8px;bottom: -8px;left: -8px;right: -8px;}
    blockquote p{font-size:18px;font-weight:800;line-height:1.4em;transition:all .5s ease;}
    blockquote #kalimat2{font-size:16px;font-weight:600;}
    blockquote #kalimatbawah{position: absolute;opacity:0;transform: scale(.3);font-family:var(--gaya-font3);font-size:20px;font-weight:700;}
      
     #Tombol{opacity:0;margin:0;display:flex;align-items:left;list-style:none;transform: scale(.1);transition:all 1s ease;}
#Tombol a{cursor:pointer;display:inline-flex;align-items:center; margin:0;margin:12px 0 12px 0;transition:all .2s ease;padding:10px;outline:0;border:1px solid var(--warna-bingkai); border-radius:var(--bingkai);line-height:15px;background:var(--warna-bg);color:var(--warna-teks);font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;z-index:1} 
#Tombol a:hover{transform: scale(.90);opacity:.98;}
#buttonv2{position:absolute;font-size:15px;color:white;background:var(--warna-bg);padding:10px;border-radius:8px;line-height:10px;text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);opacity:0}

    #Content{animation-name:none;animation-duration: 3s;animation-iteration-count: infinite;position:relative;opacity:0;margin-top:50px;width:100%;height:180px;transition:all .7s ease;}
    #Content > *{display:flex;align-items:center;text-align:center;justify-content:center;margin-top:1px;}
    .kumpulanstiker > img{display:none;box-shadow: rgba(255,255,255, 0.3) 0px 7px 29px 0px;background:#fff;border-radius:8px;padding:10px;width:90px;height:90px;margin:20px 0;}
    #stiker{opacity:.1;transition:all 1.2s ease;transform: scale(.1);}
    #halo{font-size:17px !important;position:relative;margin:15px 0 30px 0}
    
    #fotolove img{transition:all .5s ease;width:75px;height:75px;padding:0;background:none}
    #suratin img{display:inline-flex;background:rgba(255,255,255, 0);border-radius:10%;padding:10px;width:130px;height:130px;animation:rto .7s infinite alternate;transition:all .3s ease;} 
    #ket, #halo{text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);font-size:17px;font-weight:700;color:greenyellow}
    #ket{margin-top:15px !important;font-weight:400;}
    
    #kolombaru{position:absolute;opacity:0;display:flex;transform:scale(.1);transition:all 1s ease;align-items:center;text-align:center;justify-content:center;}
    #kolombaru > li{margin: 10px;padding: 10px;list-style-type: none;}
    #kolombaru li img{display:flex;width:40px;height:40px}
    #kolombaru li img:hover{transform: scale(1.15);transition:all .3s ease;}

    .swal2-modal > *{font-size:18px;font-family:var(--gaya-font2);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:silver;margin:0 20px}
    .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;}
    
    .fa-heart {opacity:.3;color:white;font-size: 27px;position: absolute;animation:  heartMove linear 1;top: -10vh;z-index: 0;}
    @keyframes heartMove {0%{transform: translateY(-10vh) ;} 100%{transform: translateY(100vh) ;}}
    .sembunyi, #kado2, #kado3{display:none !important}
    
    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);
        }
      }