@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";:root{--background-color: #fff;--black: #111;--btn-color: #e6e6e6;--btn-hover-color: #d4d4d4;--green: rgba(147, 245, 138, .75);--dark-green: rgb(100, 223, 89);--red: rgba(231, 105, 98, .75);--yellow: rgba(255, 233, 128, .75);--dark-yellow: rgba(255, 196, 0, 1)}*{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:500}.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:300}.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;transition:background-color .3s ease,transform .3s ease}.bold{font-weight:600;font-style:italic}.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}.green{background-color:var(--green)}.light-green{background-color:#00ff0040}.red{background-color:var(--red)}.light-red{background-color:#ff000026}.yellow{background-color:var(--yellow)}.main-container{flex-direction:column;height:100%;min-height:100vh;background-color:var(--background-color)}.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)}.navbar .nav-container .btn{width:clamp(35px,3.25vw,45px);height:clamp(35px,3.25vw,45px);padding:.25rem;background-color:var(--btn-color);border-radius:.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{background-color:var(--btn-color);border-radius:.25rem;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 img{width:100%;height:100%;object-fit:cover}.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(200px,1fr));gap:1rem;width:clamp(300px,85vw,700px);padding-bottom:1.5rem}.stats-container .stats-main .stats-grid:first-child{margin-top:max(2.5vw,1.5rem)}.stats-container .stats-main .stats-item{flex-direction:column;width:100%;padding:.5rem 0;background-color:var(--btn-color);border-radius:.25rem}.stats-text{gap:.5rem}.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,700px);margin-top:.5rem;text-align:left}.inventory-container .inventory-layout .collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:.35rem;width:clamp(300px,85vw,700px);margin-top:.5rem}.inventory-container .inventory-layout .collection-item{padding:0 .5rem;background-color:var(--btn-color);border-radius:.25rem}.inventory-container .inventory-layout .collection-froot{width:clamp(25px,85%,50px)}.inventory-container .inventory-layout .stand-grid{display:grid;gap:.35rem;width:clamp(300px,85vw,700px);margin-top:.5rem}.inventory-container .inventory-layout .stand-wrapper{flex-direction:column;gap:.35rem;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,700px);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:clamp(200px,50%,225px);margin:.25rem 0 1rem;padding:.5rem 1rem}.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}.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:#00000059;z-index:1002}.modal-container.no-shadow{background-color:transparent}.modal-container .modal{flex-direction:column;gap:.5rem;width:max(max(35vw,35vh),300px);padding:clamp(.75rem,6vh,1.5rem) clamp(.75rem,3vw,1.5rem);background-color:var(--background-color);border-radius:1rem;z-index:1003;box-shadow:0 .25rem .5rem #00000059}.modal-container .modal.mini-modal{width:fit-content;padding:.75rem 2.25rem}.modal-container .modal.copy-modal{width:fit-content;padding:.5rem 1rem;background-color:var(--dark-green);border-radius:.5rem}.modal-container .modal.intro{width:max(max(40vw,40vh),300px)}.modal-container .modal .text-sm{width:100%;text-align:left}.modal-container .modal .welcome-stats{display:grid;grid-template-columns:3fr 4fr;gap:.5vw;background-color:var(--btn-color);padding:.5rem;border-radius:.25rem}.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);margin-top:.25rem}.modal-container .modal .copy-icon{transition:transform .3s ease}.modal-container .modal .modal-flex{display:flex;align-items:center}.modal-container .modal .modal-apart{display:flex;justify-content:space-evenly;width:100%}.modal-container .modal .modal-btn{margin-top:.25rem;padding:.75rem 1rem}.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,.information-container .information-layout .contact-btn:hover,.modal-container .modal .modal-btn:hover{cursor:pointer;background-color:var(--btn-hover-color);transform:scale(1.05)}.keyboard-container .froot-key.clickable:active{transform:scale(.9)}.keyboard-container .froot-key.green:hover{background-color:var(--dark-green)}.keyboard-container .froot-key.yellow:hover{background-color:var(--dark-yellow)}