@import"https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap";#root{margin:0;padding:0}body{font-family:Playfair Display,serif;background-color:#f4ede8;margin:0;padding:0}header{width:100vw;height:15vh;background-color:transparent;display:flex;justify-content:space-between;align-items:center;flex-direction:row}header .logo{height:6.875rem;padding-left:.625rem}header .welcome{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:.125rem;transform:translate(-65px)}header .welcome h1{margin:0;padding-top:1.25rem}header .welcome .welcometext{margin:0;padding:0 .625rem}header .buttonheader{background:transparent;border:none}.app-wrapper{display:flex;flex-direction:column;min-height:100vh}.box-global{flex:1;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem;overflow:visible}.box-global .img-left,.box-global .img-right{position:fixed;top:15vh;height:85vh;z-index:1;pointer-events:none}.box-global .img-left{left:0}.box-global .img-right{right:0}footer{position:relative;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%238D895C" fill-opacity="1" d="M0,160L60,160C120,160,240,160,360,170.7C480,181,600,203,720,197.3C840,192,960,160,1080,133.3C1200,107,1320,85,1380,74.7L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>') no-repeat top center;background-size:cover;width:100vw;height:40vh;z-index:-1;display:flex;justify-content:center;align-items:flex-end}footer .socials{display:flex;gap:1rem;padding-bottom:1.25rem;transform:translateY(0);transition:transform .3s ease}footer .socials img{width:2.5rem;height:auto;opacity:.9;transition:transform .2s ease}footer .socials img:hover{transform:scale(1.2);opacity:1}.phrases-container{margin:0 auto;padding-top:2rem;width:60%;max-width:800px;display:flex;flex-direction:column;align-items:center;z-index:2}@media (max-width: 768px){header{flex-direction:column;align-items:center;height:auto;padding:.625rem;gap:.3125rem;margin:0}header .logo{height:3.75rem;padding-left:0}header .welcome{align-items:center;text-align:center;padding-top:.0625rem;transform:none}header .welcome h1{font-size:1.25rem;padding-top:.3125rem;margin:0}header .welcome .welcometext{font-size:.875rem;margin:1.25rem;padding:.625rem}header button{font-size:.875rem;padding:.25rem;margin-top:0rem;width:40%;max-width:12.5rem}.box-global .img-left{height:40vh;top:auto;bottom:0;left:0}.box-global .img-right{height:40vh;top:auto;bottom:0;right:0}.box-global{margin:0;padding:0}.buttonheader{display:none}.buttoncard .buttoncard{width:40%;padding:.5rem;font-size:.625rem}}.add-phrase-form{width:100%;max-width:37.5rem;margin:0 auto 2.5rem;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;background-color:#fff;border-radius:1rem;box-shadow:0 4px 8px #0000001a;transition:transform .2s ease}.add-phrase-form:hover{transform:translateY(-2px)}.add-phrase-form textarea,.add-phrase-form input{font-family:Playfair Display,serif;padding:.625rem;border:1px solid #8e4e3d;border-radius:.625rem;font-size:1rem;resize:vertical;min-height:5rem;max-height:25rem;overflow:auto}.add-phrase-form textarea::placeholder,.add-phrase-form input::placeholder{font-style:italic}.buttoncard{width:10%;padding:.4rem .8rem;margin-right:auto;background-color:transparent;color:#fff;border:none;cursor:pointer}@media (max-width: 768px){.add-phrase-form{width:90%;padding:1rem}}.image-url-row{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.image-url-row .image-input{padding:.5rem;font-size:1rem;border:1px solid #8e4e3d;font-family:Playfair Display,serif}.image-url-row .image-input::placeholder{font-style:italic}.image-url-row .add-image-btn,.image-url-row .save-image-btn{background-color:#8e4e3d;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;font-size:.95rem;font-family:Playfair Display,serif;cursor:pointer;transition:background-color .2s ease}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-box{background-color:#fff;padding:2rem;border-radius:1rem;max-width:300px;text-align:center;box-shadow:0 5px 20px #0003}.modal-box p{margin-bottom:1rem;color:#333}.modal-box button{padding:.5rem 1.2rem;border:1px solid #2a2a2a;border-radius:1rem;background-color:#fff;cursor:pointer}.modal-box button:hover{background-color:#f0f0f0}.phrase-list{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%}.phrase-card{position:relative;background-color:#fff;padding:1.25rem;border-radius:1rem;box-shadow:0 4px 8px #0000001a;width:100%;max-width:37.5rem;transition:transform .2s ease}.phrase-card:hover{transform:translateY(-2px)}.phrase-text{font-size:1rem;margin-bottom:1rem;color:#000;font-family:Playfair Display,serif}.phrase-author{font-size:1rem;color:#8d895c;margin:0;font-family:Playfair Display,serif}.actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:1rem}.actions button{width:36px;height:36px;border:1px solid black;border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.actions button img{filter:none}.actions img{width:18px;height:18px}.empty-message{font-size:1.2rem;font-style:italic;font-family:Playfair Display,serif}@media (max-width: 768px){.phrase-card{width:90%;padding:1rem}}.edit-form{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:none;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.edit-form input{border:1px solid #8e4e3d;border-radius:.5rem;padding:.75rem 1rem;font-family:Playfair Display,serif;font-size:1rem;color:#000;outline:none}.edit-form input::placeholder{font-style:italic}.edit-form input:focus{border-color:#8e4e3d}.edit-form .buttons{display:flex;justify-content:flex-start;flex-direction:row;gap:.4rem}.edit-form .buttons button{display:flex;align-items:center;justify-content:center;background:none;border:1.8px solid black;border-radius:50%;width:44px;height:44px;font-family:Playfair Display,serif;font-size:1rem;color:solid black;cursor:pointer;transition:none}.warning-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.warning-modal{background:#fff;padding:1.875rem;border-radius:1rem;text-align:center;box-shadow:0 4px 12px #00000026;max-width:18.75rem;width:90%}.warning-modal .buttons{display:flex;justify-content:center;gap:.625rem;margin-top:.625rem}.warning-modal p{font-family:Playfair Display,serif;font-size:1rem;margin-bottom:1.25rem;color:#333}.warning-modal button{background:transparent;border:1px solid black;padding:.375rem 1.25rem;border-radius:1.25rem;font-family:Playfair Display,serif;font-size:.875rem;cursor:pointer;transition:all .2s ease}.warning-modal button:hover{background:#000;color:#fff}.moth-container{position:absolute;top:20%;left:77%;z-index:-10;pointer-events:none;position:fixed}.moth{width:130px;animation:moth-fly 4s ease-in-out infinite}@keyframes moth-fly{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(3deg)}50%{transform:translateY(0) rotate(-2deg)}75%{transform:translateY(10px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}@media (max-width: 768px){.moth-container{display:none}.moth{width:45px}}.moth2-container{position:absolute;top:80%;left:17%;z-index:1;pointer-events:none;position:fixed}.moth2{width:100px;animation:moth2-fly 4s ease-in-out infinite}@keyframes moth2-fly{0%{transform:translate(0) rotate(0)}20%{transform:translate(2px,-4px) rotate(1deg)}40%{transform:translate(-3px,-6px) rotate(-1deg)}60%{transform:translate(2px,-2px) rotate(1.5deg)}80%{transform:translate(-2px,1px) rotate(-1deg)}to{transform:translate(0) rotate(0)}}@media (max-width: 768px){.moth2-container{top:auto;bottom:2vh;left:65vw}.moth2{width:45px}}.bees-container{position:fixed;top:25vh;left:16vw;z-index:1;pointer-events:none}.bees{width:80px;animation:bees-fly 5s ease-in-out infinite}@keyframes bees-fly{0%{transform:translate(0) rotate(0)}25%{transform:translate(-2px,-4px) rotate(1.5deg)}50%{transform:translate(2px,2px) rotate(-1.5deg)}75%{transform:translate(-1px,-3px) rotate(1deg)}to{transform:translate(0) rotate(0)}}@media (max-width: 768px){.bees-container{top:auto;bottom:25vh;left:25vw}.bees{width:50px}}