@import"https://fonts.googleapis.com/css2?family=Knewave&family=Playfair+Display&family=Roboto&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;font-family:roboto,sans-serif;--primary-color: hsl(0, 70%, 54%);--secondary-color: hsl(0, 0%, 92%);--text-dark: hsl(0, 0%, 5%) }#root{min-height:100vh;width:100%;display:grid;grid-template-rows:min-content 1fr min-content;grid-template-columns:100%}.loading{color:var(--primary-color);font-family:knewave,roboto,sans-serif;letter-spacing:.05rem;font-size:2rem;width:fit-content;margin:5rem auto 0}header{background-color:var(--primary-color);display:flex;justify-content:space-evenly;align-items:center;padding:.5rem 0;z-index:1}header>a{text-decoration:none}.logo-link{color:var(--secondary-color)}.banner{display:flex;align-items:center;gap:1rem}.logo-wrapper{max-width:40px;display:flex;border-radius:50%;border:2px solid var(--secondary-color)}.logo{width:100%}.banner-title{font-family:Knewave,roboto,sans-serif;font-size:1.3rem;letter-spacing:.05rem}header nav a{text-decoration:none;color:var(--secondary-color);font-family:knewave;letter-spacing:.05rem}header nav a:hover,header nav a:focus{text-decoration:underline}@media only screen and (width <= 450px){.banner-title{display:none}}footer{background-color:var(--primary-color);padding:1rem 0;display:flex;justify-content:center;color:var(--secondary-color)}main.homepage{display:flex;flex-direction:column;align-items:center;gap:5rem;width:100%;padding:5rem 1rem}.image-choices{width:min(1100px,100%);display:grid;grid-template-columns:repeat(auto-fit,min(330px,100%));justify-content:center;gap:2rem}.rules{font-size:clamp(.9rem,.5rem + 2vw,1.3rem);color:var(--primary-color);font-family:knewave;letter-spacing:.05rem;max-width:51ch;word-break:break-word}.settings-title{font-family:knewave,roboto,sans-serif;letter-spacing:.05rem;font-size:1.3rem;color:var(--primary-color)}.targets{display:grid;grid-template-columns:1fr 1fr 1fr}.target-img-card img{width:100%}.target-name{text-align:center;color:var(--primary-color);font-family:knewave;font-size:clamp(.9rem,.5rem + 2vw,1.2rem);letter-spacing:.05rem}.target-name.wizard-name{position:relative;left:-8px}.image-card{width:min(330px,100%);border:3px solid var(--primary-color);border-radius:20px;overflow:hidden;display:flex;box-shadow:0 0 10px #000}.image-card img{width:100%}.img-card-link{will-change:transform;transition:transform .1s linear;z-index:0}.img-card-link:hover,.img-card-link:focus{transform:scale(1.1)}main.game-page{display:flex;align-items:center;justify-content:center}.game-image-wrapper{width:100%;height:86.5vh;position:relative;overflow:auto}.target-box.hidden{display:none}.target-box{position:absolute;border:4px solid red;width:30px;height:30px}.target-btns{position:absolute;display:flex;flex-direction:column;gap:.5rem}.target-btns button{cursor:pointer;background-color:var(--primary-color);color:var(--secondary-color);outline:none;border:none;padding:.5rem 1rem;font-size:1rem;font-weight:700}.target-btns button:hover,.target-box:focus{color:var(--primary-color);background-color:var(--secondary-color)}.game-image{display:block}.game-image.zoom-out{width:100%;height:100%}.game-image-wrapper>button{cursor:pointer;position:fixed;width:clamp(45px,2vw + 20px,60px);display:flex;background-color:var(--primary-color);border:none;top:9%;border-radius:50%;padding:.5rem;outline:none}.zoom-btn{left:2%}.zoom-btn img,.help-btn img{width:100%;filter:brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(3081%) hue-rotate(72deg) brightness(127%) contrast(84%)}.help-btn{right:2%}.info-modal{position:fixed;left:0;right:0;width:fit-content;margin:0 auto;top:30%;background-color:#fff;border:3px solid var(--primary-color)}.info-modal.hidden,.form-modal.hidden{display:none}.form-modal{position:fixed;width:fit-content;right:0;left:0;margin:0 auto;top:30%;background-color:var(--secondary-color);padding:1rem;border:3px solid var(--primary-color);z-index:1}.form-modal form{display:flex;flex-direction:column;align-items:center;gap:1rem}.form-modal form label{display:block;color:var(--primary-color);font-size:clamp(1rem,.5rem + 2vw,1.3rem)}.form-modal form p{font-size:clamp(1rem,.5rem + 2vw,1.3rem);font-family:knewave,roboto,sans-serif;letter-spacing:.05rem;color:var(--primary-color)}.form-modal form input{font-size:1rem;padding:.2rem;outline:none;border:2px solid var(--primary-color)}.form-modal form input:hover,.form-modal form input:focus{border-color:var(--text-dark)}.form-modal button{cursor:pointer;border:2px solid var(--primary-color);outline:none;font-size:1rem;padding:.4rem 1rem;font-family:knewave,roboto,sans-serif;letter-spacing:.05rem;color:var(--secondary-color);background-color:var(--primary-color)}.form-modal button:hover,.form-modal button:focus{color:var(--primary-color);background-color:var(--secondary-color)}.errors{list-style:none;width:100%}.error{max-width:20ch;word-break:break-word}.character-marker{position:absolute;background-color:#40cf40;display:flex;padding:5px;border-radius:50%}.character-marker img{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(30%) hue-rotate(55deg) brightness(107%) contrast(107%)}main.leaderboard-page{margin:5rem 0;display:flex;flex-direction:column;align-items:center;gap:4rem}.leaderboard{width:min(700px,100%);border:3px solid var(--primary-color)}.leaderboard>:nth-child(2n){background-color:var(--secondary-color)}.leaderboard-title{font-size:1.5rem;color:var(--primary-color);font-family:knewave;letter-spacing:.05rem;max-width:51ch;word-break:break-word}.leaderboard-entry{display:grid;grid-template-columns:8ch max-content max-content;padding:1rem;color:var(--primary-color);align-items:center;justify-content:space-between}.entry-time{justify-self:center;color:var(--text-dark)}.entry-name{overflow:hidden;text-overflow:ellipsis;font-weight:700}.entry-date{opacity:.7}@media only screen and (width <= 400px){.leaderboard-entry{grid-template-columns:12ch max-content}.leaderboard>*>.entry-date{display:none}}main.error-page{display:flex;flex-direction:column;align-items:center;gap:1rem}.error-title{margin-top:6rem;font-size:clamp(.9rem,.5rem + 2vw,1.3rem);color:var(--primary-color);font-family:knewave;letter-spacing:.05rem;max-width:51ch;word-break:break-word}.errors-list{list-style:none}.error-ele{font-size:clamp(.9rem,.5rem + 2vw,1.3rem);color:var(--primary-color);max-width:51ch;word-break:break-word;font-weight:700}