body,html{height:auto;width:100%;margin:0;font-family:DM Sans,sans-serif;overflow:hidden}:root{--transition-time: .2s ease-in 10ms}.background-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;margin:0;z-index:-1}img{width:auto;height:49%;margin:0}.background-color{background-color:#040711;position:relative;width:100%;height:100%}.elements-container{display:flex;flex-direction:column;padding-top:92px}.logo-container{position:relative;display:flex;justify-content:center;align-items:center}p{color:#fff}.boxes-container{position:relative;display:flex;gap:1rem;padding:52px 72px}.box{display:flex;flex-direction:column;opacity:80%;border:1px solid #4D5562;border-radius:20px;padding:24px;width:100%}.myTextArea{font-size:16px;font-family:DM Sans,sans-serif;background-color:#212936;color:#fff;border:none;outline:none;padding-top:24px;resize:none;font-weight:700;height:160px;overflow:hidden}.empty{position:absolute;opacity:0%;bottom:0;left:0;width:0;height:0}.scroll{display:flex;flex-wrap:wrap;overflow:auto;position:relative;background-color:#191e2b;height:186px;width:100%;border-radius:0 0 12px 12px;transition:all var(--transition-time)}.scroll-translated{display:flex;flex-wrap:wrap;overflow:auto;position:relative;background-color:#0e121b;height:186px;width:100%;border-radius:0 0 12px 12px;transition:all var(--transition-time)}.translate{background-color:#212936}.translated{background-color:#121826;color:#fff}.languages{height:25px;margin:0;padding-bottom:16px;display:flex;gap:12px;align-items:center;font-size:14px}.lang-word{color:#fff;cursor:pointer;padding:12px;border-radius:10px;transition:background-color var(--transition-time)}.spanish{display:flex;align-items:center;gap:4px}.lang-es{padding-right:12px}.lang-word:hover,.active{background-color:#4d5562}.reverse{margin-left:auto}.copy-and-hear:hover{border-color:#3661e3}.reverse:has(:hover) .hover-blue-reverse{fill:#3661e3}.hear-translate:has(:hover) .hover-hear-translate{fill:#3661e3}.hear-translate:has(:hover) .hover-hear-translate-stroke{stroke:#3661e3}.hear-translated:has(:hover) .hover-hear-translated{fill:#3661e3}.hear-translated:has(:hover) .hover-hear-translated-stroke{stroke:#3661e3}.copy-translate:has(:hover) .hover-copy-translate{stroke:#3661e3}.copy-translated:has(:hover) .hover-copy-translated{stroke:#3661e3}.hover-blue-reverse,.hover-hear-translate{transition:fill var(--transition-time)}.hover-hear-translate-stroke{transition:stroke var(--transition-time)}.hover-hear-translated{transition:fill var(--transition-time)}.hover-hear-translated-stroke,.hover-copy-translate,.hover-copy-translated{transition:stroke var(--transition-time)}.line{height:1px;width:100%;background-color:#4d5562}.translated-div{padding-top:24px;font-weight:700;overflow:auto;word-wrap:break-word;text-overflow:ellipsis}.number-of-words{box-sizing:border-box;position:relative;font-size:12px;color:#4d5562;text-align:end;right:0;margin:0}.bottom-container{position:relative;display:flex;align-items:end;margin:12px 0 0;width:100%}.copy-and-hear{border:2px solid #4D5562;padding:4px;margin-right:8px;border-radius:25%;display:flex;justify-content:center;align-items:center;float:left;cursor:pointer;transition:border-color var(--transition-time)}.p-clipboard{background-color:#13161d;border-radius:5px;font-size:small;padding:2px;display:flex;align-items:center;justify-content:center;color:#e9c9c9;transition:all var(--transition-time);opacity:0}.p-empty{background-color:#13161d;position:absolute;margin-left:80px;border-radius:5px;font-size:small;padding:2px;display:flex;align-items:center;justify-content:center;color:#e9c9c9;transition:all var(--transition-time);opacity:0}.shown,.shown-translated{opacity:100%}button{margin-left:auto;background-color:#3662e3;border:1px solid #7CA9F3;color:#f9fafb;font-size:16px;font-weight:600;display:flex;align-items:center;padding:12px 24px;border-radius:10px;cursor:pointer;transition:background-color var(--transition-time)}button:hover{background-color:#17358f}button:active{background-color:#1237a5}.bottom-translated{position:relative;margin-top:auto}@media (max-height : 920px) and (max-width : 1024px){.myTextArea{height:150px}}@media (max-height : 900px) and (max-width : 1024px){.myTextArea{height:140px}.elements-container{padding-top:50px}}@media (max-height : 850px) and (max-width : 1024px){.myTextArea{height:120px}.elements-container{padding-top:30px}.boxes-container{padding-top:40px}}@media (max-height : 800px) and (max-width : 1024px){.myTextArea{height:100px}.elements-container,.boxes-container{padding-top:20px}}@media (max-height : 700px) and (max-width : 1024px){.elements-container{padding-top:10px}}@media (max-height : 680px) and (max-width : 1024px){.boxes-container{padding-top:0;padding-bottom:0}.elements-container{padding:0}}@media (max-height : 660px) and (max-width : 1024px){.boxes-container{padding-top:0;padding-bottom:0}.elements-container{padding:0}.myTextArea{height:80px}}@media (max-width : 500px){.boxes-container{padding-left:24px;padding-right:24px}}@media (max-width : 380px){.boxes-container{padding-left:12px;padding-right:12px}}@media (max-width : 360px){.boxes-container{padding-left:4px;padding-right:4px}}@media (max-width : 340px){.boxes-container{padding-left:0;padding-right:0}}@media (max-width : 1025px){.boxes-container{flex-direction:column}.box{box-sizing:border-box}}.a{position:absolute;color:#4d4d4d;font-size:12px;bottom:0;left:0}.rep{position:absolute;right:0;bottom:0;color:#4d4d4d;font-size:12px}