:root {
    /* Text size */
    --text-xs: 0.75rem;
    --text-s: 0.875rem;
    --text-base: 1rem;
    --text-l: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    
    /* Spacing */
    --boxed: 80rem;
    --frame-w: 5.675rem;
    --space-1: 1px;
    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 0.75rem;
    --space-l: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;

    /*border-radius */
    --border-radius: 1rem;
}
 /* Color */
 @property --bg-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #120925;
}
@property --fg-color {
    syntax: '<color>';
    inherits: false;
    initial-value: white;
}

@property --primary-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #8A26FF;
}

@property --primary-light-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #AC7FFF;
}

@property --primary-30 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(172, 127, 255, 0.30);
}

@property --secondary-color {
    syntax: '<color>';
    inherits: false;
    initial-value: #1749DE;
}

@property --black-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 0.06);
}
@property --bg-80 {
    syntax: '<color>';
    inherits: false;
    initial-value: #120925d2;
}

@property --black-33 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(0, 0, 0, 0.33);
}

@property --fg-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(255, 255, 255, 0.06);
}

@property --fg-10 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(255, 255, 255, 0.10);
}

@property --fg-20 {
    syntax: '<color>';
    inherits: false;
    initial-value: rgba(255, 255, 255, 0.20);
}

*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: "sculpin", sans-serif;
    font-style: normal;
    text-transform: lowercase;
}

main {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    color: var(--fg-color);
}

h1, h2, h3, h4, h5, b, strong, bold {
    font-weight: 700;
}

h1 {
    font-size: var(--text-6xl);
    line-height: 1;
}

h2 {
    font-size: var(--text-5xl);
    line-height: 1;
}

h3 {
    font-size: var(--text-4xl);
    line-height: 2.5rem;
}

h4 {
    font-size: var(--text-3xl);
}

h5 {
    font-size: var(--text-xl);
    line-height: 1.5rem;
}

.txt-l, .txt-l p {
    font-size: var(--text-l);
    line-height: 1.75rem;
}

.txt-xl {
    font-size: var(--text-xl);
    line-height: 1.75rem;
}

p, .txt-m {
    font-size: var(--text-base);
    line-height: 1.5rem;
}

.txt-s, .txt-s p {
    font-size: var(--text-s);
    line-height: 1.35rem;
}