ul.social-buttons {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-top: 100px;
    font-size: 20px;
    justify-content: space-evenly;
    gap: 20px;
}

ul.social-buttons li {
    list-style : none;
    margin     : 50px auto;
    flex       : 1 1 240px;
    max-width  : 240px;
}

ul.social-buttons li a {
    text-decoration : none;
    display         : block;
    width           : 240px;
    height          : 80px;
    background      : #ECD5C7;
    text-align      : left;
    padding-left    : 15px;
    transform       : rotate(-30deg) skew(25deg) translate(0, 0);
    transition      : .5s;
    box-shadow      : -20px 20px 10px rgba(0, 0, 0, .5);
}

ul.social-buttons li a .fa-brands {
    font-size     : 40px;
    color         : #262626;
    line-height   : 80px;
    transition    : .5s;
    padding-right : 10px;
}

ul.social-buttons li a span {
    padding        : 0;
    margin         : 0;
    position       : absolute;
    top            : 20px;
    color          : #262626;
    letter-spacing : 4px;
    transition     : .5s;
}

ul.social-buttons li a:before {
    content    : '';
    position   : absolute;
    top        : 10px;
    left       : -20px;
    height     : 100%;
    width      : 20px;
    background : #CFCAC7;
    transform  : rotate(0deg) skewY(-45deg);
}

ul.social-buttons li a:after {
    content    : '';
    position   : absolute;
    bottom     : -20px;
    left       : -10px;
    height     : 20px;
    width      : 100%;
    background : #CFCAC7;
    transform  : rotate(0deg) skewX(-45deg);
}

ul.social-buttons li a:hover {
    transform  : rotate(-30deg) skew(25deg) translate(20px, -15px);
    box-shadow : -50px 50px 50px rgba(0, 0, 0, .5);
}

ul.social-buttons li:hover .fa {
    color : #fff;
}

ul.social-buttons li:hover span {
    color : #fff;
}

ul.social-buttons li:hover a:before,
ul.social-buttons li:hover a:after {
    filter : brightness(110%);
}

ul.social-buttons li:hover a,
ul.social-buttons li:hover a:before,
ul.social-buttons li:hover a:after {
    background: var(--social-color) !important;
}


/* Custom Icons */
.custom-icon {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    width: 35px;
    display: inline-block;
}

.social-myanimelist-icon {
    background-image: url('/assets/icons/mal.svg');
}

.social-myfigurecollection-icon {
    background-image: url('/assets/icons/fgc.svg');
}