@font-face {
    font-family: 'cyber';
    src: url('/src/fonts/cyberway_riders/Cyberway Riders.otf');
}

@font-face {
    font-family: 'neuropol';
    src: url('/src/fonts/neuropol/Neuropol.otf');
}

:root{
    /* Colors */
    --bg-color-1: #030d22;
    --bg-color-2: #364378;
    --bg-color-3: #120c0a;

    --logo1: #FF00FF;
    --logo2: #00FFFF;
    --logo3: #0600ab;
    
    --title: #ffcc00;
    --title-shadow: #00cfc1;

    --title2: #6c00e0;
    --scroll: #1f4880;

    --text-color-1: #feefcf;
    --text-color-2: #cbd3de;
    
    --name-emphasis: var(--logo1);
    --role-emphasis: var(--logo2);

    --english-color: #0077b6;
    --mandarin-color: #d00000;
    
    --html-color: #e34c26;
    --css-color: #264de4;
    --js-color: #F7DF1E;
    --node-color: #339933;
    --react-color: #61DAFB;
    

    /* Fonts */
    --cyber: 'cyber', sans-serif;
    --neuropol: 'neuropol', sans-serif;
    --orbitron: "Orbitron", sans-serif;
    --audiowide: "Audiowide", sans-serif;
    --rajdhani: "Rajdhani", sans-serif;
    --oxanium: "Oxanium", sans-serif;
    --space: "Space Mono", monospace;
    --tech: "Share Tech Mono", monospace;
    --exo: "Exo", sans-serif;
    --vt: "VT323", monospace;
    
}

body{
    background: var(--bg-color-1);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

main{

    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;

}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}