HTML/CSS - One Piece Zzz🌞 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
<body class="Dflex">
    <div class="Personajes Dflex">
      <img
        id="shanks_"
        src="https://i.pinimg.com/474x/8d/a1/8c/8da18c7580bdb19022ed46eadef05e88.jpg"
        alt=""
      />
      <img
        id="kaido_"
        src="https://i.pinimg.com/236x/1b/8f/70/1b8f706bbd4bb3334c684f7da37b4d42.jpg"
        alt=""
      />
      <img
        id="garp_"
        src="https://i.pinimg.com/474x/9e/53/dd/9e53dd383a98d92f69a79150aeb1a4f0.jpg"
        alt=""
      />
      <img
        id="zoro_"
        src="https://i.pinimg.com/474x/32/cf/99/32cf992ffbb5c3201cb2fb4fc1ba01c9.jpg"
        alt=""
      />
      <img

css

      :root {
        --textColor:  black;
        --backgroundColorFondo:  rgba(255, 255, 255, 0.757);
        --colorLineas:  rgb(255, 255, 255);
      }
      body {
        height: 100%;
        flex-direction: column;
        gap: 10px;
        user-select: none;
        font-family: monospace;
        color: var(--textColor);
      }
      .Dflex {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .Personajes {
        width: 340px;
        height: 60px;
        background-color:  brown;
        gap: 5px;
        box-shadow: 0 0 10px 0px  rgba(0, 0, 0, 0.678);
        img {
          width: 50px;

BROWSER

Console