@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";:root{--background-color: #fff;--black: #111;--gray: #333;--btn-color: #ededed;--btn-hover-color: #d4d4d4;--bg: rgba(0, 0, 0, .35);--green: rgba(147, 245, 138, .75);--other-green: #6ce362;--light-green: rgba(0, 255, 0, .25);--dark-green: #64df59;--red: rgba(231, 105, 98, .75);--light-red: rgba(255, 0, 0, .15);--orange: #ff8400;--yellow: rgba(255, 233, 128, .75);--dark-yellow: #ffc400}*{box-sizing:border-box;margin:0;padding:0;color:var(--black);font-family:Outfit,sans-serif}.heading{font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:600;text-wrap:balance}.text-lg{font-size:clamp(1.5rem,2.15vw,2rem);font-weight:600}.text-med{font-size:clamp(1.25rem,1.75vw,1.5rem);font-weight:400}.text-sm{font-size:clamp(1.05rem,1.1vw,1.1rem);font-weight:400}.flex-center{display:flex;align-items:center;justify-content:center}.flex-column{flex-direction:column;gap:.25rem;width:100%}.effect{padding:.5rem 0;background-color:var(--btn-color);border-radius:.25rem}.btn{border:none;background-color:var(--btn-color);text-align:center;color:var(--black);text-decoration:none;outline:none;border-radius:.25rem}.bold{font-weight:600}.gray{color:var(--gray)}.max-cols{grid-column:-1 / 1;text-align:center}.border-bottom{border-bottom:.1rem solid var(--black)}.border-left{border-left:.1rem solid var(--black)}.m1{margin-bottom:1rem}.m2{margin-top:1rem}.m3{margin-bottom:.5rem}.m4{margin-top:.5rem}.m5{margin-left:.25rem}.green{background-color:var(--green)}.light-green{background-color:var(--light-green)}.red{background-color:var(--red)}.light-red{background-color:var(--light-red)}.yellow{background-color:var(--yellow)}.main-container{flex-direction:column;height:100%;min-height:100vh;background-color:var(--background-color)}.progress-bar{width:min(85%,250px);height:clamp(30px,2.75vw,35px);background-color:var(--btn-hover-color);border-radius:.25rem;overflow:hidden}.progress-container{display:flex;justify-content:center;width:min(100%,250px)}.daily-container{flex-direction:column;width:100%;padding:1rem .5rem 0;border-radius:.25rem}.daily-container .days{display:grid;grid-template-columns:repeat(7,1fr);width:clamp(285px,75%,500px)}.navbar{display:flex;align-items:center;justify-content:space-between;width:clamp(300px,95%,500px);margin:1rem auto 0}.navbar.main{position:fixed;top:0;left:50%;transform:translate(-50%)}.navbar .nav-container{display:flex;gap:clamp(.5rem,1.75vw,1rem);list-style:none}.navbar .nav-container .btn{width:clamp(35px,3.25vw,40px);height:clamp(35px,3.25vw,40px);padding:.25rem;transition:transform .3s ease,background-color .3s ease}.navbar .nav-container .btn.active{background-color:var(--green)}.grid-container{display:grid;grid-template-columns:repeat(8,1fr);width:clamp(250px,90vw,415px);margin-top:max(2vw,1.25rem)}.grid-item{position:relative;border-top:.1rem solid var(--black);border-right:.1rem solid var(--black);aspect-ratio:1 / 1;transition:background-color .5s ease}.grid-item img{width:95%;height:auto;object-fit:contain;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}.grid-item .icon{position:absolute;top:-3%;right:-3%;z-index:1001}.keyboard-container{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem;width:clamp(250px,90vw,415px);margin-top:max(2vw,1.25rem);-webkit-user-select:none;user-select:none}.keyboard-container .froot-key{transition:background .3s ease,transform .3s ease}.keyboard-container .froot-key.green{background-color:var(--green)}.keyboard-container .froot-key.yellow{background-color:var(--yellow)}.keyboard-container .froot-key.absent{background-color:var(--red)}.keyboard-container .froot-key.used{background-color:var(--btn-hover-color)}.keyboard-container .froot-key img{width:100%;height:auto;object-fit:contain;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}.stats-container .stats-main{display:flex;flex-direction:column;min-height:75vh}.stats-container .stats-main .distribution{flex-direction:column;padding-bottom:1.5rem}.stats-container .distribution .effect{width:100%;text-align:center}.stats-container .stats-main .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:.75rem;width:clamp(300px,85vw,650px);padding-bottom:1.5rem}.stats-container .stats-main .stats-grid:first-child{margin-top:max(2.5vw,1.5rem)}.stats-container .stats-main .stats-grid:nth-child(2){grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.stats-container .stats-main .stats-item{flex-direction:column;width:100%;padding:.5rem 0;background-color:var(--btn-color);border-radius:.25rem}.stats-container .stats-grid.extra-padding .stats-item{padding:.75rem 0}.stats-text{gap:.25rem}.inventory-container{flex-direction:column;min-height:75vh;padding-bottom:2.5rem}.inventory-container .inventory-layout{margin-top:max(2.5vw,1.5rem)}.inventory-container .inventory-note{width:clamp(300px,85vw,650px);margin-top:.5rem;text-align:left}.inventory-container .inventory-layout .collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:.5rem;width:clamp(300px,75vw,500px);margin:.5rem auto 0}.inventory-container .inventory-layout .collection-item{padding:0 .5rem}.inventory-container .inventory-layout .collection-froot{width:clamp(25px,85%,50px)}.inventory-container .inventory-layout .stand-grid{display:grid;gap:.5rem;width:clamp(300px,85vw,650px);margin-top:.75rem}.inventory-container .inventory-layout .stand-wrapper{flex-direction:column;gap:.5rem;padding:1rem;background-color:var(--btn-color);border-radius:.25rem}.inventory-container .inventory-layout .stand-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:.5rem;width:100%}.inventory-container .inventory-layout .stand-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.1rem}.inventory-container .inventory-layout .item-img{width:clamp(50px,45%,100px);transition:transform .3s ease}.inventory-container .inventory-layout .recipe-froots{border-radius:.5rem}.inventory-container .inventory-layout .recipe-froots img{width:clamp(40px,20%,50px)}.information-container{min-height:75vh}.information-container .information-layout{flex-direction:column;gap:.75rem;width:clamp(300px,85vw,650px);margin-top:max(2.5vw,1.5rem);padding-bottom:1.5rem}.information-container .information-layout .effect{width:100%;padding:.5rem;text-align:center}.information-container .information-layout .text-sm{width:100%;text-align:left}.information-container .information-layout .example-image{display:flex;width:clamp(275px,100%,425px);margin:.75rem 0;border-bottom:.1rem var(--black) solid;border-left:.1rem var(--black) solid}.information-container .information-layout .effect.small{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));grid-template-rows:1fr 1fr;gap:1rem;width:clamp(300px,85vw,650px)}.information-container .information-layout .contact-btn{width:fit-content;margin:.25rem 0 1rem;padding:.5rem 1rem;box-shadow:0 .25rem 0 var(--btn-hover-color)}.information-container .information-layout .linkedin-icon{width:clamp(25px,25%,40px)}.information-container .information-layout .example-container{display:flex;align-items:center}.information-container .information-layout .example-froots{display:flex;flex-shrink:2.5;align-items:center}.information-container .information-layout .example-container .grid-item{width:clamp(30px,10vw,50px);margin:0 .25rem;border:.1rem var(--black) solid}.modal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--bg);z-index:1002}.modal-container.no-shadow{background-color:transparent}.modal-container .modal{flex-direction:column;gap:.5rem;width:max(35vw,310px);padding:1.25rem 1rem;background-color:var(--background-color);border-radius:1rem;z-index:1003;box-shadow:0 .25rem .5rem var(--bg)}.modal-container .no-gap{gap:0}.modal-container .modal.mini-modal{width:fit-content;padding:.75rem 2.25rem;border-radius:.5rem}.modal-container .modal.mini-modal .mini-level-up{display:flex;width:fit-content;margin-top:.25rem}.modal-container .modal.copy-modal{width:fit-content;padding:.5rem 1rem;background-color:var(--other-green);border-radius:.5rem}.modal-container .modal.intro{width:max(40vw,310px)}.modal-container .modal .text-sm{width:100%;text-align:left}.modal-container .modal .modal-flex{display:flex;align-items:center}.modal-container .modal .modal-apart{display:flex;align-items:center;justify-content:space-evenly;width:100%}.modal-container .modal .modal-btn{cursor:pointer;margin-top:.25rem;padding:.75rem 1rem;box-shadow:0 .25rem 0 var(--btn-hover-color)}.modal-container .modal .win-text{width:90%;margin-top:1rem;text-align:center}.modal-container .modal .win-game-container{width:100%}.modal-container .modal .win-game-container>div{flex:1}.modal-container .win-game-container .flex-column{gap:0}.modal-container .welcome-container .text-sm,.modal-container .win-game-container .text-sm{text-align:center}.modal-container .modal .welcome-calendar>*{padding:.25rem 0}.modal-container .modal .stats-item{flex-direction:column}.modal-container .modal .modal-froots{display:grid;grid-template-columns:repeat(8,1fr)}.modal-container .modal .modal-froots img{width:100%}.modal-container .modal .social-text{text-align:center}.modal-container .modal .social-media{display:flex;gap:max(1vw,.5rem)}.modal-container .modal .copy-icon{transition:transform .3s ease}.modal-container .modal .intro-example{display:grid;grid-template-columns:repeat(2,1fr);gap:.05rem;width:100%;margin:.5rem 0}.modal-container .modal .intro-example .intro-container{display:flex;align-items:center}.modal-container .modal .intro-example .grid-item{flex-basis:50px;flex-shrink:0;width:clamp(35px,45%,45px);margin-right:.25rem;border:.1rem solid var(--black)}.navbar .nav-container .btn:hover{cursor:pointer;background-color:var(--green);transform:scale(1.05)}.inventory-container .inventory-layout .item-img:hover,.modal-container .modal .copy-icon:hover{cursor:pointer;transform:scale(1.05)}.keyboard-container .froot-key.clickable:hover{cursor:pointer;background-color:var(--btn-hover-color);transform:scale(1.05)}.keyboard-container .froot-key.green:hover{background-color:var(--dark-green)}.keyboard-container .froot-key.yellow:hover{background-color:var(--dark-yellow)}.modal-container .modal .modal-btn:active,.information-container .information-layout .contact-btn:active{box-shadow:none;transform:translateY(.25rem)}.keyboard-container .froot-key.clickable:active{transform:scale(.9)}@keyframes flame{0%{filter:drop-shadow(0 0 .15rem #ff9a00);transform:scaleX(.95) scaleY(1.05) translateY(0)}25%{filter:drop-shadow(0 0 .3rem #ffb000);transform:scaleX(1.05) scaleY(1.15) translateY(-1px)}50%{filter:drop-shadow(0 0 .45rem #ff6a00);transform:scaleX(.9) scaleY(1.25) translateY(-2px)}75%{filter:drop-shadow(0 0 .25rem #ffb000);transform:scaleX(1) scaleY(1.1) translateY(-1px)}to{filter:drop-shadow(0 0 .15rem #ff9a00);transform:scaleX(.95) scaleY(1.05) translateY(0)}}.glow-icon{animation:flame 1.2s infinite ease-in-out}