html,body{margin:0;padding:0;background-color:#fff7ed;font-family:Inter,sans-serif;line-height:1.8rem}a{text-decoration:unset;color:gray;font-weight:700}a:hover{color:#161616}body::-webkit-scrollbar{display:none}body{-ms-overflow-style:none;scrollbar-width:none}.site-wrapper{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;justify-content:center;margin:auto}header{height:70px;display:flex;width:85vw;max-width:1100px;justify-content:space-around;gap:2rem;align-items:center;padding:0 3rem;color:#fff;background-color:#561557;position:fixed;top:0;z-index:+1;margin-bottom:1rem}header .site-logo{color:#fff;margin-right:auto;font-weight:900;font-size:25px}header a{text-decoration:none;color:#fff;font-weight:600;font-size:1.3rem;padding:5px 20px}header a:hover{color:#add8e6;text-decoration:underline;text-decoration-color:#00f;text-decoration-thickness:5px}footer a{color:#fff;display:flex;justify-content:center;align-items:center}footer a:hover{opacity:.7}header .login-icon{height:18px;width:18px}header .login-link{display:inline-flex;align-items:center}nav{display:flex}footer{background-color:#561557;color:#fff;height:74px;display:flex;flex-shrink:0;justify-content:center;align-items:center;margin-top:auto;font-weight:500;width:100%}textarea{border-radius:5px;background-color:#faebd7;border:none}.app-container{display:flex;flex-direction:column;align-self:center;margin-top:80px;max-width:1100px}.chat-wrapper{display:flex;flex-direction:row-reverse}.chat-grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:10px;margin:20px}.translate-wrapper{display:flex;flex-direction:row-reverse;justify-content:flex-end;max-width:1100px}.translate-grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:10px;margin-bottom:10px;margin-right:10px;width:60vw}.translation-container{height:100%;background-color:#b9e0e0;border-radius:5px}.user-message{background-color:#e2e2e2;padding:10px;border-radius:5px}.assistant-message{background-color:#b3c4cd;padding:10px;border-radius:5px;text-align:left}.input-container{padding:1rem;display:flex;flex-direction:column}.selection-container{display:flex;gap:20px;align-self:center;justify-content:center;align-items:center}.language-selector{padding:5px;height:2rem;justify-self:center}.title-img{width:30vw;align-self:center}.buttons-container{display:flex;gap:20px;align-self:center}.img-link{align-self:center}.img-link:hover{opacity:.7}.chat-img{width:200px;height:200px;align-self:flex-end;margin-bottom:20px;border-radius:5px}.scenario-img{width:50vw}.language-img{height:190px;border-radius:5px}.spotlight__wrapper{border-radius:12px;border:1px solid #dfe1e5;margin:auto;max-width:600px;background-color:#fff}.spotlight__wrapper:hover,.spotlight__wrapper:focus{background-color:#fff;box-shadow:0 1px 6px #20212447;border-color:#dfe1e500}.spotlight__input{display:block;height:56px;width:80%;border:0;border-radius:12px;outline:none;font-size:1.2rem;color:#000;background-position:left 17px center;background-repeat:no-repeat;background-color:#fff;background-size:3.5%;padding-left:60px}.spotlight__input::placeholder{line-height:1.5em}.spotlight__answer{min-height:115px;line-height:1.5em;letter-spacing:.1px;padding:10px 30px;display:flex;align-items:center;justify-content:center}.spotlight__answer p:after{content:"";width:2px;height:14px;position:relative;top:2px;left:2px;background:black;display:inline-block;animation:cursor-blink 1s steps(2) infinite}.chat-button{margin-top:5px;width:200px;border-radius:5px;background-color:#243d51;border:none;display:flex;align-content:center;justify-content:center;color:#fff;padding:5px;font-weight:700;box-shadow:1px 1px 3px #0000004d;justify-self:center;align-self:center}.chat-button:hover{transform:scale(1.05)}.chat-button:disabled{opacity:.5}.switch{position:relative;display:inline-block;width:60px;height:34px;align-self:flex-end;margin-bottom:10px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#243d51}input:focus+.slider{box-shadow:0 0 1px #243d51}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.switch-label{position:absolute;left:-145px;top:5px;font-size:14px;color:#555}.archipelago-img-large{width:100px;margin-right:-15px;padding:0}.logo-small{font-size:18px;font-weight:600px;font-style:italic}@media screen and (max-width: 800px){body{font-size:14px}header{align-self:center;flex-direction:column;height:150px}nav{flex-direction:column}header .site-logo{font-size:20px;display:none}header a{font-size:1rem}.app-container{margin-top:150px}.language-img{display:none}footer{height:50px}.title-img{width:60vw}.chat-grid{margin:10px}.chat-img{width:130px;height:130px;align-self:center;margin-bottom:5px}.language-img{height:130px;width:130px}.chat-wrapper{width:80vw;padding:1rem;flex-direction:column}.translate-wrapper{width:80vw;padding:1rem;flex-direction:column;align-items:center}.chat-grid,.translate-grid{display:grid;grid-template-columns:1fr;margin:20px}.input-container{width:80vw}.switch{align-self:center}.archipelago-img-large{width:70px}.logo-small{font-size:14px;font-weight:600px;font-style:italic}}@media screen and (max-width: 500px){body{font-size:12px}header .site-logo{font-size:18px}header a{font-size:.8rem}.chat-img,.language-img{width:90px;height:90px}.chat-wrapper,.input-container{width:70vw}}.app-container{display:flex;flex-direction:column;align-items:center;padding:20px}h3{margin-bottom:20px}.word-titles{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;margin-bottom:10px}.word-titles p{background-color:#f0f0f0;padding:10px;border-radius:5px;text-align:center}.word-container{width:800px;max-height:320px;overflow-y:auto}.word-row{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;max-height:320px;overflow-y:auto}.word-row p{margin:0;text-align:center}.word-position{color:red}.word-original{color:#00f}.word-translated{color:green}@media screen and (max-width: 800px){.word-container{width:400px;max-height:320px;overflow-y:auto}.word-row{grid-gap:5px}}
