.roboto-400 {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.bonus-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: white !important;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.silver {
    background: linear-gradient(229deg, #202224, #6e6e6e, #b4b4b4, #d0d0d0);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: white !important;
}

.gold {
    background: linear-gradient(133deg, #8f6225, #d7a119, #f0d37a, #9f6805);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: white !important;
}

.platinum {
    background: linear-gradient(239deg, #2d2722, #d7c8c1, #decbc2, #4e423a);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    color: white !important;
}
.smaller {
    font-size: smaller;
}

@media (min-width: 576px) {
    .grid-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) {
    .grid-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 992px) {
    .grid-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .grid-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1400px) {
    .grid-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.absolute-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.wdxl-lubrifont-tc-regular {
  font-family: "WDXL Lubrifont TC", sans-serif;
  font-weight: 400;
  font-style: normal;
}