@import "tailwindcss";

:root {
    --background-primary: white;
    --background-secondary: '';
    --background-tertiary: #dbeafe;
    --background-accent: '';
    --background-compliment: '';
    --background-gradient: '';
    --background-muted: #f8fafc;

    --color-primary: #030615;
    --color-secondary: '';
    --color-tertiary: '';
    --color-accent: '';
    --color-compliment: '';
    --color-gradient: '';
    --color-muted: ;
    --color-link: #2563eb;
    --color-link-transparent: rgba(37, 99, 235, 0.1);

    --color-success: '';
    --color-warning: '';
    --color-error: '';
    --color-info: '';
    --color-highlight: #fef9c3;

    --gradient-start: #9580ff;
    --gradient-end: #80ffea;

    --border-primary: #f1f5f9;
    --border-secondary: #60a5fa;
    --border-highlight: #64748b;
    --border-tertiary: '';

    --shadow-dark: '';
    --shadow-light: '';
    --shadow-text: '';

    --padding-small: 1rem;
    --padding-large: 2rem;

    --border-radius-small: 0.5rem;
    --border-radius-large: 0.75rem;
    --highlight-border-radius: 0.5rem;

    --text-selection: '';
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-primary: #05070f;
        --background-secondary: #0e101e;
        --background-tertiary: #121424;
        --background-accent: '';
        --background-compliment: '';
        --background-gradient: '';
        --background-muted: #1a1e32;

        --color-primary: white;
        --color-secondary: '';
        --color-tertiary: '';
        --color-accent: '';
        --color-compliment: '';
        --color-gradient: '';
        --color-muted: ;
        --color-link: #60a5fa;
        --color-link-transparent: rgba(37, 99, 235, 0.1);

        --color-success: '';
        --color-warning: '';
        --color-error: '';
        --color-info: '';
        --color-highlight: #fef9c3;

        --gradient-start: #9580ff;
        --gradient-end: #80ffea;

        --border-primary: #29325b;
        --border-secondary: #60a5fa;
        --border-highlight: #4649af;
        --border-tertiary: '';

        --shadow-dark: '';
        --shadow-light: '';
        --shadow-text: '';

        --padding-small: 1rem;
        --padding-large: 2rem;

        --border-radius-small: 0.5rem;
        --border-radius-large: 0.75rem;
        --highlight-border-radius: 0.5rem;

        --text-selection: '';
    }
}



/* *{
    border: 1px solid red;
} */

h1 {
  font-family: 'Press Start 2P', cursive, sans-serif;
}

h2 {
  font-family: 'monospace', monospace, sans-serif;
}

p {
  font-family: 'monospace', monospace, sans-serif;
}

/* #profileImage{
  clip-path: circle(50% at 50% 50%);

} */

button {
    /* color: var(--color-primary);
    background-color: var(--background-primary); */
    width: fit-content;
    font-family: 'Press Start 2P', cursive, sans-serif;
    font-size: inherit;
    font-weight: 500;
    padding: 0.25rem 1.25rem;
    border: 1.5px solid var(--border-secondary);
    border-radius: var(--border-radius-small);
    box-shadow: 2px 2px 0 0 var(--border-secondary);
    transition-duration: 200ms;
}

button:hover {
    box-shadow: 0 0 0 0 var(--border-secondary);
    transform: translate(2px, 2px);
}