:root {
    color-scheme: dark;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    background: #02040d;
    color: #f4f7ff;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% -15%, rgba(34, 126, 255, 0.38), transparent 42rem),
        #02040d;
}

main {
    width: min(46rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 4rem 0;
}

.mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    place-items: center;
    border: 1px solid rgba(127, 193, 255, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #a9efff, #1682ff 45%, #1737bd 75%);
    box-shadow: 0 0 2rem rgba(22, 130, 255, 0.38);
    font-size: 1.35rem;
}

h1,
h2 {
    letter-spacing: -0.025em;
}

h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 8vw, 3.6rem);
}

h2 {
    margin-top: 2rem;
    color: #dceaff;
    font-size: 1.15rem;
}

p,
li {
    color: #b9c5da;
    line-height: 1.65;
}

a {
    color: #6fbcff;
}

.intro {
    max-width: 38rem;
    color: #d9e3f5;
    font-size: 1.12rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.card {
    display: block;
    padding: 1.25rem;
    border: 1px solid rgba(144, 185, 255, 0.16);
    border-radius: 1.1rem;
    background: rgba(14, 24, 48, 0.72);
    color: inherit;
    text-decoration: none;
}

.card:hover {
    border-color: rgba(111, 188, 255, 0.52);
    background: rgba(20, 39, 75, 0.8);
}

.card strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.card span,
.updated {
    color: #91a0b9;
}

footer {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(144, 185, 255, 0.14);
    color: #78869f;
    font-size: 0.88rem;
}

@media (max-width: 35rem) {
    main {
        padding: 2rem 0;
    }
}