.card-item{

display: inline-flex;
justify-content: center;
min-height: 135px;
}
.card_button{
width: 120px;
height: 120px;
color: white;
margin-top: 15px;
font-size: 13px;
background: linear-gradient(#3B3B40, 60%, black);
border-radius:50%;
outline: none !important;
transition: transform 0.3s;
}

.card_button:hover {
transform: scale(1.05);
}

.card_button:active {

}

#card1{
box-shadow: 0 0 20px #FF3C5D;
border: solid 1px #FF3C5D;
}

#card1:hover{
box-shadow: 0 0 30px #FF3C5D;
transition: 0.3s;
}

#card2{
box-shadow: 0 0 20px #00B0F0;
border: solid 1px #00B0F0;
}

#card2:hover{
box-shadow: 0 0 30px #00B0F0;
transition: 0.3s;
}

#card3{
box-shadow: 0 0 20px #70AD47;
border: solid 1px #70AD47;
}

#card3:hover{
box-shadow: 0 0 30px #70AD47;
transition: 0.3s;
}

#card4{
box-shadow: 0 0 20px #8FAADC;
border: solid 1px #8FAADC;
}

#card4:hover{
box-shadow: 0 0 30px #8FAADC;
transition: 0.3s;
}

#card5{
box-shadow: 0 0 20px #ED7D31;
border: solid 1px #ED7D31;
}

#card5:hover{
box-shadow: 0 0 30px #ED7D31;

}

@media only screen and (min-width: 768px) {
    .card_button {
        width: 170px;
        height: 170px;
        font-size: 18px;
    }
    .card-item {
    min-height: 185px;
    }
}
@media only screen and (min-width: 1025px) {
    .card_button {
        width: 200px;
        height: 200px;
        font-size: 24px;
    }
    .card-item {
    min-height: 215px;
    }
}

.cards_container {
padding-bottom: 15px;
}