body{font-family:"Sen",sans-serif;scroll-behavior:smooth}*,:after,:before{box-sizing:border-box}.body,body,html{height:100%}.body{margin:0;padding-top:50px;display:grid;align-items:center;justify-items:center;color:#f4f7f7;font:1rem/1 "Cabin",sans-serif;overflow-x:hidden}input{position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}.selector{display:grid;grid-template-areas:"happy lovers" "pick  pick"}label{display:block;cursor:pointer}.happy-card,.lovers-card{position:relative;width:250px;padding:20px;color:#586875;background-color:#f4f7f7;box-shadow:0 10px 20px rgba(0,0,0,.4);-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.happy-card{grid-area:happy;margin-right:-10px;--swing:-25px;--overlap:25px}.lovers-card{grid-area:lovers;margin-left:-10px;--swing:25px;--overlap:-25px}#happy-radio:checked~.selector .happy-card,#lovers-radio:checked~.selector .lovers-card{-webkit-animation-name:swing-forwards;animation-name:swing-forwards}@-webkit-keyframes swing-forwards{0%{z-index:1;-webkit-transform:scale(.9);transform:scale(.9)}50%{-webkit-transform:translateX(var(--swing));transform:translateX(var(--swing))}to{z-index:2;-webkit-transform:translateX(var(--overlap)) scale(1.1);transform:translateX(var(--overlap)) scale(1.1)}}@keyframes swing-forwards{0%{z-index:1;-webkit-transform:scale(.9);transform:scale(.9)}50%{-webkit-transform:translateX(var(--swing));transform:translateX(var(--swing))}to{z-index:2;-webkit-transform:translateX(var(--overlap)) scale(1.1);transform:translateX(var(--overlap)) scale(1.1)}}#happy-radio:checked~.selector .lovers-card,#lovers-radio:checked~.selector .happy-card{-webkit-animation-name:swing-backwards;animation-name:swing-backwards}@-webkit-keyframes swing-backwards{0%{z-index:2;-webkit-transform:translateX(var(--overlap)) scale(1.1);transform:translateX(var(--overlap)) scale(1.1)}50%{-webkit-transform:translateX(var(--swing));transform:translateX(var(--swing))}to{z-index:1;-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes swing-backwards{0%{z-index:2;-webkit-transform:translateX(var(--overlap)) scale(1.1);transform:translateX(var(--overlap)) scale(1.1)}50%{-webkit-transform:translateX(var(--swing));transform:translateX(var(--swing))}to{z-index:1;-webkit-transform:scale(.9);transform:scale(.9)}}h1{margin:0;padding-bottom:10px;border-bottom:1px dashed #bdd6d2;font-size:1.5rem}ul{margin:15px 0;padding-left:30px;line-height:1.5rem;list-style-type:square}p{margin:0 -20px -20px;padding:15px;background-color:#bdd6d2;font-weight:700;text-align:center}.happy-pick,.lovers-pick{grid-area:pick;margin:50px auto 0;padding:15px;border:1px solid #f4f7f7;border-radius:9999px;background-color:#b46d73;font-size:1.25rem;-webkit-user-select:none;user-select:none}.happy-pick:before,.lovers-pick:after{display:inline-block;font-family:"Font Awesome 5 Free";font-weight:700}.happy-pick:before{margin-right:10px;content:"\f0a8"}.lovers-pick:after{margin-left:10px;content:"\f0a9"}#happy-radio:checked~.selector .happy-pick,#lovers-radio:checked~.selector .lovers-pick{display:none}@media (max-width:560px){.happy-card{margin-right:-85px;--swing:-100px}.lovers-card{margin-left:-85px;--swing:100px}}img{width:100%}.comment{background-color:#030404}.comment,.load{display:flex;justify-content:flex-start}.load{padding:10px;grid-gap:10px;gap:10px}.comm{font-weight:700;font-family:"Font Awesome 5 Free";font-size:small}.header-comment{display:flex;justify-content:center}.container{box-shadow:0 10px 20px rgba(0,0,0,.4)}.box{width:100%}.cardss,.envelope{background:#fff;box-shadow:-1px 8px 3px 0 rgba(0,0,0,.6);height:21em;padding:2em;position:relative;width:15em}.cont{display:flex;justify-content:center;margin-top:100px}.envelope{background:#b3fbe3;box-shadow:0 3px 2px rgba(0,0,0,.8);margin:-2em;position:absolute;-webkit-transform:rotate(-8deg);transform:rotate(-8deg);z-index:-1}em{color:#cc2119;font-style:normal}.heart{bottom:4em;position:absolute;right:4em}.heart:after,.heart:before{background-color:#cd231b;border-radius:50px 50px 0 0;content:"";height:25px;left:15px;position:absolute;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%;width:15px}.heart:after{left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.con{text-align:center;margin-top:50px;margin-left:10px;margin-right:10px}.qs{margin-top:10px}*{margin:0;padding:0;box-sizing:border-box}.tengah{display:block;text-align:center}.tengah h3{margin-bottom:10px}#player{display:none}.cards-Open .content{display:flex;justify-content:center;align-items:center}.container{max-width:100vh;margin-left:auto;margin-right:auto}.cards-container{height:100vh;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;padding-left:15px;padding-right:15px}.cards-Open{max-width:100%;height:70%;position:relative;box-shadow:0 0 15px rgba(0,0,0,.2);width:100%}@media screen and (max-width:700px){.cards-Open{width:45%}}@media screen and (max-width:500px){.cards-Open{width:90%}}.cards-Open .content,.cards-Open .elms-animation{position:absolute;top:0;left:0;height:100%;width:100%}.cards-Open .elms-animation{z-index:5}.cards-Open .elms-animation span{position:absolute;background-color:rgba(0,0,0,.6);height:0;width:0;transition:all .5s ease-out}.cards-Open .elms-animation span.one{top:0;left:0}.cards-Open .elms-animation span.two{top:0;right:0}.cards-Open .elms-animation span.three{left:0;bottom:0}.cards-Open .elms-animation span.four{right:0;bottom:0}.cards-Open:hover .elms-animation span{width:50%;height:50%}.cards-Open img{height:100%;width:100%;object-fit:cover;object-position:center;display:block}.cards-Open .content{z-index:6;visibility:hidden}.cards-Open:hover .content{-webkit-animation:show .3s linear .4s forwards;animation:show .3s linear .4s forwards}.cards-Open .content button{padding:.6rem 1.3rem;border:3px solid #fff;background:transparent;color:#fff;font-size:1rem;outline:none;cursor:pointer;transition:background .3s ease}.cards-Open .content button:hover{background:#fff;color:#333}@-webkit-keyframes show{to{visibility:visible}}@keyframes show{to{visibility:visible}}
/*# sourceMappingURL=main.adffd39a.chunk.css.map */