@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap);.card,.icons{user-select:none}.card,body,html{overflow:hidden;display:flex}body,html{flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;font-family:Nunito,sans-serif;background-color:#edeef3}.frame{position:relative;width:56vh;height:84vh;max-width:400px;max-height:600px;z-index:1}.card,.card .is-like{height:100%;position:absolute;width:100%}.icons{margin-top:3vh;z-index:1}.icons>svg{width:10vh;height:10vh;max-width:60px;max-height:60px;border-radius:50%;box-shadow:0 5px 15px rgba(0,0,0,.1);cursor:pointer}.icons>svg:first-child{fill:#fb4f68;margin-right:2vh}.icons>svg:nth-child(2){fill:#4dca93}.icons>svg>path:first-child{fill:#fff}.card{align-items:flex-end;justify-content:center;color:#f1f1f1;border-radius:10px;cursor:pointer;background-size:cover;background-repeat:no-repeat;background-position:center;touch-action:none}#bubble,.modal{position:fixed}.card .is-like{opacity:0}.card .is-like::after{position:absolute;left:50%;bottom:30%;transform:translateX(-50%) rotate(-10deg);width:70%;height:13%;font-size:3em;letter-spacing:.2em;font-weight:600;border-radius:.15em;display:flex;align-items:center;justify-content:center}.card .like::after{content:"YUMM";color:#4dca93;border:.1em solid #4dca93}.card .nope::after{content:"YUCK";color:#fb4f68;border:.1em solid #fb4f68}.card .bottom{width:100%;height:40%;background:linear-gradient(to top,#00000080,#00000000);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding-left:7%;padding-bottom:12px;font-weight:400}.frame .card,.modal,.modal-content .frame .is-like{display:none}.card .bottom .title>span:first-child{font-size:2em;font-weight:700;margin-right:.2em}.card .bottom .title>span:nth-child(2){font-size:clamp(13px, 1.5em, 25px)}.card .bottom .title>span:nth-child(2)>b{font-size:.6em;margin-right:.2em}.card .bottom .info{margin:3% 0 0 2%;font-size:clamp(10px, 1.1em, 20px)}@media screen and (max-height:540px){.frame{width:54vh;height:81vh;font-size:13px}}@media screen and (max-height:440px){.frame{font-size:8px}}.input-container select{padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer}.input-container label{margin-bottom:8px;font-weight:700}.input-container input{padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px}.input-container button{background-color:#007bff;color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer}.input-container button:hover{background-color:#0056b3}#bubble,.frame .card:nth-last-child(-n+5){display:flex}#bubble{bottom:20px;right:20px;width:50px;height:50px;background-color:red;color:#fff;border-radius:50%;justify-content:center;align-items:center;cursor:pointer}.modal{z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.modal-content .frame{width:auto;height:auto;max-width:none;max-height:max-content;overflow:scroll}.modal-content .frame .card{position:sticky;margin-top:20px;display:flex;user-select:auto;pointer-events:auto}