Feral Creative CSS utilities

        To use these, add this to your CSS file:

        @import url("https://feralcreative.dev/utils.min.css");
        @import url("https://securesite.dev/utils.min.css");

        or this to your HTML doc:

        <link rel="stylesheet" href="https://feralcreative.dev/utils.min.css" type="text/css">
        <link rel="stylesheet" href="https://securesite.dev/utils.min.css" type="text/css">

Inside Border

Magenta

fpo or fpom

Blue

fbob

Green

fbog

Purple

fpop

Cyan

fpoc

Yellow

fpoy

Red

fpor

Brown

fpoo

Orange

fpoor

Inside Border + Background

fpo or fpom bg

fbob bg

fpog bg

fpop bg

fpoc bg

fpoy bg

fpor bg

fpoo bg

fpoor bg

Outside Border (+1px)

fpo or fpom out

fbob out

fpog out

fpop out

fpoc out

fpoy out

fpor out

fpoo out

fpoor out

Outside Border (+1px) + Background

fpo/fpom bg out

fbob bg out

fpog bg out

fpop bg out

fpoc bg out

fpoy bg out

fpor bg out

fpoo bg out

fpoor bg out

.li

Lorem nostrud excepteur non sint. Excepteur non sint veniam. Sint veniam dolor pariatur deserunt nulla, fugiat tempor. Pariatur deserunt nulla fugiat tempor veniam cillum. Nulla fugiat tempor veniam cillum. Tempor veniam cillum velit cupidatat ullamco, aliqua ipsum. Velit cupidatat ullamco aliqua ipsum incididunt.

.nc

.nc li Lorem nostrud excepteur non sint. Excepteur non sint veniam. Sint veniam dolor pariatur deserunt nulla, fugiat tempor. Pariatur deserunt nulla fugiat tempor veniam cillum. Nulla fugiat tempor veniam cillum. Tempor veniam cillum velit cupidatat ullamco, aliqua ipsum. Velit cupidatat ullamco aliqua ipsum incididunt.

Viewport:

Viewport Widget

        <section id="viewport-widget" class="viewport-widget top container-fluid">
          <div class="row">
            <div class="col-12 text-center">
              <p class="viewport-size">Viewport:
              </p>
            </div>
          </div>
        </section>