/* Base styles */
:root {
    --color-bg: #1e1e2f;
    --color-text: #e0e0ff;
    --color-card: #2a2a40;
    --color-border: #4a4a6a;
    --color-link: #6a5acd;
    --color-link-hover: #9370db;
    --font-size-base: 16px; /* Base font size */
}

body {
    background-color: var(--color-bg);
    font-family: 'Roboto', sans-serif;
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Typography */
.centered { text-align: center; }
.small { font-size: 0.875rem; }

/* Profile picture */
.profile-picture {
    width: 100%;
    max-width: 9.375rem;  /* 150px / 16px = 9.375rem */
    height: auto;
    border: 0.1875rem solid var(--color-border);  /* 3px */
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.25rem;  /* 20px */
}

/* Business card */
.business-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;  /* 10px */
    padding: 1.25rem;  /* 20px */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);  /* 4px 8px */
    max-width: 400px;
    text-align: left;
    color: var(--color-text);
}

/* Links */
a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.container {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 37.5rem) {  /* 600px */
    body {
        padding: 1.25rem;
    }

    .business-card {
        padding: 1rem;
        max-width: 90%;
    }

    h1 {
        font-size: 1.75rem;
    }
}