@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}.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}.green{background-color:var(--green)}.red{background-color:var(--red)}.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:95%;object-fit:cover}.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:100vh}.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:nth-child(2){display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,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-grid .stats-item{flex-direction:column;width:100%;padding:.5rem 0;background-color:var(--btn-color);border-radius:.25rem}.stats-container .stats-main .stats-grid .stats-item .stats-text{gap:.5rem}.howto-container{min-height:75vh}.howto-container .howto-layout{flex-direction:column;gap:.75rem;width:clamp(300px,85vw,700px);margin-top:max(2.5vw,1.5rem);padding-bottom:1.5rem}.howto-container .howto-layout .example-image{display:flex;width:clamp(275px,100%,425px);margin:.75rem 0;border-bottom:.1rem #111 solid;border-left:.1rem #111 solid}.howto-container .howto-layout .effect{width:100%;padding:.5rem;text-align:center}.howto-container .howto-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)}.howto-container .howto-layout .text-sm{width:100%;text-align:left}.howto-container .howto-layout .example-container{display:flex;align-items:center}.howto-container .howto-layout .example-container .example-froots{display:flex;flex-shrink:2.5}.howto-container .howto-layout .example-container .grid-item{width:clamp(30px,45%,50px);margin:0 .25rem;border:.1rem #111 solid}.modal-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000059;z-index:1002}.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.intro{width:max(max(40vw,40vh),300px)}.modal-container .modal .text-sm{width:100%;text-align:left}.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-media{display:flex;gap:max(1vw,.5rem);margin-top:.25rem}.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;border:none;background-color:var(--btn-color);text-align:center;color:var(--black);outline:none;border-radius:.25rem;transition:background-color .3s ease,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 .intro-container .grid-item{flex-basis:50px;flex-shrink:0;width:clamp(35px,45%,45px);margin-right:.25rem;border:.1rem solid #111}.navbar .nav-container .btn:hover{cursor:pointer;background-color:var(--green);transform:scale(1.05)}.keyboard-container .froot-key.clickable: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)}