.xrpj3v0{flex-wrap:wrap;place-content:center;width:100%;height:100dvh;display:flex;overflow:hidden}
.xrpj3v1{flex-direction:column;row-gap:40px;width:80%;display:flex}
.xrpj3v2{text-align:center;flex-direction:column;gap:4px;display:flex}
.xrpj3v3{flex-wrap:wrap;justify-content:space-around;gap:8px;display:flex}
.xrpj3v4{text-align:center;background-color:#282c34aa;border-radius:4px;grid-template-rows:100px auto;align-items:center;padding:4px 8px;transition:color .3s;display:grid;position:relative;overflow:hidden;box-shadow:4px 4px 6px 2px #1f1f1f}
.xrpj3v4:before{content:"";z-index:4;background-color:#abb2bf;width:0;height:100%;padding:4px 8px;transition:width .3s cubic-bezier(0,.55,.45,1);display:block;position:absolute;top:0;left:-26px;transform:skew(-8deg)}
.xrpj3v5{z-index:4;color:#abb2bf;width:100%;height:100%;transition:color .3s}
.xrpj3v6{z-index:4;font-size:1.5em}
@media screen and not (min-width:440px){.xrpj3v3{flex-direction:column}}
@media (hover:hover){.xrpj3v4:hover{color:#282c34}.xrpj3v4:hover:before{width:132%}.xrpj3v4:hover .xrpj3v5{color:#282c34}}
@media screen and not (min-width:460px){.xrpj3v4{grid-template-rows:1fr;grid-template-columns:48px 1fr}}