@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');

* {
    transition: 0.25s;
}

body {
    font-family: 'Roboto';
}

.gradient:hover {
    background: linear-gradient(98.76deg, #DE4EEB 10.76%, #4200FF 94.38%);
}

.gradient {
    background: rgb(83, 79, 79);
}
*
{
    transition: 0.25s !important;
}
.bg-card {
    background-image: url('https://images.unsplash.com/photo-1652132071290-3d6f497eb40c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1964&q=80');
    filter: drop-shadow(0px 4px 10px rgba(255, 138, 0, 0.5));
    cursor: pointer;
    background-size: cover;
}

.bg-card:hover {
    filter: drop-shadow(0px 4px 19px rgba(255, 138, 0, 0.5));
    transform: scale(1.025);
}

.bg-grad {
    background: linear-gradient(124.44deg, #FFA800 0.45%, rgba(255, 151, 0, 0.44) 58.73%, #FF9700 98.61%);
    backdrop-filter: blur(1px);
}

.drawer {
    transform: translateY(-100%);
}

.open {
    transform: translateY(0%);
}

.col {
    color: #7a1b8b;
}

.arrow:hover>path {
    transform: translateY(4px);
}

.flip {
    transform: rotate(180deg) translateY(8px);
}