.card{
    background: linear-gradient(var(--gray-400), #30363f);
    border-top: 8px solid var(--gray-300);
    padding: 40px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}

.card.button{
    border-top: solid 8px var(--primary);
}

.card.button.off{
    border-top: solid 8px var(--gray-300);
    cursor: not-allowed;
    opacity: 0.7;
}

.card.button.off h4{
    color: var(--gray-200) !important;
}

.card.button:hover{
    border-top: solid 8px var(--primary-light);
    background: linear-gradient(var(--gray-300), var(--gray-300));
}

.card.button.off:hover{
    border-top: solid 8px var(--gray-300);
    background: linear-gradient(var(--gray-400), #30363f);
}


.card.special{
    border-top: solid 8px var(--secondary-dark);
    background: linear-gradient(var(--secondary), var(--secondary-dark));
}

.card.special h3 b{
    color: #FCCD1D;
    filter: drop-shadow(2px 2px 0px #e9520c);
}

@keyframes appear {
    0%{
        transform: translateY(30%);
    }
    30%{
        transform: translateY(0%);
    }
    100%{
        transform: translateY(0);
    }
}

@media (max-width: 800px) {
    .card{
        padding: 20px;
    }
}