:root{--black:hsl(0, 0%, 5%);--black2:hsl(0, 0%, 20%);--black3:hsl(0, 0%, 30%);--black4:hsl(0, 0%, 40%);--black5:hsl(0, 0%, 50%);--white5:hsl(0, 0%, 60%);--white4:hsl(0, 0%, 70%);--white3:hsl(0, 0%, 80%);--white2:hsl(0, 0%, 90%);--white:hsl(0, 0%, 100%);--blackno:13,13,13;--black3no:38,38,38;--background-img:url(./assets/black_bg.png);--accent:#ff7578;--accentno:255,117,120}*{margin:0;padding:0}body{height:100vh;background-color:var(--black);background-image:var(--background-img);background-size:25%;font-family:'Courier New',Courier,monospace;font-size:16px;display:flex;flex-direction:column;justify-content:center;align-items:center}footer{position:absolute;bottom:20px;color:var(--white);font-family:inherit;font-size:1rem;z-index:-1}footer a{text-decoration:none;color:var(--accent);font-weight:900}.hide{display:none!important}.light-mode{--black:hsl(0, 0%, 100%);--black2:hsl(0, 0%, 90%);--black3:hsl(0, 0%, 80%);--black4:hsl(0, 0%, 70%);--black5:hsl(0, 0%, 60%);--white5:hsl(0, 0%, 50%);--white4:hsl(0, 0%, 40%);--white3:hsl(0, 0%, 30%);--white2:hsl(0, 0%, 20%);--white:hsl(0, 0%, 5%);--blackno:255,255,255;--black3no:204,204,204;--background-img:url(./assets/white_bg.png)}.toggles{height:35px;aspect-ratio:1/1;border:none;background-color:transparent;color:var(--white);border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:background-color .3s ease-in-out}.toggles:hover{background-color:rgba(var(--black3no),.8)}#landing-page{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center;gap:30px}#landing-page>h1{font-size:3rem;color:var(--accent)}#landing-page #description{width:min(75%,600px);font-size:1.2rem;color:var(--white);background-image:linear-gradient(-25deg,rgba(var(--black3no),.1),rgba(var(--black3no),.1),rgba(var(--black3no),.7),rgba(var(--black3no),.1),rgba(var(--black3no),.1));padding:1em;border-radius:8px;border:dashed var(--black5) 3px}#landing-page #results{color:var(--white)}#landing-page #results #counter{font-size:2rem;display:block}#landing-page #play{width:min(305px,50%);height:40px;border:none;background-color:rgba(var(--accentno),.7);border-radius:8px;font-size:1.2rem;font-family:inherit;transition:background-color .3s ease-in-out,transform .3s ease-in-out}#landing-page #play:hover{background-color:var(--accent);transform:scale(1.1)}#landing-page #share{height:50px;border:none;aspect-ratio:1/1;border-radius:50%;position:fixed;bottom:50px;right:50px;background-color:rgba(var(--accentno),.7);transition:transform .3s ease-in-out,background-color .3s ease-in-out}#landing-page #share:hover{transform:scale(1.1);background-color:rgba(var(--accentno),.5)}#game-page{height:100%;width:100%;display:flex}.ad-box{height:100%;box-sizing:border-box;flex-grow:1}#card{height:fit-content;width:40%;min-width:500px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:40px;padding:80px}#card>#header{display:flex;width:100%;justify-content:space-between}#card>#header>h1{color:var(--accent);flex-shrink:1}#card>#header>#btn-container{display:flex;width:fit-content;justify-content:flex-end;align-items:center;gap:10px}#hints{width:100%;display:flex;position:relative}#hint-container{width:100%;height:100%}#hint-preview{width:100%;height:100px;display:grid;place-items:center;background-image:linear-gradient(135deg,rgba(var(--blackno),.7),rgba(var(--black3no),.7));backdrop-filter:blur(0.1em);border-radius:8px;padding:15px;font-size:1rem;color:var(--white);border:solid var(--black4) 1px;box-sizing:border-box}.hint{width:100%;background-image:linear-gradient(135deg,rgba(var(--blackno),.7),rgba(var(--black3no),.7));backdrop-filter:blur(0.1em);border-radius:8px;padding:15px;font-size:1rem;color:var(--white);border:solid var(--black4) 1px;box-sizing:border-box;display:none}.hint.active{display:block}#nextHint,#prevHint{background-color:transparent;border:none;color:var(--white);font-size:1.5rem;font-weight:600}#hint-indicator{width:100%;height:20px;position:absolute;bottom:-20px;display:flex;justify-content:center;align-items:center;gap:5px}#hints .circle{height:5px;aspect-ratio:1/1;border-radius:50%;background-color:var(--white5);transition:transform .4s ease-in-out,background-color .4s ease-in-out}#hints .circle.active{background-color:var(--white);transform:scale(1.2)}#user-input{width:100%;height:auto;display:flex;display:flex;flex-direction:column;gap:10px}#input-header{color:var(--white);display:flex;justify-content:space-between}#input-field{display:flex}#user-input input{width:90%;border-radius:8px 0 0 8px;border:solid transparent 2px;box-sizing:border-box;background-color:var(--black2);color:var(--white);font-family:inherit;padding:15px}#user-input input:focus{border:solid var(--accent) 2px;outline:0}#user-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--black2) inset!important;-webkit-text-fill-color:var(--white)!important;border-color:var(--black2);outline:0}#user-input input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--black2) inset!important;-webkit-text-fill-color:var(--white)!important;border-color:var(--accent);outline:0}#user-input button{width:10%;border-radius:0 8px 8px 0;border:solid var(--accent) 2px;background-color:var(--accent);color:var(--black);display:grid;place-content:center;transition:background-color .3s ease-in-out}#user-input button:hover{background-color:rgba(var(--accentno),.7)}#prev-ans{width:100%;background-color:rgba(var(--black3no),.1);backdrop-filter:blur(0.2em);color:var(--white);border-radius:8px;padding:15px;border:solid rgba(var(--accentno),.3) 2px;box-sizing:border-box}#result-popup{position:fixed;height:100%;width:100%;background-color:transparent;display:flex;justify-content:center;align-items:center}#result-popup>#popup{height:fit-content;width:fit-content;padding:40px;background-color:rgba(var(--blackno),.4);backdrop-filter:blur(8px);border:solid var(--accent) 2px;border-radius:15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;text-align:center;z-index:2}#result-popup h1{margin-top:20px;color:var(--accent);font-size:2.5rem}#result-popup hr{height:2px;width:90%;margin:auto;background-color:var(--accent);border:none}#popup img{aspect-ratio:1/1;height:350px}#result-popup h4{color:var(--white);font-size:1.5rem}#popup #stats{color:var(--white);font-size:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}#popup #social-container{width:80%;height:100px;display:flex;justify-content:space-evenly;align-items:center}#popup #social-container svg{background-color:transparent;stroke:transparent;border-radius:10px;transition:background-color .3s ease-in-out,stroke .3s ease-in-out,transform .3s ease-in-out}#popup #social-container svg:hover{transform:scale(1.2)}#popup #social-container svg.stroke{fill:none;stroke:var(--accent);stroke-width:30px}#popup #social-container svg.fill{fill:var(--accent)}#popup #social-container svg.stroke:hover{background-color:rgba(var(--accentno),.7);stroke:var(--black);stroke-width:40px}#popup #social-container svg.fill:hover{background-color:rgba(var(--accentno),.7);fill:var(--black)}@media(max-width:700px){html{height:100%}body{height:100%;background-size:75%}#landing-page #results #counter{font-size:1.8rem}#landing-page #play{font-weight:bolder}#landing-page #share{right:10%;bottom:5%}#game-page{flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden}.ad-box#left{height:150px;width:100%}.ad-box#right{width:100%}#card{padding:40px 80px 40px 80px}#result-popup #popup{padding:10px 40px 10px 40px;width:70%}#result-popup #popup img{height:200px;width:200px}}@media (min-width:701px) and (max-width:1024px){body{background-size:40%}#game-page{flex-direction:column;justify-content:flex-start;align-items:center}.ad-box#left{height:400px;width:100%}.ad-box#right{width:100%}#card{width:85%}}@media (min-width:701px) and (max-width:1024px) and (orientation:landscape){#result-popup>#popup{width:50%;height:80%}#popup img{height:300px;width:300px}}@media (max-width:1024px) and (hover:none) and (pointer:coarse){.toggles:hover{background-color:transparent}.toggles:active{background-color:rgba(var(--black3no),.8)}#landing-page #play:hover{background-color:rgba(var(--accentno),.7)}#landing-page #play:active{background-color:var(--accent);transform:scale(1.1)}#user-input button:hover{background-color:var(--accent)}#user-input button:active{background-color:rgba(var(--accentno),.7)}#popup #social-container svg:hover{transform:scale(1)}#popup #social-container svg:active{transform:scale(1.2)}#popup #social-container svg.stroke:hover{background-color:transparent;fill:none;stroke:var(--accent);stroke-width:30px}#popup #social-container svg.fill:hover{background-color:transparent;fill:var(--accent)}#popup #social-container svg.stroke:active{background-color:rgba(var(--accentno),.7);stroke:var(--black);stroke-width:40px}#popup #social-container svg.fill:active{background-color:rgba(var(--accentno),.7);fill:var(--black)}}