/* reset & fullscreen black base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: black;
      width: 100vw;
      height: 100vh;
      overflow: hidden;          /* no scrollbars, keep it clean */
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }

    /* centralised container – ready for your clock design */
    .clock-wrapper {
      /* dimensions are flexible – you can put anything inside */
      width: 400px;
      height: 400px;
      max-width: 90vw;
      max-height: 25vh;

      /* visual anchor: subtle border to show the container (optional) */
      border: 2px solid rgba(100, 255, 100, 1);
      border-radius: 2rem;

      /* center content inside (if you add children) */
      display: flex;
      align-items: center;
      justify-content: center;

      /* feel free to change background, shadow, etc. 
         but we keep it transparent so your clock stands out */
      background: transparent;

      /* smooth presence */
      transition: box-shadow 0.2s;
    }

    /* (optional) a tiny hint – you can remove this */
    .clock-wrapper{
      /* content: "⏳ your clock here"; */
      color: rgba(0, 255, 0, 1);
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      user-select: none;
      white-space: nowrap;
      -webkit-text-stroke: 1px black;
    }

    /* if you want to place an actual clock later, 
       just remove the ::after and add your elements inside .clock-wrapper */

      h4 {
        font-size: 50px;
       }

      #clock-color{
        border-radius: 10px;
      }

      .red{
        color: red; 
        border-color: red;
        background-image: url(haalandreal.jpeg);
        background-size: 100%;
      }

      .yellow{
        color: yellow;
        border-color: yellow;
        background-image: url(ronaldinho.jpeg);
      }

      .blue{
        color: blue;
        border-color: blue;
        background-image: url(Messi.webp);
        background-size: 100%;
      }

      .white{
        color: white;
        border-color: white;
        background-image: url(ororo.jpeg);
        background-size: 100%;
      }

      .brown{
        color: brown;
        border-color: brown;
        background-image: url(realdybala.jpeg);
        background-size: 100%;
      }

      .original{
        color: rgba(0, 255, 0, 1);
      }