src/components/AvailableServers/AvailableServers.scss
.availableserver{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.availableserver__map{
    margin-bottom: .8rem;
    position: relative;
    &--homeicon{
        color:#dcddde;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 50%;
        background-color: #36393f;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s;
        margin-bottom: 1.4rem;
        position: relative;
        &:hover{
            color:#fff;
            border-radius: 30%;
            background-color: #7289DA;
        }
        &::after{
            content:"";
            display: block;
            position: absolute;
            bottom: -1rem;
            border-radius: .1rem;
            background-color:hsla(0,0%,100%,0.06);
            left:.8rem;
            width: 3.2rem;
            height: .2rem;
        }
    }
    &-imageuniversal{
        object-fit:cover;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 50%;
        transition: border-radius .3s;
        &:hover{
            border-radius: 30%;
        }
    }
    &-text{
        color:#dcddde;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 50%;
        background-color: #36393f;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s;
        position: relative;
        font-size: 1.8rem;
        font-family: "Whitney-semibold";
        &:hover{
            color:#fff;
            border-radius: 30%;
            background-color: #7289DA;
        }
        
    }
    &:hover::before{
        border-radius: 0 2px 2px 0;
        transform: scaleY(2.5)
    }
    &::before{
        content:'';
        display:block;
        background-color: #fff;
        width: .45rem;   
        height:.9rem;
        position: absolute;
        border-radius: 0 4px 4px 0;
        top:2.25rem;
        left:-25%;
        transition: all .3s;    
    }
}
.availableserver__clicked{
    margin-bottom: .8rem;
    position: relative;
    &--homeicon{
        color:#fff;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 30%;
        background-color: #7289DA;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s;
        margin-bottom: 1.4rem;
        position: relative;
        &::after{
            content:"";
            display: block;
            position: absolute;
            bottom: -1rem;
            border-radius: .1rem;
            background-color:hsla(0,0%,100%,0.06);
            left:.8rem;
            width: 3.2rem;
            height: .2rem;
        }
    }
    &-imageuniversal{
        object-fit:cover;
        width: 4.8rem;
        height: 4.8rem;
        border-radius: 30%;
    }
    &::before{
        content:'';
        display:block;
        background-color: #fff;
        width:.45rem;   
        height:4rem;
        position: absolute;
        border-radius: 0 4px 4px 0;
        top:.5rem;
        left:-25%;
    }
}
