@import url("https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap");.tech-page{text-align:center}.tech-list{display:flex;flex-direction:column;align-items:center;margin:2rem 1rem 1rem}.tech-category{width:100%;margin-bottom:2rem;grid-gap:1rem;gap:1rem;padding:1rem;border-radius:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,.5fr));animation:fadeIn .2s ease}.tech-category.excellent,.tech-category.excellent .tech-item{border:1px solid blue;box-shadow:0 0 5px 2px rgba(0,0,255,.5)}.tech-category.excellent .tech-item:hover{box-shadow:0 0 5px 5px rgba(0,0,255,.5)}.tech-category.comfortable,.tech-category.comfortable .tech-item{border:1px solid green;box-shadow:0 0 5px 2px rgba(0,128,0,.5)}.tech-category.comfortable .tech-item:hover{box-shadow:0 0 5px 5px rgba(0,128,0,.5)}.tech-category.familiar,.tech-category.familiar .tech-item{border:1px solid #ff0;box-shadow:0 0 5px 2px rgba(255,255,0,.5)}.tech-category.familiar .tech-item:hover{box-shadow:0 0 5px 5px rgba(255,255,0,.5)}.tech-category.used_once,.tech-category.used_once .tech-item{border:1px solid orange;box-shadow:0 0 5px 2px rgba(255,166,0,.5)}.tech-category.used_once .tech-item:hover{box-shadow:0 0 5px 5px rgba(255,166,0,.5)}.tech-item{font-family:Afacad Flux,sans-serif;font-size:1.2rem;min-width:100px;height:200px;padding-top:1.2rem;background-color:#000;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;position:relative;opacity:0;animation:fadeIn .2s ease-out forwards;transition:scale .3s ease,opacity .3s ease,box-shadow .2s ease;z-index:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tech-type-icon{position:absolute;top:10px;right:10px;transition:scale .3s ease}.tech-type-icon:hover{scale:1.3}.tech-name{color:#d3d3d3;margin:0}.tech-desc{color:grey;font-size:.8rem;margin:0}.tech-buttons{display:flex;flex-direction:column}@media (max-width:400px){.tech-category{grid-template-columns:repeat(2,minmax(100px,1fr))}}@media (max-width:335px){.tech-type-icon{top:5px;right:5px}}.proficiency-key{display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding-bottom:1rem;padding-top:1rem;background-color:rgba(0,0,0,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(20px);position:-webkit-sticky;position:sticky;top:0;z-index:1000}.proficiency-key-label{color:#888;font-size:.8rem}.color-blocks,.key-item{display:flex}.key-item{align-items:center;gap:.15rem;padding-right:.3rem;padding-left:.3rem}.block{height:12px;width:12px;border:1px solid hsla(0,0%,100%,.1);border-radius:2px}.label{font-size:.875rem;color:#888}@media (max-width:360px){.label{font-size:.7rem}}.tech-item-button{width:80px;height:22px;background:transparent;cursor:pointer;transition:all .3s ease;position:relative;margin-bottom:5px}.tech-item-button.excellent{color:#00aced;padding:0;border:1px solid #00aced;box-shadow:0 0 5px #00aced,inset 0 0 5px}.tech-item-button.excellent:after{position:absolute;background-color:transparent;content:"";top:2px;left:2px;width:93%;height:75%;border:1px solid #00aced;box-shadow:inset 0 0 5px #00aced;opacity:0;transition:all .3s ease}.tech-item-button.excellent:hover:after{opacity:1}

/* ! ------------------------------------- */.tech-item-button.comfortable{color:#04ed00;padding:0;border:1px solid #04ed00;box-shadow:0 0 5px #04ed00,inset 0 0 5px}.tech-item-button.comfortable:after{position:absolute;background-color:transparent;content:"";top:2px;left:2px;width:93%;height:75%;border:1px solid #04ed00;box-shadow:inset 0 0 5px #04ed00;opacity:0;transition:all .3s ease}.tech-item-button.comfortable:hover:after{opacity:1}.tech-item-button.familiar{color:#ff0;padding:0;border:1px solid #ff0;box-shadow:0 0 5px #ff0,inset 0 0 5px}.tech-item-button.familiar:after{position:absolute;background-color:transparent;content:"";top:2px;left:2px;width:93%;height:75%;border:1px solid #ff0;box-shadow:inset 0 0 5px #ff0;opacity:0;transition:all .3s ease}.tech-item-button.familiar:hover:after{opacity:1}.tech-item-button.used_once{color:orange;padding:0;border:1px solid orange;box-shadow:0 0 5px orange,inset 0 0 5px}.tech-item-button.used_once:after{position:absolute;background-color:transparent;content:"";top:2px;left:2px;width:93%;height:75%;border:1px solid orange;box-shadow:inset 0 0 5px orange;opacity:0;transition:all .3s ease}.tech-item-button.used_once:hover:after{opacity:1}.tech-item-button.none{color:grey;padding:0;border:1px solid grey;box-shadow:0 0 5px grey,inset 0 0 5px}.tech-item-button.none:after{position:absolute;background-color:transparent;content:"";top:2px;left:2px;width:93%;height:75%;border:1px solid grey;box-shadow:inset 0 0 5px grey;opacity:0;transition:all .3s ease}.tech-item-button.none:hover:after{opacity:1}