/* You can add global styles to this file, and also import other style files */

@import "tailwindcss";

:root {
    --color-primary: #e0e0e0;
    --color-secondary: #121212;
    --color-accent: #00ff9d;
    --color-ticker: #8a0000;
    --color-background: #121212aa;
    font-size: 1.1rem;
}

* {
    font-family: "Quintessential", sans-serif;
}

body::before {
    background: url(https://cdn.nhcarrigan.com/lore/misc/background.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    z-index: -1;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    pointer-events: none;
}

main {
    max-width: 800px;
    width: 95%;
    margin: 0 auto;
    background-color: var(--color-background);
    color: var(--color-primary);
    margin-top: 100px; /* Space for nav and ticker */
    margin-bottom: 100px; /* Space for footer */
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary);
}

button {
    background-color: var(--color-accent);
    color: var(--color-secondary);
    transition: background-color 0.3s ease;
}

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

p {
    @apply my-1;
}