nintendo.css for marimo

custom.css

/* Custom CSS for Marimo - Font customization */

/* Import Press Start 2P font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --marimo-monospace-font: 'Press Start 2P', 'Courier New', monospace;
    --marimo-text-font: 'Press Start 2P', 'Courier New', monospace;
    --marimo-heading-font: 'Press Start 2P', 'Courier New', monospace;
}

.cm-line {
    font-family: var(--marimo-monospace-font);
}

/* Base Colors */
:root {
    --background: light-dark(#e5e9f0, #2e3440);
    --foreground: light-dark(#2e3440, #d8dee9);
    --muted: light-dark(#eceff4, #434c5e);
    --muted-foreground: light-dark(#4c566a, #a3be8c);
    --popover: light-dark(#eceff4, #3b4252);
    --popover-foreground: light-dark(#2e3440, #d8dee9);
    --card: light-dark(#f0f4fc, #3b4252);
    --card-foreground: light-dark(#3b4252, #e5e9f0);
    --border: light-dark(#cbd5e1, #4c566a);
    --input: light-dark(#d8dee9, #3b4252);
    --primary: light-dark(#5e81ac, #88c0d0);
    --primary-foreground: light-dark(#eceff4, #2e3440);
    --secondary: light-dark(#81a1c1, #4c566a);
    --secondary-foreground: light-dark(#2e3440, #eceff4);
    --accent: light-dark(#88c0d0, #5e81ac);
    --accent-foreground: light-dark(#eceff4, #969eb0);
    --ring: light-dark(#81a1c1, #5e81ac);
}

/* Semantic Colors */
:root {
    --destructive: hsl(0deg 100% 65%);
    --destructive-foreground: light-dark(#eceff4, #2e3440);
    --error: light-dark(#bf616a, #bf616a);
    --error-foreground: light-dark(#eceff4, #2e3440);
    --success: light-dark(#a3be8c, #a3be8c);
    --success-foreground: light-dark(#eceff4, #2e3440);
    --action: light-dark(#ebcb8b, #ebcb8b);
    --action-hover: light-dark(#f0d9a8, #eacb8b);
    --action-foreground: light-dark(#2e3440, #2e3440);
    --link: light-dark(#81a1c1, #88c0d0);
    --link-visited: light-dark(#b48ead, #b48ead);
    --stale: hsl(42deg 56% 44% / 25%);
}

/* Shadows */
:root {
    --base-shadow: light-dark(
        hsla(0deg, 0%, 85%, 40%),
        hsla(0deg, 0%, 36%, 60%)
    );
    --base-shadow-darker: light-dark(
        hsla(0deg, 0%, 50%, 40%),
        hsla(0deg, 0%, 50%, 60%)
    );
    --base-shadow-opacity: 5%;
    
    /* Background properties */
    --background-image: linear-gradient(
        0deg,
        hsl(272deg 33% 11%) 0%,
        hsl(276deg 30% 9%) 20%,
        hsl(279deg 29% 7%) 40%,
        hsl(190deg 80% 40%) 70%,
        hsl(185deg 90% 55%) 85%,
        hsl(180deg 100% 70%) 100%
    );
    --background-repeat: no-repeat;
    --background-attachment: fixed;
    --background-size: auto;
}

body {
    background-image: var(--background-image) !important;
    background-repeat: var(--background-repeat) !important;
    background-attachment: var(--background-attachment) !important;
    background-size: var(--background-size) !important;
}


/* Custom cursors - override everything */
* {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto !important;
}

html,
body {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto !important;
}

a,
button,
a *,
button *,
[role="button"],
[role="button"] *,
input[type="button"],
input[type="submit"],
.clickable,
.clickable * {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer !important;
}

Watch this YouTube video shorts to know what this is all about: https://youtube.com/shorts/GiMnWT_ZMOc?si=ACWZaOHCrI-qMlwc