<div>
  <div>
<u>CSS art is a fascinating form of digital</u><u>art that utilizes Cascading Style Sheets</u><u>(CSS) to create intricate designs and</u><u>illustrations solely using HTML and CSS code.</u><u>Typically, CSS artists manipulate shapes,</u><u>colors, gradients, and positioning techniques</u><u>to craft visually stunning compositions.</u><u>To determine whether something qualifies</u><u>as true CSS art, it's essential to examine</u><u>its complexity, creativity, and the extent</u><u>to which it pushes the boundaries of what</u><u>can be achieved using CSS alone.</u>
  </div>

  <div>
<u>CSS art is a captivating medium where artists</u><u>utilize code to create intricate designs,</u><u>illustrations, and even animations using HTML</u><u>and CSS alone. It's a testament to the</u><u>creativity and ingenuity of designers who</u><u>push the boundaries of what's possible within</u><u>the constraints of web technologies. To</u><u>ascertain whether something qualifies as true</u><u>CSS art, it's crucial to evaluate factors</u><u>such as the complexity of the design, the</u><u>skillful manipulation of CSS properties,</u><u>and the overall aesthetic impact of the artwork.</u>
  </div>

  <a class="sig" href="https://tinydesign.co.uk/" title="Ben Evans Portfolio"><u></u></a>
</div>

$none: rgba(#fff, 0);
$wht: #fff;
$blk: #211f1d;

html {
  font-size: 2.2vh;
}

html,
body,
div {
  height: 100%;
  margin: 0;
}

body{
background: linear-gradient(135deg, lighten(#2BBA91,20), lighten(#195217, 70) );
& > div {
  margin: auto;
  max-width: 90vh;
  overflow: hidden;
  max-height: 90vh;
  margin-top: 5vh;
  position: relative;
  background:$blk;
  background: linear-gradient(135deg, darken(#BA2B54,30), darken(#501752, 20) );
  border-radius:1rem;
  box-shadow:.25rem .5rem .75rem rgba($blk,.5),//
    -.25rem -.25rem .5rem rgba($blk,.25),//
    inset .25rem .25rem .5rem rgba($blk,.25),//
     inset -.25rem -.25rem .5rem rgba($wht,.25);
  border:.2rem solid $blk;
}
}

div div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: justify;
  

  u {
    color: $none;
    position: relative;
    // make the scaleY less for a sketch look 
    transform: scaleX(4) scaleY(.5) rotate(20deg);
    text-decoration-style: wavy;
    text-decoration-color: $wht;
    letter-spacing:.2em;

    &:after {
      content: "qwertyujhgfdfghjkjhgfdrtyuiuyfdfghjk";
    }

    &:before {
      content: "poiuytrfghjkddfkjdkjhgfghjkjhrrrjddd";
    }

    &:before,
    &:after {
      display: block;
    }
  }

  &:nth-of-type(2) {
    transform: rotate(90deg) translateX(-49rem);
  }
}

.sig {
  width: 4em;
  height: 4em;
  background: linear-gradient(45deg, $wht 25%, $none 25%),
    linear-gradient(135deg, $wht 25%, $none 25%),
    linear-gradient(45deg, $wht 25%, $none 25%),
    linear-gradient(135deg, $wht 25%, $none 25%),
    linear-gradient(45deg, $wht 25%, $none 25%),
    linear-gradient(135deg, $wht 25%, $none 25%),
    linear-gradient(45deg, $wht 25%, $none 25%),
    linear-gradient(135deg, $wht 25%, $none 25%);
  background-position: -0.1em -2.8em, -0.1em 1.2em, -0.1em -1em, -0.1em 2.99em,
    2.3em -1.8em, 2.3em 0, 2.3em 0, 2.3em 1.8em;
  background-repeat: no-repeat;
  position: absolute;
  right: .5em;
  bottom: 0;
  transform: scaleY(0.6) scale(0.4);
  border-radius: 0.5em;
  overflow: hidden;
}