/* Custom Font */
@font-face {
    font-family: 'Sneaky-Times';
    src: url('rsc/Sneaky-Times.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* CSS Variables */
:root {
    --font-family: 'Sneaky-Times', sans-serif;
    --color-text: #333;
    --color-background: #f4f4f4;
    --color-container-background: #fff;
    --color-link: blue;
    --color-heading: #2c3e50;
    --color-paragraph: #666;
    --color-button-background: #2980b9;
    --color-button-text: white;
    --color-button-hover-background: #1a5276;
    --border-radius: 10px; /* Apple-style rounded corners */
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #ddd;
        --color-background: #333;
        --color-container-background: #444;
        --color-link: yellow;
        --color-heading: #f1c40f;
        --color-paragraph: #bbb;
        --color-button-background: #f39c12;
        --color-button-text: #333;
        --color-button-hover-background: #e67e22;
    }
}

/* General Styles */
body {
    font-family: var(--font-family);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
}

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

a:hover {
    text-decoration: underline;
}

/* Container Styles */
.container {
    text-align: center;
    background-color: var(--color-container-background);
    padding: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--color-heading);
}

p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: var(--color-paragraph);
}

/* Button Container Styles */
.button-container {
    margin-top: 20px;
}

.button-container button {
    background-color: var(--color-button-background);
    color: var(--color-button-text);
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.button-container button:hover {
    background-color: var(--color-button-hover-background);
}