@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --background-color: #f0f0f0;
}

body,
#offline-screen {
    background-color: var(--background-color);
    font-family: 'Inter', sans-serif;
}

.bg-gray {
    background-color: var(--background-color) !important;
}

a {
    text-decoration: none;
}

a.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bg-card {
    position: relative;
    overflow: hidden;
    z-index: -2;
    position: relative;
    background: radial-gradient(circle at 89% 14%, rgba(255, 120, 91, .55), transparent 18rem),
        radial-gradient(circle at 55% 118%, rgba(54, 211, 177, .28), transparent 21rem),
        linear-gradient(135deg, #18152e 0%, #2b2057 50%, #63316d 110%);
}

.bg-card::before,
.bg-card::after {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.bg-card::before {
    background: rgba(255, 181, 71, .08);
    height: 340px;
    right: -135px;
    top: -140px;
    width: 340px;
}

.bg-card::after {
    position: absolute;
    content: '';
    background: rgba(80, 227, 194, .05);
    bottom: -170px;
    height: 390px;
    right: 13%;
    width: 390px;
}

.bg-backdrop {
    backdrop-filter: blur(18px);
    background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
}

.border-25 {
    border-color: rgba(255, 219, 205, .25) !important;
}

h1 {
    font-size: 3.6rem;
    letter-spacing: -.055em;
    line-height: .98;
}

.dot {
    display: inline-block;
    border-radius: 50%;
    height: 7px;
    width: 7px;
}