:root {
    
    --color-bg: #262a2c;
    --color-primary: #e8b678;
    --color-secondary: #dbdbdbbd;     
    --color-tag: #dbdbdb;            
    --color-dark: #1a1a1a;
    --color-light: #ffffff;
    --color-pastel: #fff5e6f4;
    --color-title: #ffe4bbbd;
    --color-subtitle: #b9b9b9f9;
    
    
    --ease: cubic-bezier(0.86, 0, 0.07, 1);
    --ease2: cubic-bezier(0.65, 0.01, 0.07, 1);
    
    
    --font-main: 'BIOS-SYS', monospace, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace, sans-serif;
    
    
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    
    --transition-fast: 0.2s;
    --transition-normal: 0.35s;
    --transition-slow: 0.6s;
    --transition-very-slow: 1s;
}


@font-face {
    font-family: 'BIOS-SYS';
    src: url('../WEB-CONTENT/fonts/BIOS-SYS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HBIOS-SYS';
    src: url('../WEB-CONTENT/fonts/HBIOS-SYS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D3PipismS';
    src: url('../WEB-CONTENT/fonts/D3PipismS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'D3PipismW';
    src: url('../WEB-CONTENT/fonts/D3PipismW.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AirSpace';
    src: url('../WEB-CONTENT/fonts/AirSpace.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ASpace';
    src: url('../WEB-CONTENT/fonts/aspace.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Astro-Futuristic';
    src: url('../WEB-CONTENT/fonts/Astro-Futuristic-Font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futurelic';
    src: url('../WEB-CONTENT/fonts/Futurelic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lulo';
    src: url('../WEB-CONTENT/fonts/Lulo.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Made-in-Space';
    src: url('../WEB-CONTENT/fonts/Made-in-Space.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Magda';
    src: url('../WEB-CONTENT/fonts/Magda.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moby-Monospace';
    src: url('../WEB-CONTENT/fonts/Moby-Monospace.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MODERNSPACE';
    src: url('../WEB-CONTENT/fonts/MODERNSPACE.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NegativeSpace';
    src: url('../WEB-CONTENT/fonts/NegativeSpace.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space';
    src: url('../WEB-CONTENT/fonts/Space.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spaceboy';
    src: url('../WEB-CONTENT/fonts/Spaceboy.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spaceboy-V2';
    src: url('../WEB-CONTENT/fonts/Spaceboy-V2.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spaceport';
    src: url('../WEB-CONTENT/fonts/Spaceport.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Subliminal';
    src: url('../WEB-CONTENT/fonts/Subliminal.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Telegraph';
    src: url('../WEB-CONTENT/fonts/Telegraph.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TRACER';
    src: url('../WEB-CONTENT/fonts/TRACER.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VT323-Regular';
    src: url('../WEB-CONTENT/fonts/VT323-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PressStart2P-Regular';
    src: url('../WEB-CONTENT/fonts/PressStart2P-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'WBIOS';
    src: url('../WEB-CONTENT/fonts/WBIOS.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Xspace';
    src: url('../WEB-CONTENT/fonts/Xspace.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Font-Hash-1';
    src: url('../WEB-CONTENT/fonts/cef0e895dbcc724b4548.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Font-Hash-2';
    src: url('../WEB-CONTENT/fonts/e1b8202a96e97b511253.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}