@font-face {
    font-family: "InterVariable";
    src: url("Inter-Italic-VariableFont_opsz,wght.ttf") format("woff2-variations"),
        url("Inter-Italic-VariableFont_opsz,wght.ttf") format("woff2");
    font-weight: 100 900;   /* covers all weights */
    font-style: normal;
    font-display: swap;
}

:root{ 
    --flexoki-black: #100F0F;  /* bg */
    --flexoki-black-rgb: 16,15,15;
    --flexoki-paper: #FFFCF0;
    --flexoki-paper-rgb: 254,252,240;
    --flexoki-200-rgb: 206,205,195;
    --flexoki-50: #F2F0E5;
    --flexoki-100: #E6E4D9;
    --flexoki-150: #DAD8CE;
    --flexoki-200: #CECDC3; /* tx */
    --flexoki-300: #B7B5AC;
    --flexoki-400: #9F9D96;
    --flexoki-500: #878580; /* tx 2 */
    --flexoki-600: #6F6E69;
    --flexoki-700: #575653; /* tx 3 */
    --flexoki-800: #403E3C; /* ui 3 */
    --flexoki-850: #343331; /* ui 2 */
    --flexoki-900: #282726; /* ui */
    --flexoki-950: #1C1B1A; /* bg2 */
    --flexoki-red-50: #FFE1D5;
    --flexoki-red-100: #FFCABB;
    --flexoki-red-150: #FDB2A2;
    --flexoki-red-200: #F89A8A;
    --flexoki-red-300: #E8705F;
    --flexoki-red-400: #D14D41;
    --flexoki-red-500: #C03E35;
    --flexoki-red-600: #AF3029;
    --flexoki-red-700: #942822;
    --flexoki-red-800: #6C201C;
    --flexoki-red-850: #551B18;
    --flexoki-red-900: #3E1715;
    --flexoki-red-950: #261312;
    --flexoki-orange-50: #FFE7CE;
    --flexoki-orange-100: #FED3AF;
    --flexoki-orange-150: #FCC192;
    --flexoki-orange-200: #F9AE77;
    --flexoki-orange-300: #EC8B49;
    --flexoki-orange-400: #DA702C;
    --flexoki-orange-500: #CB6120;
    --flexoki-orange-600: #BC5215;
    --flexoki-orange-700: #9D4310;
    --flexoki-orange-800: #71320D;
    --flexoki-orange-850: #59290D;
    --flexoki-orange-900: #40200D;
    --flexoki-orange-950: #27180E;
    --flexoki-yellow-50: #FAEEC6;
    --flexoki-yellow-100: #F6E2A0;
    --flexoki-yellow-150: #F1D67E;
    --flexoki-yellow-200: #ECCB60;
    --flexoki-yellow-300: #DFB431;
    --flexoki-yellow-400: #D0A215;
    --flexoki-yellow-500: #BE9207;
    --flexoki-yellow-600: #AD8301;
    --flexoki-yellow-700: #8E6B01;
    --flexoki-yellow-800: #664D01;
    --flexoki-yellow-850: #503D02;
    --flexoki-yellow-900: #3A2D04;
    --flexoki-yellow-950: #241E08;
    --flexoki-green-50: #EDEECF;
    --flexoki-green-100: #DDE2B2;
    --flexoki-green-150: #CDD597;
    --flexoki-green-200: #BEC97E;
    --flexoki-green-300: #A0AF54;
    --flexoki-green-400: #879A39;
    --flexoki-green-500: #768D21;
    --flexoki-green-600: #66800B;
    --flexoki-green-700: #536907;
    --flexoki-green-800: #3D4C07;
    --flexoki-green-850: #313D07;
    --flexoki-green-900: #252D09;
    --flexoki-green-950: #1A1E0C;
    --flexoki-cyan-50: #DDF1E4;
    --flexoki-cyan-100: #BFE8D9;
    --flexoki-cyan-150: #A2DECE;
    --flexoki-cyan-200: #87D3C3;
    --flexoki-cyan-300: #5ABDAC;
    --flexoki-cyan-400: #3AA99F;
    --flexoki-cyan-500: #2F968D;
    --flexoki-cyan-600: #24837B;
    --flexoki-cyan-700: #1C6C66;
    --flexoki-cyan-800: #164F4A;
    --flexoki-cyan-850: #143F3C;
    --flexoki-cyan-900: #122F2C;
    --flexoki-cyan-950: #101F1D;
    --flexoki-blue-50: #E1ECEB;
    --flexoki-blue-100: #C6DDE8;
    --flexoki-blue-150: #ABCFE2;
    --flexoki-blue-200: #92BFDB;
    --flexoki-blue-300: #66A0C8;
    --flexoki-blue-400: #4385BE;
    --flexoki-blue-500: #3171B2;
    --flexoki-blue-600: #205EA6;
    --flexoki-blue-700: #1A4F8C;
    --flexoki-blue-800: #163B66;
    --flexoki-blue-850: #133051;
    --flexoki-blue-900: #12253B;
    --flexoki-blue-950: #101A24;
    --flexoki-purple-50: #F0EAEC;
    --flexoki-purple-100: #E2D9E9;
    --flexoki-purple-150: #D3CAE6;
    --flexoki-purple-200: #C4B9E0;
    --flexoki-purple-300: #A699D0;
    --flexoki-purple-400: #8B7EC8;
    --flexoki-purple-500: #735EB5;
    --flexoki-purple-600: #5E409D;
    --flexoki-purple-700: #4F3685;
    --flexoki-purple-800: #3C2A62;
    --flexoki-purple-850: #31234E;
    --flexoki-purple-900: #261C39;
    --flexoki-purple-950: #1A1623;
    --flexoki-magenta-50: #FEE4E5;
    --flexoki-magenta-100: #FCCFDA;
    --flexoki-magenta-150: #F9B9CF;
    --flexoki-magenta-200: #F4A4C2;
    --flexoki-magenta-300: #E47DA8;
    --flexoki-magenta-400: #CE5D97;
    --flexoki-magenta-500: #B74583;
    --flexoki-magenta-600: #A02F6F;
    --flexoki-magenta-700: #87285E;
    --flexoki-magenta-800: #641F46;
    --flexoki-magenta-850: #4F1B39;
    --flexoki-magenta-900: #39172B;
    --flexoki-magenta-950: #24131D;
}


body {
    background-color: var(--flexoki-black);
}

.grid {
    /* GRID */
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image:
        /* big grid */
        linear-gradient(to right, var(--flexoki-green-900) 1px, transparent 1px),
        linear-gradient(to bottom, var(--flexoki-green-900) 1px, transparent 1px),
    
        /* small grid */
        linear-gradient(to right, var(--flexoki-green-950) 1px, transparent 1px),
        linear-gradient(to bottom, var(--flexoki-green-950) 1px, transparent 1px);

        /* make grids darker with transparent black */
        /* linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)); */

    background-size:
        /* controls grid size */
        20px 20px,
        20px 20px,
        10px 10px,
        10px 10px;
    opacity: .3;
}

.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    opacity: .6;
}

.grid, .grain {
    pointer-events: none;
    user-select: none;
    /* opacity: 1; */
}

.content{
    position: relative;
    z-index: 1;

    color: var(--flexoki-200);

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: 18px;
    
    width: 70%;        /* or whatever width you want */
    max-width: 600px;
    margin: 0 auto;      /* centers the box horizontally */
    text-align: left;    /* keeps text/content left-aligned */

    /* background-color: rgba(var(--flexoki-black-rgb), 0.5);
    backdrop-filter: blur(1px); */
    height: 100vh;
    padding: 3em 5em;
    
}

.links {
    color: var(--flexoki-red-500);
}

.img {
    max-width: 800px;
}

.info {
    font-style: italic;
    color: rgb(208, 162, 21);
}

a {
    color: var(--flexoki-red-500);
}

a:visited {
  color: var(--flexoki-red-500); /* same as default, so it doesn’t change */
}

a:hover {
  color: var(--flexoki-yellow-500); /* lighter blue on hover */
}

a::after{
    content: " ↗";          /* adds an arrow icon after the link */
    /* font-size: 0.8em;       smaller than text */
    /* margin-left: 0.25em;    space before arrow */
    opacity: 0.7;           /* subtle look */
    display: inline-block;   /* breaks underline inheritance */
    text-decoration: none;   /* ensures no underline */
}

::selection {
  background: rgba(36, 131, 123, 0.329); 
  color: rgb(58, 169, 159);
}

.list {
    color: var(--flexoki-500);
}

.list li {
    margin-bottom: 7px;
}