:root{--bg-i-clr:hsl(183, 90%, 5%);--hdrGrdnt-clr:hsla(183, 90%, 5%, 0.8);--thmBtnBg-clr:hsl(183, 80%, 12%);--nptFcsBg-clr:hsl(40, 60%, 25%);--btMsgBg-clr:hsla(183, 60%, 12%, 0.65);--usrMsgBg-clr:hsla(40, 80%, 15%, 0.65);--nptBg-clr:hsl(40, 45%, 30%);--mn-clr:hsl(40, 85%, 50%);--thmCrsnt-clr:hsl(168, 26%, 69%);--nptPh-ftr-clr:hsl(40, 70%, 70%);--npt-msg-clr:hsl(40, 25%, 85%);--brdr-rds:20px;@media (max-width:768px){--brdr-rds:12px}}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;color:inherit;-webkit-tap-highlight-color:#fff0;transition-property:background-color,color;transition-duration:250ms}::selection{background-color:var(--thmCrsnt-clr);color:var(--bg-i-clr)}.hide{box-shadow:none;&::after{display:none}}.scroll-v{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mn-clr) #fff0;&::-webkit-scrollbar{width:7px}&::-webkit-scrollbar-track{background-color:#fff0}&::-webkit-scrollbar-thumb{background-color:var(--mn-clr)}}p,h1,h2{color:var(--mn-clr)}span.p{font-family:"Playwrite FR Trad",cursive;font-size:.5em;letter-spacing:.1em;font-weight:initial!important}body,html{height:100%;display:flex;flex-direction:column;background-color:var(--bg-i-clr);font-family:"Roboto",sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:.5em;z-index:1;padding-bottom:0;font-size:1.1rem;padding-bottom:50px;background-image:linear-gradient(to bottom,var(--bg-i-clr) 40%,var(--hdrGrdnt-clr) 60%,transparent 100%);position:fixed;width:100%}header>h1{font-weight:100;font-size:1em;color:var(--mn-clr);margin-left:.4em;letter-spacing:.06em}.action-bar{display:flex;justify-content:space-between}.action-bar>div{color:var(--mn-clr);margin-right:.75em;font-size:1.1em;cursor:pointer;&:hover>i{transition:opacity 150ms linear;opacity:.9}}.action-bar>.new{position:relative;display:flex;align-items:center;&>.plus{position:absolute;right:50%;bottom:51%;translate:50% 50%;color:var(--bg-i-clr);font-size:.7em}}.theme-switch{font-size:.6em;position:relative;display:inline-block;width:3em;height:2em;transition:filter 222ms;&:hover{filter:saturate(2.5)}& input{visibility:hidden;&:checked+.slider::before{transform:translateX(100%);box-shadow:inset 1em 0em 0em 1em var(--thmCrsnt-clr)}}& .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--thmBtnBg-clr);border-radius:30px;transition:color 400ms;&::before{position:absolute;content:"";width:1.4em;height:1.4em;border-radius:50%;left:10%;bottom:15%;transition:400ms;box-shadow:inset .4em -.1em 0em .1em var(--thmCrsnt-clr)}}}main{flex-grow:1;padding-inline:.6em;margin-bottom:1em;position:relative;display:flex;justify-content:center;scroll-behavior:smooth}main>h2.placeholder{align-self:center;font-size:10em;line-height:.9;user-select:none;overflow:hidden;opacity:.66;position:absolute;translate:2.5% 5%;transition:opacity 500ms;div{font-weight:300;width:min-content;margin-left:1ch}@media (min-width:1300px){font-size:12em}@media (max-height:660px){font-size:10em}@media (min-width:351px) and (max-width:500px){font-size:7.5em}@media (max-width:400px){font-size:6em}}.scroll-btn{width:2.2em;height:2.2em;background-color:var(--thmBtnBg-clr);color:var(--mn-clr);position:fixed;bottom:50%;right:22px;border-radius:var(--brdr-rds);display:flex;justify-content:center;align-items:center;cursor:pointer;pointer-events:none;opacity:0;transition-property:opacity,bottom,filter;transition-duration:300ms;&.active{pointer-events:auto;bottom:100px;opacity:.9;&:hover{opacity:1;filter:saturate(2)}@media (max-width:477px){bottom:115px}}}main>.wrapper{width:75ch;max-width:75ch;min-width:10ch;margin-inline:auto;height:min-content}main>.wrapper :first-child{margin-top:calc(2em + 50px)}.message{width:fit-content;max-width:90%;width:clamp(fit-content, 90%, 100%);padding:1em;margin-bottom:1em;color:var(--npt-msg-clr);line-height:1.5;overflow-wrap:break-word}.message.user{background-color:var(--usrMsgBg-clr);margin-left:auto;border-radius:var(--brdr-rds) var(--brdr-rds) 0 var(--brdr-rds)}.message.bot{background-color:var(--btMsgBg-clr);border-radius:var(--brdr-rds) var(--brdr-rds) var(--brdr-rds) 0}section{padding-inline:.5em}form{display:flex;justify-content:center;gap:.35em;width:100%;max-width:78.5ch;margin-inline:auto}form>*{padding:.5em}form textarea{flex-grow:1;border:none;background-color:var(--nptBg-clr);color:var(--npt-msg-clr);font-family:inherit;border-radius:var(--brdr-rds);padding:1em;resize:none;height:auto;max-height:22dvh}form textarea::placeholder{color:var(--nptPh-ftr-clr);opacity:.7}form textarea:focus{background-color:var(--nptFcsBg-clr)}form button{min-width:4em;background-color:var(--mn-clr);color:var(--bg-i-clr);border-radius:var(--brdr-rds);opacity:.7;transition:opacity 150ms linear;&.active{cursor:pointer;opacity:1;&:hover{opacity:.88}}}footer{display:flex;justify-content:center;flex-wrap:wrap;padding:.4em;font-size:.625rem}footer p{margin-inline:.88em;padding:.1em 0 .1em 0;color:var(--nptPh-ftr-clr)}.name{transition:text-shadow 250ms;color:var(--mn-clr);&:hover{text-shadow:0 0 5px var(--mn-clr),0 0 10px var(--mn-clr)}}