:root {
    --background-color: #000;
    --color: #fafafa;
    --color-bold: #fff;
    --surface: #111;
    --outline: rgba(255, 255, 255, 0.25);
    color-scheme: dark;

    --border-radius: 12px;
    --gradient-start: 90deg;
}

@media (prefers-color-scheme: light) {
    :root {
        --background-color: #fff;
        --surface: #fafafa;
        color-scheme: light;
    }
}

body {
    margin: 0 12px;
    font-family: system-ui, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background-color);
    color: var(--color);

    display: flex;
    align-items: center;
    height: 100dvh;
}

.card {
    margin: auto;
    max-width: 360px;
    flex: 1;
    border-radius: var(--border-radius);
    position: relative;
    z-index: 100;
}

.card h1 {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 2px 0;
}

.card h4 {
    font-size: 0.8em;
    line-height: 0.8em;
    margin: 2px 0;
}

.content {
    padding: 24px 24px;
    background-image: conic-gradient(from var(--gradient-start), rgba(102, 0, 255, 0.8), rgba(3, 247, 117, 0.8), rgba(7, 72, 238, 0.8), rgba(223, 10, 230, 0.8), rgba(102, 0, 255, 0.8));
    background-size: calc(100% + 2px) calc(100% + 2px);
    background-position: -1px -1px;
    border: 1px solid var(--outline);
    border-radius: var(--border-radius);
}

.shadow:before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translate3d(0, 0, -1px);
    background: conic-gradient(from var(--gradient-start), rgba(102, 0, 255, 0.8), rgba(3, 247, 117, 0.8), rgba(7, 72, 238, 0.8), rgba(223, 10, 230, 0.8), rgba(102, 0, 255, 0.8));
    filter: blur(64px);
    z-index: -1;
}

.row {
    display: flex;
    justify-content: space-between;
}

.contact {
    margin-top: 96px;
}