<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autobot</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <article style="inline-size: 30ch; block-size: 15ch; width: 295px; height: 252px;" class="autobot"
        has-centering-styles="">
        <h1 has-centering-styles="">Autobot</h1>
    </article>
</body>

</html>
html {
    block-size: 100%;
    color-scheme: dark;
  }

  body {
    min-block-size: 100%;
    margin: 0;
    background: var(--surface1);
    color: var(--text1);
    font-family: system-ui;
    display: grid;
    place-content: center;
  }

  body,h1 {
    background: var(--surface1)
  }

  h1 {
    margin: 0;
    font-weight: lighter;
    padding: 1ch 2ch;
    border-radius: 1rem
  }

  article {
    background: var(--surface2);
    border-radius: 1rem 1rem 0 1rem;
    color: var(--text1);

    overflow: auto;
    resize: both;
  }

  footer {
    display: flex;
    justify-content: space-between;
    margin-block-start: .5ch;
  }

  footer > button {
    padding: 1ch 2ch;
    cursor: pointer;
  }

  .autobot {
    display: flex;
  }

  .autobot > * {
    margin: auto;
  }

  [has-centering-styles] {
    border: 2px solid hotpink;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.