<div class="container">
  <q>The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us.</q>
  <p>—<cite>Bill Watterson</cite></p>
</div>
@layer base, demo;

@layer demo {
  .container {
    border-width: 3rem;
    border-style: solid;
    border-image-source: url("data:image/svg+xml,%3Csvg width='599px' height='585px' viewBox='0 0 599 585' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='rr' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='Rectangle' fill='%230277BD' x='49' y='31' width='309.980337' height='333.485955'%3E%3C/rect%3E%3Ccircle id='Oval' fill='%23FD5A1E' cx='393.504213' cy='363.751404' r='190.248596'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    padding: 1.5rem;
    width: 50%;
  }
}

@layer base {
  body {
    display: grid;
    font-size: 1.5rem;
    place-items: center;
    height: 100vh;
  }

  .container {
    display: grid;
    place-items: center;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.