.boxes{max-width:500px}.box,.boxes{display:flex;flex-wrap:wrap;gap:5px}.box{font-size:.7em;padding:5px 10px;border-radius:5px;margin:1px 1px 5px;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer}.skills-box{background-color:#e0f7fa;color:#006064;transition:background-color .3s,color .3s;text-decoration:none;max-width:300px;padding:4px 8px}@media (max-width:768px){.skills-box{padding:4px 2px}}.cyan-box{background-color:#e0f7fa;color:#004749}.cyan-box:hover{background-color:#004749;color:#e0f7fa}.cyan-invert-box:hover{background-color:#e0f7fa;color:#004749}.cyan-invert-box{background-color:#004749;color:#e0f7fa}.red-box{background-color:#ffb8b8;color:#511304}.red-box:hover{background-color:#511304;color:#ffb8b8}.box-max-width{max-width:100px;text-decoration:none}.pink-box{background-color:#ffb8f3;color:#5e2354}.pink-box:hover{background-color:#5e2354;color:#ffb8f3}.yellow-box{background-color:#ffedb8;color:#4b4a2e}.yellow-box:hover{background-color:#4b4a2e;color:#ffedb8}.poststed-box{transition:background-color .3s,color .3s;color:#1d2d1b;background-color:#c2fcb9}.poststed-box:hover{color:#c2fcb9;background-color:#1d2d1b}.workplace-box{transition:background-color .3s,color .3s;color:#273e43;background-color:#b9f1fc}.workplace-box:hover{color:#b9f1fc;background-color:#273e43}.special-box{background-color:#298964;color:#f2fdf9}.special-box:hover{background-color:#1a6548;color:#f8fffc}.tab-bar{display:flex;flex-wrap:wrap}.tab-button{font-size:.7em;padding:1px 5px;border:none;border-radius:4px 5px 0 0;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s}.tab-button:hover{background-color:#006064;color:#e0f7fa}.tab-button.active{background-color:#004749;color:#e0f7fa;border-bottom:15px solid #0000002c}.tab-content{padding:20px 0;border-radius:5px}