:root {
    --background: #0F0E0E;
    --background-accent: #292727;
    --foreground: #FBF5F3;
    --accent-1: #e4ce76;
    --accent-2: #fbe8d9;
}

::selection {
  color: var(--accent-2);
  background: var(--background-accent);
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--accent-1);
    margin-top: 2rem;
}

a {
    color: var(--accent-1);
    text-decoration: underline;
}

.container {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    .content-wrapper {
        flex-direction: column;
    }

    .container {
        flex-direction: column;
        padding: 1rem;
    }
}