@font-face { font-family: 'MontserratV'; src: url('https://www.devmedia.com.br/workspace/skins/fonts/Montserrat-V.ttf');}
@keyframes sonic_anim{ 0%,20%{ left:-20%} 30%,49%{ left:100%;} 48%,49%{ left:140%;} 60%,100%{ left:-40%;} 0%,40%{ transform:scale(1, 1) translate(0);} 50%,100%{ transform:scale(-4,4) translate(0,30%);}}
@keyframes sonic_charset_anim{ 0%,25%{ background-position-x:0%;} 25.01%,50%{ background-position-x:33%;} 50.01%,75%{ background-position-x:67%;} 75.01%,100%{ background-position-x:100%;}}
.card-usuario.card-sonic .card-background { background: url("//www.devmedia.com.br/workspace/skins/cards/sonic/imagens/background.jpg"); image-rendering: pixelated; z-index: 1; background-size: 100% 100%;}
.card-usuario.card-sonic .card-background .sonic { position: absolute; height: 12.504%; width: 18.185%; bottom: 12.5%; animation: sonic_anim 5s infinite linear both;}
.card-usuario.card-sonic .card-background .sonic:after {position: absolute; height: 100%; width: 100%; top:0; left:0; content: ""; background: url("//www.devmedia.com.br/workspace/skins/cards/sonic/imagens/sonic_charset.png"); image-rendering: pixelated; background-repeat:no-repeat; background-size: auto 100%; animation: sonic_charset_anim .160s infinite linear both;}
.card-usuario.card-sonic .card-wrapper .card-foto { height: 70%; flex: 0 0 auto; z-index: 1; padding: 21.8% 10% 0%;}
.card-usuario.card-sonic .card-wrapper { flex-direction: column-reverse;}
.card-usuario.card-sonic .card-wrapper .card-foto .usuario-foto { margin: 0; background: none; border-radius: 50%; background: radial-gradient(#FFEB3B 63%, transparent 64%); padding: 7.5%;}
.card-usuario.card-sonic .card-wrapper .card-info { flex: 1 1 auto; width: 85%; padding: 0% 2% 14%; z-index: 2; margin: auto; box-sizing: border-box; font-family: 'MontserratV', sans-serif; gap: 5%; color: #001621;}
.card-usuario.card-sonic .card-wrapper .card-info .usuario-nome.sobrenome { margin-top: -2%;}
.card-usuario.card-sonic .card-wrapper .card-info .usuario-nome { font-size: 18px; stroke: #fff; stroke-width: 0px; fill: #fff; filter: drop-shadow(2px 0px 1px CurrentColor) drop-shadow(0px 2px 0px CurrentColor) drop-shadow(-2px 0px 0px CurrentColor) drop-shadow(0px -2px 1px CurrentColor); text-transform: uppercase;}
.card-usuario.card-sonic .card-info-gami { height: 33.5%; width: 100%; position: absolute; bottom: 5%; left: 3%; filter: drop-shadow(1px 0px 1px CurrentColor) drop-shadow(0px 1px 0px CurrentColor) drop-shadow(-1px 0px 0px CurrentColor) drop-shadow(0px -1px 1px CurrentColor);}
.card-usuario.card-sonic .card-info-gami .card-info-gami-group img { height: 40%;}
.card-usuario.card-sonic .card-info-gami .card-info-gami-group .usuario-value { width: 80%; fill: white; stroke: white; stroke-width: 0; transform-origin: center center; transform: scale(1.3) translate(6%, -1.5%); margin-right: 10%; margin-left: 10%;}
.card-usuario.card-sonic .card-info-gami .card-info-gami-group:nth-child(2) img { height: 50%;}