NaNtendo (3D CSS Nintendo NES without images)

<div class="container">

​

  <nes-console></nes-console>

  <nes-controller></nes-controller>

​

</div>

​

<div class="created">

  <span>Created by</span>

  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>

  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtu.be/tnTi5ocYa4o">Youtube</a></p>

</div>

@use postcss-nested;

​

@font-face {

  font-family: "Pretendo";

  src:

    url("https://manzdev.github.io/twitch-nintendo-nes/fonts/pretendo.woff2") format("woff2"),

    url("https://manzdev.github.io/twitch-nintendo-nes/fonts/pretendo.woff") format("woff");

  font-display: swap;

}

​

@font-face {

  font-family: "Press Start 2P";

  src:

    url("https://manzdev.github.io/twitch-nintendo-nes/fonts/press-start-2p.woff2") format("woff2"),

    url("https://manzdev.github.io/twitch-nintendo-nes/fonts/press-start-2p.woff") format("woff");

  font-display: swap;

class CircleButton extends HTMLElement {

  constructor() {

    super();

    this.attachShadow({ mode: "open" });

  }

​

  static get styles() {

    return /* css */`

      .container {

        --size: calc(var(--width) * 0.10);

​

        background: #CECECE;

        border-radius: 3px;

        width: var(--size);

        height: var(--size);

​

        display: flex;

        justify-content: center;

        align-items: center;

      }

​

      .button {

        width: calc(var(--size) * 0.8);