Best viewed with… chooser

HTML

              
                <div id="Controls">
  <fieldset>
    <legend>Choose your browser</legend>
    <button id="ie" aria-pressed="true" class="tUA" onclick="toggleUA(this.id);">
      Internet Explorer
    </button>
    <button id="firefox" aria-pressed="false" class="tUA" onclick="toggleUA(this.id);">
      Firefox
    </button>
    <button id="edge" aria-pressed="false" class="tUA" onclick="toggleUA(this.id);">
      Edge
    </button>
    <button id="chrome" aria-pressed="false" class="tUA" onclick="toggleUA(this.id);">
      Chrome
    </button>
    <button id="safari" aria-pressed="false" class="tUA" onclick="toggleUA(this.id);">
      Safari
    </button>
    <button id="any" aria-pressed="false" class="tUA" onclick="toggleUA(this.id);">
      Any
    </button>
  </fieldset>

  <fieldset>
    <legend>Choose base unit</legend>
    <button id="U10vw" aria-pressed="true" class="tun" onclick="toggleUnits(this.id);">
      <code>10vw</code>
    </button>
    <button id="U3rem" aria-pressed="false" class="tun" onclick="toggleUnits(this.id);">
      <code>3rem</code>
    </button>
    <button id="U10px" aria-pressed="false" class="tun" onclick="toggleUnits(this.id);">
      <code>10px</code>
    </button>
  </fieldset>

  <fieldset>
    <legend>Animation</legend>
    <button id="stepped" aria-pressed="false" class="tst" onclick="toggleSteps(this.id);">
      Stepped
    </button>
  </fieldset>
</div>

<p id="BestViewedIn" class="ie">
  <a href="https://www.mozilla.org/firefox/" target="_top" class="firefox">
    <span class="box">
      <span class="face fr">Firefox <span>Puts privacy first.</span></span>
      <span aria-hidden="true" class="face ba">Firefox <span>Puts privacy first.</span></span>
      <span class="face to">Firefox <span>Enhanced tracking protection.</span></span>
      <span aria-hidden="true" class="face bo">Firefox <span>Enhanced tracking protection.</span></span>
    </span>
  </a>
  <a href="https://www.google.com/chrome/" target="_top" class="chrome">
    <span class="box">
      <span class="face fr">The browser built by Google</span>
      <span aria-hidden="true" class="face ba">The browser built by Google</span>
      <span class="face to">Download Chrome now &rarr;</span>
      <span aria-hidden="true" class="face bo">Download Chrome now &rarr;</span>
    </span>
  </a>
  <a href="https://www.microsoft.com/edge" target="_top" class="edge">
    <span class="box">
      <span class="face fr">Download <strong>Microsoft Edge</strong></span>
      <span aria-hidden="true" class="face ba">Download <strong>Microsoft Edge</strong></span>
      <span class="face to">The browser that puts you first.</span>
      <span aria-hidden="true" class="face bo">The browser that puts you first.</span>
    </span>
  </a>
  <a href="https://www.apple.com/safari/" target="_top" class="safari">
    <span class="box">
      <span class="face fr"><strong>Safari</strong> macOS &amp; iOS</span>
      <span aria-hidden="true" class="face ba"><strong>Safari</strong> macOS &amp; iOS</span>
      <span class="face to">Blazing fast. Incredibly private.</span>
      <span aria-hidden="true" class="face bo">Blazing fast. Incredibly private.</span>
    </span>
  </a>
  <a href="https://www.w3.org/standards/agents/browsers" target="_top" class="any">
    <span class="box">
<!--    Changed the order for this one only    -->
      <span class="face fr">Use</span>
      <span class="face to">any</span>
      <span class="face ba">damn</span>
      <span class="face bo">browser</span>
    </span>
  </a>
  <a href="https://microsoft.com/ie" target="_top" class="ie">
    <span class="box">
      <span class="face fr">This page is<br>best viewed with:</span>
      <span aria-hidden="true" class="face ba">This page is<br>best viewed with:</span>
      <span class="face to"><span>Microsoft</span> <span>Internet Explorer</span></span>
      <span aria-hidden="true" class="face bo"><span>Microsoft</span> <span>Internet Explorer</span></span>
    </span>
  </a>
</p>

<p>
  Used in the post <a href="https://adrianroselli.com/2022/05/a-best-viewed-with-gag.html" target="_top"><cite>A “Best viewed with…” Gag</cite></a>.
</p>

CSS

              
                :root {
  --size-units: 10vw;
/*   --size-units: 3rem; */
/*   --size-units: 10px; */
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  margin: 0;
  color: #000;
  background: #fcfcfc;
/*   height: 100vh; */
/*   background-image: linear-gradient(150deg, #ffefef 20%, #efefff 90%),
    linear-gradient(#444 0.1vw, transparent 0.1vw),
    linear-gradient(90deg, #444 0.1vw, transparent 0.1vw); */
  background-image: linear-gradient(#dfdfdf 0.1vw, transparent 0.1vw),
    linear-gradient(90deg, #dfdfdf 0.1vw, transparent 0.1vw);
  background-size: 31px 31px;
  background-position: 50%;
}

/* Buttons to modify the… button */

button {
  font: inherit;
}

button[aria-pressed]::before {
  content: " ";
}

button[aria-pressed="true"]::before {
  content: "✔ ";
  line-height: 1;
}

#Controls {
  margin: 0 auto 4em auto;
  display: flex;
  flex-wrap: wrap;
  max-width: max-content;
  background-color: #fff;
  padding: 0.5em 1em 0.75em 1em;
  color: #000;
}

p:last-of-type {
  margin: 4em 1em 0 1em;
}

/* The link-button itself */
/* 88 × 31 aspect ratio */

#BestViewedIn {
  display: block;
/*  https://twitter.com/mikemai2awesome/status/1527040571336007683  */
  margin: var(--size-units) auto;
  width: calc(var(--size-units) * 8.8);
  height: calc(var(--size-units) * 3.1);
/*   overflow: hidden; */
/*   maybe a class to hide the overflow?  */
  transform-style: preserve-3d;
}

#BestViewedIn:focus-within {
  background-color: #000;
  box-shadow: calc(var(--size-units) * 0.1) calc(var(--size-units) * 0.1) calc(var(--size-units) * .2) #000,
    calc(var(--size-units) * -0.1) calc(var(--size-units) * -0.1) calc(var(--size-units) * .2) #000,
    calc(var(--size-units) * 0.1) calc(var(--size-units) * -0.1) calc(var(--size-units) * .2) #000,
    calc(var(--size-units) * -0.1) calc(var(--size-units) * 0.1) calc(var(--size-units) * .2) #000;
}

#BestViewedIn a {
  display: block;
  perspective: calc(var(--size-units) * 26.4);
/*  the width * 3  */
}

#BestViewedIn a:focus,
#BestViewedIn a:hover,
#BestViewedIn a:visited,
#BestViewedIn a:active,
#BestViewedIn a:link {
  text-decoration: none;
  color: #000;
}

#BestViewedIn a:focus,
#BestViewedIn a:hover {
  outline: none;
}

.box {
  display: block;
  width: calc(var(--size-units) * 8.8);
  height: calc(var(--size-units) * 3.1);
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(45deg);
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .box {
    animation-name: spin;
  }
  .box.stepped {
    animation-name: steppedSpin;
  }
}

.face {
  box-sizing: border-box;
  position: absolute;
  width: calc(var(--size-units) * 8.8);
  height: calc(var(--size-units) * 3.1);
  overflow: hidden;
}

#BestViewedIn a:focus .face {
  outline: calc(var(--size-units) * .1) solid #0f0;
  outine-offset: calc(var(--size-units) * 1);
}

.face.fr {
  transform: rotateY(0deg) translateZ(calc(var(--size-units) * 1.55));
  background-color: rgba(255, 0, 0, 0.2);
}

.face.ba {
  transform: rotateY(180deg) translateZ(calc(var(--size-units) * 1.55)) rotateZ(180deg);
  background-color: rgba(0, 255, 0, 0.2);
}

.face.to {
  transform: rotateX(90deg) translateZ(calc(var(--size-units) * -1.55)) rotateX(180deg);
  background-color: rgba(0, 0, 255, 0.2);
}

.face.bo {
  transform: rotateX(-90deg) translateZ(calc(var(--size-units) * -1.55)) rotateX(180deg);
  background-color: rgba(255, 0, 255, 0.2);
}

@keyframes spin {
  0% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(360deg);
  }
  25% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(270deg);
  }
  50% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(180deg);
  }
  75% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(90deg);
  }
  100% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(0deg);
  }
}

@keyframes steppedSpin {
  0% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(360deg);
  }
  10% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(360deg);
  }
  25% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(270deg);
  }
  35% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(270deg);
  }
  50% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(180deg);
  }
  60% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(180deg);
  }
  75% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(90deg);
  }
  85% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(90deg);
  }
  100% {
    transform: translateZ(calc(var(--size-units) * -1.55)) rotateX(0deg);
  }
}

/* Choose the browser */

#BestViewedIn a {
  display: none;
}

#BestViewedIn.firefox .firefox, #BestViewedIn.chrome .chrome, #BestViewedIn.edge .edge, #BestViewedIn.safari .safari, #BestViewedIn.any .any, #BestViewedIn.ie .ie {
  display: block;
}

/* Internet Explorer */

.ie .face {
  background-color: #ccc;
  font-size: calc(var(--size-units) * .9);
  font-weight: bold;
  padding: calc(var(--size-units) * .3) calc(var(--size-units) * .2) 0 calc(var(--size-units) * .2);
  border: calc(var(--size-units) * .2) outset rgba(255,255,255,.5);
}

.ie .face.fr, .ie .face.ba {
  line-height: 1.1;
  text-align: center;
}

.ie .face.fr::before, .ie .face.ba::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(var(--size-units) * -.9);
  background: rgba(0,0,255,.5);
  width: calc(var(--size-units) * 3);
  height: calc(var(--size-units) * .8);
  transform: rotate(-45deg);
}

.ie .face.to, .ie .face.bo {
  font-size: calc(var(--size-units) * .95);
  line-height: .8;
  padding: calc(var(--size-units) * .1) calc(var(--size-units) * 2.8) 0 calc(var(--size-units) * 1.2);
}

.ie .face.to span:first-child, .ie .face.bo span:first-child {
  font-weight: normal;
}

.ie .face.to span:last-child, .ie .face.bo span:last-child {
  margin-left: calc(var(--size-units) * .4);
}

.ie .face.to::before, .ie .face.bo::before {
  content: "Free";
  text-transform: uppercase;
  display: block;
  position: absolute;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 1;
  padding: calc(var(--size-units) * .05) calc(var(--size-units) * .1);
  top: calc(var(--size-units) * .8);
  left: calc(var(--size-units) * -1.2);
  width: calc(var(--size-units) * 3.1);
  transform: rotate(-90deg);
}
.ie .face.to::after, .ie .face.bo::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #000;
  width: calc(var(--size-units) * 2.7);
  height: calc(var(--size-units) * 2.7);
  top: 0;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='223' height='219'%3E%3Cpath d='M219 114c0-17-4.4-33-12-47 33-74-35-63-39-63-14 2.8-28 7.3-40 13-46-.55-86 24-99 75 24-27 41-38 51-42-2.1 1.9-4.2 3.9-6.3 5.9-16 16-29 32-40 49-8.5 15-18 28-23 45-27 98 58 57 70 50 13 6.4 27 9.9 43 9.9 42 0 78-27 91-64h-51c-24 38-81 21-83-20h138c.52-4.1.8-8.2.8-12zm-18-95c8.3 5.6 15 14 3.5 44-11-18-27-32-47-39 8.9-4.3 31-13 44-5zM24 200c-6.8-6.9-8-24 7-55 7.5 22 23 40 42 51-9.7 5.3-35 17-49 3.3zm56-100c.77-22 20-40 44-40s43 18 44 40H81z' fill='%231ebbee'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% auto;
}

/* Firefox */

.firefox .face, .any .face.fr {
  background-color: #20123a;
  color: #fff;
  font-weight: bold;
  font-size: calc(var(--size-units) * 1);
  line-height: 1.1;
  padding: calc(var(--size-units) * .2) calc(var(--size-units) * 1.5) calc(var(--size-units) * .2) calc(var(--size-units) * .4);
  border-top: calc(var(--size-units) * .05) solid #fff;
  border-bottom: calc(var(--size-units) * .05) solid #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cdefs%3E%3CradialGradient id='b' cx='428.46' cy='55.06' r='501.01' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23ffbd4f'/%3E%3Cstop offset='.19' stop-color='%23ffac31'/%3E%3Cstop offset='.25' stop-color='%23ff9d17'/%3E%3Cstop offset='.28' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff563b'/%3E%3Cstop offset='.47' stop-color='%23ff3750'/%3E%3Cstop offset='.71' stop-color='%23f5156c'/%3E%3Cstop offset='.78' stop-color='%23eb0878'/%3E%3Cstop offset='.86' stop-color='%23e50080'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='245.39' cy='259.88' r='501.01' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%23960e18'/%3E%3Cstop offset='.35' stop-color='%23b11927' stop-opacity='.74'/%3E%3Cstop offset='.43' stop-color='%23db293d' stop-opacity='.34'/%3E%3Cstop offset='.5' stop-color='%23f5334b' stop-opacity='.09'/%3E%3Cstop offset='.53' stop-color='%23ff3750' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='305.8' cy='-58.64' r='362.96' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23fff44f'/%3E%3Cstop offset='.25' stop-color='%23ffdc3e'/%3E%3Cstop offset='.51' stop-color='%23ff9d12'/%3E%3Cstop offset='.53' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='189.98' cy='390.75' r='238.55' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.35' stop-color='%233a8ee6'/%3E%3Cstop offset='.47' stop-color='%235c79f0'/%3E%3Cstop offset='.67' stop-color='%239059ff'/%3E%3Cstop offset='1' stop-color='%23c139e6'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='252.16' cy='201.25' r='126.48' gradientTransform='matrix(.97 -.24 .28 1.14 -48.36 31.43)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.21' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.28' stop-color='%238c4ff3' stop-opacity='.06'/%3E%3Cstop offset='.75' stop-color='%237716a8' stop-opacity='.45'/%3E%3Cstop offset='.97' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='g' cx='239.06' cy='34.56' r='171.62' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.12' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.73' stop-color='%23ff7e37'/%3E%3Cstop offset='.79' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='373.96' cy='-74.29' r='732.21' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.11' stop-color='%23fff44f'/%3E%3Cstop offset='.46' stop-color='%23ff980e'/%3E%3Cstop offset='.62' stop-color='%23ff5634'/%3E%3Cstop offset='.72' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='i' cx='304.59' cy='7.07' r='536.37' gradientTransform='matrix(.1 .99 -.65 .07 277.32 -296.33)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.06' stop-color='%23ffe847'/%3E%3Cstop offset='.17' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.36' stop-color='%23ff8b16'/%3E%3Cstop offset='.45' stop-color='%23ff672a'/%3E%3Cstop offset='.57' stop-color='%23ff3647'/%3E%3Cstop offset='.74' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='j' cx='235.02' cy='98.12' r='457.12' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.14' stop-color='%23fff44f'/%3E%3Cstop offset='.48' stop-color='%23ff980e'/%3E%3Cstop offset='.59' stop-color='%23ff5634'/%3E%3Cstop offset='.66' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='355.69' cy='124.88' r='500.32' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.09' stop-color='%23fff44f'/%3E%3Cstop offset='.23' stop-color='%23ffe141'/%3E%3Cstop offset='.51' stop-color='%23ffaf1e'/%3E%3Cstop offset='.63' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='a' x1='446.9' y1='76.85' x2='47.94' y2='461.77' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.05' stop-color='%23fff44f'/%3E%3Cstop offset='.11' stop-color='%23ffe847'/%3E%3Cstop offset='.22' stop-color='%23ffc830'/%3E%3Cstop offset='.37' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.46' stop-color='%23ff672a'/%3E%3Cstop offset='.53' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='442.1' y1='74.79' x2='102.64' y2='414.26' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.17' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.27' stop-color='%23fff44f' stop-opacity='.63'/%3E%3Cstop offset='.49' stop-color='%23fff44f' stop-opacity='.22'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94 0 0 0 .14.05.4C427.71 111.15 381.63 83.83 344 24.36c-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5A120.27 120.27 0 0 0 182 159.05a71.11 71.11 0 0 0-6.22-4.7 111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.11.52-.21 1.06-.32 1.59-.45 2.11-2.08 12.7-2.37 15v.53A229.1 229.1 0 0 0 16 254.52v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.78-41.22-.53-84.54-15.59-120.76zm-277 188.12c1.12.53 2.18 1.12 3.33 1.64l.16.1c-1.15-.56-2.32-1.14-3.48-1.74zm55-144.95zM454.9 179v-.23.26z' fill='url(%23a)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94v.49c22.68 61.48 10.32 124-7.48 162.2-27.54 59.1-94.21 119.68-198.58 116.73-112.67-3.2-212-86.91-230.55-196.46-3.38-17.29 0-26.06 1.7-40.09-2.07 10.81-2.86 13.94-3.89 33.16v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.75-41.22-.56-84.54-15.62-120.76z' fill='url(%23b)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94v.49c22.68 61.48 10.32 124-7.48 162.2-27.54 59.1-94.21 119.68-198.58 116.73-112.67-3.2-212-86.91-230.55-196.46-3.38-17.29 0-26.06 1.7-40.09-2.07 10.81-2.86 13.94-3.89 33.16v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.75-41.22-.56-84.54-15.62-120.76z' fill='url(%23c)'/%3E%3Cpath d='M361.92 194.62c.53.37 1 .74 1.5 1.11a130.49 130.49 0 0 0-22.32-29.12C266.4 91.91 321.52 4.63 330.81.19l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5 2.8-.19 5.59-.43 8.44-.43 45.05 0 84.29 24.78 105.3 61.49z' fill='url(%23d)'/%3E%3Cpath d='M256.77 209.54c-.39 6-21.51 26.6-28.9 26.6-68.34 0-79.43 41.34-79.43 41.34 3 34.82 27.26 63.49 56.61 78.66 1.34.69 2.69 1.31 4 1.93 2.35 1 4.71 2 7.06 2.89a106.88 106.88 0 0 0 31.27 6c119.78 5.62 143-143.22 56.55-186.44 22.13-3.85 45.11 5.06 57.94 14.07-21-36.71-60.25-61.49-105.3-61.49-2.85 0-5.64.24-8.44.43A120.27 120.27 0 0 0 182 159.05c3.67 3.11 7.81 7.25 16.52 15.83 16.34 16.12 58.16 32.71 58.25 34.66z' fill='url(%23e)'/%3E%3Cpath d='M256.77 209.54c-.39 6-21.51 26.6-28.9 26.6-68.34 0-79.43 41.34-79.43 41.34 3 34.82 27.26 63.49 56.61 78.66 1.34.69 2.69 1.31 4 1.93 2.35 1 4.71 2 7.06 2.89a106.88 106.88 0 0 0 31.27 6c119.78 5.62 143-143.22 56.55-186.44 22.13-3.85 45.11 5.06 57.94 14.07-21-36.71-60.25-61.49-105.3-61.49-2.85 0-5.64.24-8.44.43A120.27 120.27 0 0 0 182 159.05c3.67 3.11 7.81 7.25 16.52 15.83 16.34 16.12 58.16 32.71 58.25 34.66z' fill='url(%23f)'/%3E%3Cpath d='M170.83 151.06c1.95 1.26 3.55 2.32 5 3.29a111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71 1.13-.03 35.99-.66 53.52 10.74z' fill='url(%23g)'/%3E%3Cpath d='M18.22 261.45C36.77 371 136.1 454.71 248.85 457.91c104.37 2.95 171-57.63 198.58-116.73 17.8-38.21 30.16-100.72 7.48-162.2v-.46c0 .06 0 .14.05.4 8.52 55.67-19.79 109.6-64.05 146.07a7.3 7.3 0 0 0-.13.31c-86.25 70.23-168.78 42.37-185.49 31-1.16-.56-2.33-1.14-3.49-1.74-50.29-24-71.06-69.85-66.61-109.14-42.45 0-56.93-35.82-56.93-35.82s38.12-27.18 88.36-3.54c46.53 21.9 90.23 3.55 90.23 3.54-.09-1.95-41.91-18.59-58.22-34.66-8.71-8.58-12.85-12.72-16.52-15.83a71.11 71.11 0 0 0-6.22-4.7c-1.43-1-3-2-5-3.29-17.53-11.4-52.39-10.77-53.54-10.74h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.19.46-8.74 37.79-4.52 57.15z' fill='url(%23h)'/%3E%3Cpath d='M341.1 166.61a130.49 130.49 0 0 1 22.32 29.12 46.36 46.36 0 0 1 3.6 3C421.5 248.89 393 319.9 390.83 325c44.26-36.47 72.57-90.4 64.05-146.07-27.17-67.78-73.25-95.1-110.88-154.57-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09-9.3 4.44-64.42 91.72 10.28 166.42z' fill='url(%23i)'/%3E%3Cpath d='M367 198.68a46.36 46.36 0 0 0-3.6-3c-.49-.37-1-.74-1.5-1.11-12.83-9-35.81-17.92-57.94-14.07 86.44 43.22 63.23 192.06-56.55 186.44a106.88 106.88 0 0 1-31.27-6c-2.35-.88-4.71-1.85-7.06-2.89-1.36-.62-2.71-1.24-4-1.93l.16.1c16.71 11.4 99.24 39.26 185.49-31 0 0 .05-.13.13-.31C393 319.9 421.5 248.89 367 198.68z' fill='url(%23j)'/%3E%3Cpath d='M148.44 277.48s11.09-41.34 79.43-41.34c7.39 0 28.51-20.62 28.9-26.6s-43.7 18.36-90.23-3.54c-50.24-23.64-88.36 3.54-88.36 3.54s14.48 35.82 56.93 35.82c-4.45 39.29 16.32 85.1 66.61 109.14 1.12.53 2.18 1.12 3.33 1.64-29.35-15.14-53.58-43.84-56.61-78.66z' fill='url(%23k)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94 0 0 0 .14.05.4C427.71 111.15 381.63 83.83 344 24.36c-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5 2.8-.19 5.59-.43 8.44-.43 45.05 0 84.29 24.78 105.3 61.49-12.83-9-35.81-17.92-57.94-14.07 86.44 43.22 63.23 192.06-56.55 186.44a106.88 106.88 0 0 1-31.27-6c-2.35-.88-4.71-1.85-7.06-2.89-1.36-.62-2.71-1.24-4-1.93l.16.1c-1.16-.56-2.33-1.14-3.49-1.74 1.12.53 2.18 1.12 3.33 1.64-29.41-15.17-53.64-43.87-56.67-78.69 0 0 11.09-41.34 79.43-41.34 7.39 0 28.51-20.62 28.9-26.6-.09-1.95-41.91-18.59-58.22-34.66-8.71-8.58-12.85-12.72-16.52-15.83a71.11 71.11 0 0 0-6.22-4.7 111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.11.52-.21 1.06-.32 1.59-.45 2.11-2.49 12.85-2.77 15.15 0 .18 0-.17 0 0A278.84 278.84 0 0 0 16 254.52v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.78-41.22-.53-84.54-15.59-120.76zm-23.84 12.34v.26z' fill='url(%23l)'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: 110% 0;
  background-size: calc(var(--size-units) * 3.7) auto;
}

.firefox .face span {
  display: block;
  font-weight: normal;
  font-size: calc(var(--size-units) * .6);
}

/* Chrome */

.chrome .face {
  background-color: #fff;
  font-size: calc(var(--size-units) * .9);
  font-size: calc(var(--size-units) * 1);
  line-height: 1.1;
  padding: calc(var(--size-units) * .2)  calc(var(--size-units) * .4);
  border: calc(var(--size-units) * .1) solid #1967d2;
}

.chrome .face.fr, .chrome .face.ba, .any .face.bo {
  line-height: 1.1;
  font-size: calc(var(--size-units) * .8);
  padding-left: calc(var(--size-units) * 2.3);
  padding-top: calc(var(--size-units) * .55);
  background-image: url("data:image/svg+xml,%3Csvg height='48' viewBox='0 0 192 192' width='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='b'%3E%3Ccircle cx='96' cy='96' r='88'/%3E%3C/clipPath%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='29.337' x2='81.837' y1='75.021' y2='44.354'%3E%3Cstop offset='0' stop-color='%23a52714' stop-opacity='.6'/%3E%3Cstop offset='.66' stop-color='%23a52714' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='110.872' x2='52.538' y1='164.495' y2='130.329'%3E%3Cstop offset='0' stop-color='%23055524' stop-opacity='.4'/%3E%3Cstop offset='.33' stop-color='%23055524' stop-opacity='0'/%3E%3C/linearGradient%3E%3CclipPath id='e'%3E%3Cpath d='M8 184h83.77l38.88-38.88V116H61.36L8 24.48z'/%3E%3C/clipPath%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='121.858' x2='136.547' y1='49.804' y2='114.13'%3E%3Cstop offset='0' stop-color='%23ea6100' stop-opacity='.3'/%3E%3Cstop offset='.66' stop-color='%23ea6100' stop-opacity='0'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath d='m96 56 34.65 60-38.88 68H184V56z'/%3E%3C/clipPath%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%233e2723' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%233e2723' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='h' cx='92.176' cy='55.948' gradientUnits='userSpaceOnUse' r='84.078' xlink:href='%23a'/%3E%3CclipPath id='i'%3E%3Cpath d='M21.97 8v40.34L61.36 116 96 56h88V8z'/%3E%3C/clipPath%3E%3CradialGradient id='j' cx='21.875' cy='48.52' gradientUnits='userSpaceOnUse' r='78.044' xlink:href='%23a'/%3E%3CradialGradient id='k' cx='95.844' cy='96.138' gradientUnits='userSpaceOnUse' r='87.87'%3E%3Cstop offset='0' stop-color='%23263238' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23263238' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='l' cx='34.286' cy='32.014' gradientUnits='userSpaceOnUse' r='176.746'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='M21.97 8v108h39.39L96 56h88V8z' fill='%23db4437'/%3E%3Cpath d='M21.97 8v108h39.39L96 56h88V8z' fill='url(%23c)'/%3E%3C/g%3E%3Cpath clip-path='url(%23b)' d='M62.31 115.65 22.48 47.34l-.58 1 39.54 67.8z' fill='%233e2723' fill-opacity='.15'/%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='M8 184h83.77l38.88-38.88V116H61.36L8 24.48z' fill='%230f9d58'/%3E%3Cpath d='M8 184h83.77l38.88-38.88V116H61.36L8 24.48z' fill='url(%23d)'/%3E%3C/g%3E%3Cpath clip-path='url(%23b)' d='m129.84 117.33-.83-.48L90.62 184h1.15l38.1-66.64z' fill='%23263238' fill-opacity='.15'/%3E%3Cg clip-path='url(%23b)'%3E%3Cg clip-path='url(%23e)'%3E%3Cpath d='m96 56 34.65 60-38.88 68H184V56z' fill='%23ffcd40'/%3E%3Cpath d='m96 56 34.65 60-38.88 68H184V56z' fill='url(%23f)'/%3E%3C/g%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='m96 56 34.65 60-38.88 68H184V56z' fill='%23ffcd40'/%3E%3Cpath d='m96 56 34.65 60-38.88 68H184V56z' fill='url(%23f)'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cg clip-path='url(%23g)'%3E%3Cpath d='M21.97 8v108h39.39L96 56h88V8z' fill='%23db4437'/%3E%3Cpath d='M21.97 8v108h39.39L96 56h88V8z' fill='url(%23c)'/%3E%3C/g%3E%3C/g%3E%3Cpath clip-path='url(%23b)' d='M96 56v20.95L174.4 56z' fill='url(%23h)'/%3E%3Cg clip-path='url(%23b)'%3E%3Cg clip-path='url(%23i)'%3E%3Cpath d='M8 184h83.77l38.88-38.88V116H61.36L8 24.48z' fill='%230f9d58'/%3E%3Cpath d='M8 184h83.77l38.88-38.88V116H61.36L8 24.48z' fill='url(%23d)'/%3E%3C/g%3E%3C/g%3E%3Cpath clip-path='url(%23b)' d='m21.97 48.45 57.25 57.24L61.36 116z' fill='url(%23j)'/%3E%3Cpath clip-path='url(%23b)' d='m91.83 183.89 20.96-78.2L130.65 116z' fill='url(%23k)'/%3E%3Cg clip-path='url(%23b)'%3E%3Ccircle cx='96' cy='96' fill='%23f1f1f1' r='40'/%3E%3Ccircle cx='96' cy='96' fill='%234285f4' r='32'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='M96 55c-22.09 0-40 17.91-40 40v1c0-22.09 17.91-40 40-40h88v-1z' fill='%233e2723' fill-opacity='.2'/%3E%3Cpath d='M130.6 116c-6.92 11.94-19.81 20-34.6 20-14.8 0-27.69-8.06-34.61-20h-.04L8 24.48v1L61.36 117h.04c6.92 11.94 19.81 20 34.61 20 14.79 0 27.68-8.05 34.6-20h.05v-1z' fill='%23fff' fill-opacity='.1'/%3E%3Cpath d='M97 56c-.17 0-.33.02-.5.03C118.36 56.3 136 74.08 136 96s-17.64 39.7-39.5 39.97c.17 0 .33.03.5.03 22.09 0 40-17.91 40-40s-17.91-40-40-40z' fill='%233e2723' opacity='.1'/%3E%3Cpath d='M131 117.33c3.4-5.88 5.37-12.68 5.37-19.96 0-4.22-.66-8.28-1.87-12.09.95 3.42 1.5 7.01 1.5 10.73 0 7.28-1.97 14.08-5.37 19.96l.02.04-38.88 68h1.16l38.09-66.64z' fill='%23fff' fill-opacity='.2'/%3E%3C/g%3E%3Cg clip-path='url(%23b)'%3E%3Cpath d='M96 9c48.43 0 87.72 39.13 87.99 87.5 0-.17.01-.33.01-.5 0-48.6-39.4-88-88-88S8 47.4 8 96c0 .17.01.33.01.5C8.28 48.13 47.57 9 96 9z' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M96 183c48.43 0 87.72-39.13 87.99-87.5 0 .17.01.33.01.5 0 48.6-39.4 88-88 88S8 144.6 8 96c0-.17.01-.33.01-.5C8.28 143.87 47.57 183 96 183z' fill='%233e2723' fill-opacity='.15'/%3E%3C/g%3E%3Ccircle cx='96' cy='96' fill='url(%23l)' r='88'/%3E%3Cpath d='M0 0h192v192H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(var(--size-units) * .1) center;
  background-size: calc(var(--size-units) * 2.2) auto;
}

.chrome .face.to, .chrome .face.bo {
  background-color: #1967d2;
  color: #fff;
}

/* Edge */

.edge .face, .any .face.to {
  background-color: #fff;
  font-size: calc(var(--size-units) * .98);
  line-height: 1.1;
  padding: calc(var(--size-units) * .2)  calc(var(--size-units) * .4);
  border: calc(var(--size-units) * .1) solid #0067b8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cdefs%3E%3CradialGradient id='b' cx='161.8' cy='68.9' r='95.4' gradientTransform='matrix(1 0 0 -.95 0 248.8)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.7' stop-opacity='0'/%3E%3Cstop offset='.9' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='-340.3' cy='63' r='143.2' gradientTransform='matrix(.15 -.99 -.8 -.12 176.6 -125.4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.8' stop-opacity='0'/%3E%3Cstop offset='.9' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='113.4' cy='570.2' r='202.4' gradientTransform='matrix(-.04 1 2.13 .08 -1179.5 -106.7)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.1' stop-color='%2334c1ed'/%3E%3Cstop offset='.2' stop-color='%232fc2df'/%3E%3Cstop offset='.3' stop-color='%232bc3d2'/%3E%3Cstop offset='.7' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='376.5' cy='568' r='97.3' gradientTransform='matrix(.28 .96 .78 -.23 -303.8 -148.5)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='a' x1='63.3' y1='84' x2='241.7' y2='84' gradientTransform='matrix(1 0 0 -1 0 266)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230c59a4'/%3E%3Cstop offset='1' stop-color='%23114a8b'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='157.3' y1='161.4' x2='46' y2='40.1' gradientTransform='matrix(1 0 0 -1 0 266)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231b9de2'/%3E%3Cstop offset='.2' stop-color='%231595df'/%3E%3Cstop offset='.7' stop-color='%230680d7'/%3E%3Cstop offset='1' stop-color='%230078d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z' transform='translate(-4.6 -5)' style='fill:url(%23a)'/%3E%3Cpath d='M235.7 195.5a93.7 93.7 0 0 1-10.6 4.7 101.9 101.9 0 0 1-35.9 6.4c-47.3 0-88.5-32.5-88.5-74.3a31.5 31.5 0 0 1 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5 0 74 68.1 81.4 82.8 81.4 7.9 0 19.8-2.3 27-4.6l1.3-.4a128.3 128.3 0 0 0 66.6-52.8 4 4 0 0 0-5.3-5.6Z' transform='translate(-4.6 -5)' style='isolation:isolate;opacity:.35;fill:url(%23b)'/%3E%3Cpath d='M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z' transform='translate(-4.6 -5)' style='fill:url(%23c)'/%3E%3Cpath d='M110.3 246.3A79.2 79.2 0 0 1 87.6 225a80.7 80.7 0 0 1 29.5-120c3.2-1.5 8.5-4.1 15.6-4a32.4 32.4 0 0 1 25.7 13 31.9 31.9 0 0 1 6.3 18.7c0-.2 24.5-79.6-80-79.6-43.9 0-80 41.6-80 78.2a130.2 130.2 0 0 0 12.1 56 128 128 0 0 0 156.4 67 75.5 75.5 0 0 1-62.8-8Z' transform='translate(-4.6 -5)' style='opacity:.41;fill:url(%23d);isolation:isolate'/%3E%3Cpath d='M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z' transform='translate(-4.6 -5)' style='fill:url(%23e)'/%3E%3Cpath d='M157 153.8c-.9 1-3.4 2.5-3.4 5.6 0 2.6 1.7 5.2 4.8 7.3 14.3 10 41.4 8.6 41.5 8.6a59.6 59.6 0 0 0 30.3-8.3 61.4 61.4 0 0 0 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C228 28.8 182.3 5 132.6 5a128 128 0 0 0-128 126.2c.5-36.5 36.8-66 80-66 3.5 0 23.5.3 42 10a72.6 72.6 0 0 1 30.9 29.3c6.1 10.6 7.2 24.1 7.2 29.5s-2.7 13.3-7.8 19.9Z' transform='translate(-4.6 -5)' style='fill:url(%23f)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: calc(var(--size-units) * 2.4) auto;
}

.edge .face.fr, .edge .face.ba {
  background-color: #0067b8;
  color: #fff;
  background-position: 95% calc(var(--size-units) * -1.2);
}

.edge .face.fr::after, .edge .face.ba::after {
  content: " >";
  display: inline-block;
  transform: scaleX(.5) scaleY(1.25);
}

.edge .face.to, .edge .face.bo {
  background-position: 95% calc(var(--size-units) * 1.8);
}

/* Safari */

.safari .face {
  background: linear-gradient(150deg, #5d8dee 20%, #ad5fe6 90%);
  color: #fff;
  font-size: calc(var(--size-units) * .9);
  line-height: 1.1;
  padding: calc(var(--size-units) * .2)  calc(var(--size-units) * .4);
  border-top: calc(var(--size-units) * .1) solid #fff;
}

.safari .face.to, .safari .face.bo {
  font-size: calc(var(--size-units) * 1);
}

.safari .face.fr strong, .safari .face.ba strong {
  display: block;
  font-size: calc(var(--size-units) * 1.3);
}

.safari .face.fr, .safari .face.ba, .any .face.ba {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='250.076' height='248.707' viewBox='0 0 66.166 65.804'%3E%3Cdefs%3E%3ClinearGradient id='b'%3E%3Cstop style='stop-color:%2306c2e7;stop-opacity:1' offset='0'/%3E%3Cstop offset='.25' style='stop-color:%230db8ec;stop-opacity:1'/%3E%3Cstop offset='.5' style='stop-color:%2312aef1;stop-opacity:1'/%3E%3Cstop style='stop-color:%231f86f9;stop-opacity:1' offset='.75'/%3E%3Cstop style='stop-color:%23107ddd;stop-opacity:1' offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='a'%3E%3Cstop style='stop-color:%23bdbdbd;stop-opacity:1' offset='0'/%3E%3Cstop style='stop-color:%23fff;stop-opacity:1' offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient xlink:href='%23a' id='d' x1='412.975' y1='237.608' x2='412.975' y2='59.392' gradientUnits='userSpaceOnUse' gradientTransform='matrix(.35154 0 0 .35154 206.79 159.773)'/%3E%3Cfilter style='color-interpolation-filters:sRGB' id='f' x='-.021' width='1.042' y='-.022' height='1.045'%3E%3CfeGaussianBlur stdDeviation='.958'/%3E%3C/filter%3E%3Cfilter style='color-interpolation-filters:sRGB' id='c' x='-.048' width='1.096' y='-.048' height='1.096'%3E%3CfeGaussianBlur stdDeviation='3.564'/%3E%3C/filter%3E%3CradialGradient xlink:href='%23b' id='e' cx='413.061' cy='136.818' fx='413.061' fy='136.818' r='82.125' gradientUnits='userSpaceOnUse' gradientTransform='matrix(.38143 0 0 .38143 194.545 155.58)'/%3E%3C/defs%3E%3Cpath transform='matrix(.33865 0 0 .3261 -106.77 -14.478)' style='opacity:.52999998;fill:%23000;fill-opacity:1;stroke:none;stroke-width:2.93077397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(%23c)' d='M502.083 148.5a89.108 89.108 0 0 1-89.108 89.108 89.108 89.108 0 0 1-89.108-89.108 89.108 89.108 0 0 1 89.108-89.108 89.108 89.108 0 0 1 89.108 89.108Z'/%3E%3Cpath d='M383.294 211.977a31.325 31.325 0 0 1-31.325 31.325 31.325 31.325 0 0 1-31.326-31.325 31.325 31.325 0 0 1 31.326-31.325 31.325 31.325 0 0 1 31.325 31.325z' style='opacity:1;fill:url(%23d);fill-opacity:1;stroke:%23cdcdcd;stroke-width:.09301235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill' transform='translate(-318.886 -180.595)'/%3E%3Cpath d='M380.84 211.977a28.87 28.87 0 0 1-28.871 28.87 28.87 28.87 0 0 1-28.871-28.87 28.87 28.87 0 0 1 28.87-28.87 28.87 28.87 0 0 1 28.871 28.87z' style='opacity:1;fill:url(%23e);fill-opacity:1;stroke:none;stroke-width:.94955933;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill' transform='translate(-318.886 -180.595)'/%3E%3Cpath d='M351.969 184.612a.42.42 0 0 0-.421.42v4.856a.42.42 0 1 0 .841 0v-4.855a.42.42 0 0 0-.42-.421zm-2.754.174a.42.42 0 0 0-.46.463l.212 2.03a.42.42 0 1 0 .837-.087l-.212-2.03a.42.42 0 0 0-.377-.376zm5.526.002a.42.42 0 0 0-.377.375l-.213 2.03a.42.42 0 1 0 .837.089l.214-2.031a.42.42 0 0 0-.46-.463zm-8.355.408a.42.42 0 0 0-.41.508l1.006 4.75a.42.42 0 1 0 .824-.174l-1.006-4.75a.42.42 0 0 0-.414-.334zm11.184.004a.42.42 0 0 0-.414.333l-1.01 4.75a.42.42 0 1 0 .824.175l1.01-4.75a.42.42 0 0 0-.41-.508zm-13.883.757a.42.42 0 0 0-.437.55l.631 1.942a.42.42 0 1 0 .8-.26l-.63-1.942a.42.42 0 0 0-.364-.29zm16.567.001a.42.42 0 0 0-.364.29l-.631 1.942a.42.42 0 1 0 .8.26l.632-1.942a.42.42 0 0 0-.437-.55zm-19.237.976a.42.42 0 0 0-.377.592l1.972 4.437a.42.42 0 1 0 .77-.342l-1.973-4.437a.42.42 0 0 0-.392-.25zm21.937.015a.42.42 0 0 0-.393.25l-1.978 4.434a.42.42 0 1 0 .77.343l1.977-4.434a.42.42 0 0 0-.376-.593zm-24.415 1.296a.42.42 0 0 0-.394.63l1.021 1.77a.42.42 0 1 0 .73-.421l-1.022-1.769a.42.42 0 0 0-.335-.21zm26.859 0a.419.419 0 0 0-.335.21l-1.021 1.769a.42.42 0 1 0 .729.42l1.021-1.768a.42.42 0 0 0-.394-.63zm-29.265 1.5a.422.422 0 0 0-.326.669l2.85 3.93a.42.42 0 1 0 .682-.494l-2.851-3.93a.42.42 0 0 0-.355-.174zm31.701.022a.42.42 0 0 0-.355.174l-2.856 3.926a.42.42 0 1 0 .68.495l2.857-3.926a.42.42 0 0 0-.326-.669zm-33.852 1.783a.42.42 0 0 0-.335.702l1.367 1.518a.42.42 0 1 0 .626-.563l-1.367-1.518a.42.42 0 0 0-.29-.14zm35.976.003a.421.421 0 0 0-.291.139l-1.366 1.517a.42.42 0 1 0 .625.564l1.367-1.518a.42.42 0 0 0-.335-.702zm-38.037 1.977a.42.42 0 0 0-.26.733l3.609 3.249a.42.42 0 1 0 .563-.626l-3.608-3.248a.42.42 0 0 0-.304-.108zm40.108.014a.419.419 0 0 0-.304.108l-3.61 3.245a.42.42 0 1 0 .563.626l3.61-3.245a.42.42 0 0 0-.259-.734zm-41.822 2.19a.42.42 0 0 0-.262.762l1.652 1.2a.42.42 0 1 0 .495-.681l-1.652-1.2a.42.42 0 0 0-.233-.081zm43.535.015a.421.421 0 0 0-.233.08l-1.653 1.2a.42.42 0 1 0 .494.681l1.653-1.2a.42.42 0 0 0-.261-.76zm-45.137 2.336a.42.42 0 0 0-.18.785l4.204 2.427a.42.42 0 1 0 .42-.729l-4.204-2.427a.42.42 0 0 0-.24-.056zm46.727 0a.417.417 0 0 0-.24.056l-4.204 2.427a.42.42 0 1 0 .42.73l4.205-2.428a.42.42 0 0 0-.18-.785zm-47.938 2.506a.42.42 0 0 0-.18.805l1.865.833a.42.42 0 1 0 .343-.77l-1.865-.831a.42.42 0 0 0-.163-.037zm49.158.017a.42.42 0 0 0-.164.037l-1.866.83a.42.42 0 1 0 .343.77l1.866-.831a.42.42 0 0 0-.18-.806zm-50.238 2.602a.42.42 0 0 0-.094.82l4.616 1.504a.42.42 0 1 0 .26-.8l-4.615-1.504a.421.421 0 0 0-.167-.02zm51.315.018a.408.408 0 0 0-.166.02l-4.618 1.5a.42.42 0 1 0 .26.801l4.618-1.5a.42.42 0 0 0-.094-.82zm-51.987 2.732a.42.42 0 0 0-.09.833l1.997.424a.42.42 0 1 0 .175-.823l-1.997-.425a.413.413 0 0 0-.085-.009zm52.654.004a.518.518 0 0 0-.084.009l-1.998.424a.42.42 0 1 0 .175.823l1.997-.424a.42.42 0 0 0-.09-.833zm-53.163 2.761a.42.42 0 0 0-.003.838l4.828.51a.42.42 0 1 0 .088-.837l-4.828-.51a.432.432 0 0 0-.085 0zm53.676.037a.386.386 0 0 0-.086 0l-4.828.504a.42.42 0 1 0 .087.837l4.829-.504a.42.42 0 0 0-.002-.837zm-53.758 2.794a.42.42 0 1 0 0 .842h2.042a.42.42 0 1 0 0-.842zm51.793 0a.42.42 0 1 0 0 .842h2.042a.42.42 0 1 0 0-.842zm-46.803 2.295a.384.384 0 0 0-.086 0l-4.829.504a.42.42 0 1 0 .088.838l4.829-.504a.42.42 0 0 0-.002-.838zm43.853.03a.42.42 0 0 0-.003.838l4.828.51a.42.42 0 1 0 .089-.837l-4.829-.51a.434.434 0 0 0-.085-.001zm-46.26 2.844a.43.43 0 0 0-.085.009l-1.998.424a.42.42 0 1 0 .175.823l1.998-.424a.42.42 0 0 0-.09-.833zm48.669.004a.42.42 0 0 0-.09.833l1.998.424a.42.42 0 1 0 .175-.824l-1.998-.424a.413.413 0 0 0-.085-.01zm-45.305 1.657a.408.408 0 0 0-.167.02l-4.617 1.5a.42.42 0 1 0 .26.801l4.618-1.5a.42.42 0 0 0-.094-.82zm41.937.015a.42.42 0 0 0-.094.82l4.616 1.504a.42.42 0 1 0 .26-.8l-4.616-1.504a.421.421 0 0 0-.166-.02zm-43.7 3.273a.42.42 0 0 0-.163.036l-1.865.831a.42.42 0 1 0 .342.769l1.866-.83a.42.42 0 0 0-.18-.806zm45.46.016a.42.42 0 0 0-.18.805l1.865.832a.42.42 0 1 0 .343-.768l-1.865-.833a.42.42 0 0 0-.163-.036zm-41.827.912a.417.417 0 0 0-.24.056l-4.204 2.427a.42.42 0 1 0 .42.73l4.205-2.428a.42.42 0 0 0-.18-.785zm38.2 0a.42.42 0 0 0-.181.785l4.205 2.427a.42.42 0 1 0 .421-.729l-4.204-2.427a.42.42 0 0 0-.24-.056zm-39.248 3.562a.421.421 0 0 0-.233.08l-1.653 1.2a.42.42 0 1 0 .494.682l1.653-1.2a.42.42 0 0 0-.261-.762zm40.287.015a.42.42 0 0 0-.262.762l1.653 1.2a.42.42 0 1 0 .495-.681l-1.653-1.2a.42.42 0 0 0-.233-.081zm-36.544.145a.418.418 0 0 0-.303.108l-3.611 3.245a.42.42 0 1 0 .563.626l3.61-3.245a.42.42 0 0 0-.259-.734zm32.8.011a.421.421 0 0 0-.259.734l3.608 3.248a.42.42 0 1 0 .564-.625l-3.609-3.249a.42.42 0 0 0-.303-.107zm-29.374 3.084a.42.42 0 0 0-.355.173l-2.857 3.927a.42.42 0 1 0 .681.495l2.856-3.926a.42.42 0 0 0-.325-.669zm25.936.018a.421.421 0 0 0-.327.668l2.851 3.93a.42.42 0 1 0 .682-.494l-2.851-3.93a.42.42 0 0 0-.355-.174zm-29.623.606a.421.421 0 0 0-.291.14l-1.366 1.517a.42.42 0 1 0 .625.563l1.367-1.517a.42.42 0 0 0-.335-.703zm33.33.002a.42.42 0 0 0-.335.702l1.367 1.518a.42.42 0 1 0 .626-.563l-1.367-1.518a.42.42 0 0 0-.29-.139zm-25.655 1.684a.419.419 0 0 0-.392.25l-1.978 4.433a.42.42 0 1 0 .769.343l1.978-4.434a.42.42 0 0 0-.377-.592zm17.956.012a.42.42 0 0 0-.377.592l1.972 4.437a.42.42 0 1 0 .77-.342l-1.973-4.437a.42.42 0 0 0-.392-.25zm-21.432 1.359a.419.419 0 0 0-.335.21l-1.02 1.768a.42.42 0 1 0 .728.421l1.021-1.769a.42.42 0 0 0-.394-.63zm24.935 0a.42.42 0 0 0-.394.63l1.02 1.77a.42.42 0 1 0 .73-.422l-1.021-1.769a.42.42 0 0 0-.335-.21zm-17.055.063a.42.42 0 0 0-.414.334l-1.009 4.749a.42.42 0 1 0 .823.175l1.01-4.75a.42.42 0 0 0-.41-.508zm9.16.003a.42.42 0 0 0-.41.508l1.006 4.75a.42.42 0 1 0 .824-.175l-1.006-4.75a.42.42 0 0 0-.414-.333zm-4.572.48a.42.42 0 0 0-.421.42v4.855a.42.42 0 1 0 .841 0v-4.855a.42.42 0 0 0-.42-.42zm-7.727 1.568a.42.42 0 0 0-.364.29l-.632 1.942a.42.42 0 1 0 .801.26l.631-1.942a.42.42 0 0 0-.436-.55zm15.45 0a.42.42 0 0 0-.437.55l.631 1.943a.42.42 0 1 0 .801-.26l-.631-1.942a.42.42 0 0 0-.364-.29zm-10.366 1.083a.42.42 0 0 0-.377.375l-.213 2.03a.42.42 0 1 0 .837.088l.213-2.03a.42.42 0 0 0-.46-.463zm5.268.002a.42.42 0 0 0-.46.463l.211 2.03a.42.42 0 1 0 .837-.088l-.211-2.03a.42.42 0 0 0-.377-.375z' style='opacity:1;fill:%23f4f2f3;fill-opacity:1;stroke:none;stroke-width:.38088897;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill' transform='translate(-318.886 -180.595)'/%3E%3Cpath transform='matrix(.35154 0 0 .35154 -112.095 -20.822)' d='m469.096 100.607-65.51 38.061-41.42 65.207 60.595-44.882z' style='opacity:.40900005;fill:%23000;fill-opacity:1;stroke:none;stroke-width:1.5614785;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(%23f)'/%3E%3Cpath style='opacity:1;fill:%23ff5150;fill-opacity:1;stroke:none;stroke-width:1.01970422;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill' d='m129.839 160.803-23.014-23.015 31.437-8.423z' transform='matrix(.64804 -.3317 -.36122 .63206 10.328 -23.732)'/%3E%3Cpath transform='matrix(-.36122 .63206 .64804 -.3317 -20.923 6.11)' d='m129.839 160.803-23.014-23.015 31.437-8.423z' style='opacity:1;fill:%23f1f1f1;fill-opacity:1;stroke:none;stroke-width:1.01970422;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill'/%3E%3Cpath style='opacity:.243;fill:%23000;stroke:none;stroke-width:.09301235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' d='m331.853 231.185 23.416-15.752 16.815-22.665z' transform='translate(-318.886 -180.595)'/%3E%3C/svg%3E"),
    linear-gradient(210deg, #359cd7 10%, #7d6efb 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: 98% center, center;
  background-size: calc(var(--size-units) * 2.8) auto, cover;
}

/* Any */

.any .face {
  font-size: calc(var(--size-units) * 1.7);
  font-weight: bold;
  padding: calc(var(--size-units) * .2) calc(var(--size-units) * .4);
}

.any .face.bo, .any .face.to {
  background-color: #fff;
  font-size: calc(var(--size-units) * 1.7);
  padding: calc(var(--size-units) * .2)  calc(var(--size-units) * .4);
  background-size: calc(var(--size-units) * 2.8) auto;
  background-position: 98% center;
}

.any .face.bo {
  font-size: calc(var(--size-units) * 1.4);
  border: calc(var(--size-units) * .1) solid #1967d2;
  padding-top: calc(var(--size-units) * .7);
}

.any .face.fr, .any .face.to {
  font-size: calc(var(--size-units) * 2);
  background-size: calc(var(--size-units) * 2.8) auto;
  background-position: 98% center;
}

.any .face.fr {
  border: none;
}

.any .face.ba {
  color: #fff;
  font-size: calc(var(--size-units) * 1.9);
}

JS

              
                function toggleUA(btnID) {
  var deToggle = document.querySelectorAll("button.tUA[aria-pressed]");
  for (var i = 0; i < deToggle.length; i++) {
    deToggle[i].setAttribute("aria-pressed", "false");
  }
  var theButton = document.getElementById(btnID);
  theButton.setAttribute("aria-pressed", "true");
  changUAClass(btnID);
}

function changUAClass(bClass) {
  UA = document.querySelector("#BestViewedIn");
  UA.className = "";
  UA.classList.add(bClass);
}

function toggleUnits(btnID) {
  var deToggle = document.querySelectorAll("button.tun[aria-pressed]");
  for (var i = 0; i < deToggle.length; i++) {
    deToggle[i].setAttribute("aria-pressed", "false");
  }
  var theButton = document.getElementById(btnID);
  theButton.setAttribute("aria-pressed", "true");
  var newUnits = btnID.substring(1);
  document.documentElement.style.setProperty("--size-units",newUnits);
}

function toggleSteps(btnID) {
  var aniBox = document.querySelectorAll(".box");
  var deToggle = document.querySelector("button.tst[aria-pressed]");
  if (deToggle.getAttribute("aria-pressed") == "true") {
    deToggle.setAttribute("aria-pressed", "false");
    for (var i = 0; i < aniBox.length; i++) {
      aniBox[i].classList.toggle("stepped");
    }
  } else {
    deToggle.setAttribute("aria-pressed", "true");
    for (var i = 0; i < aniBox.length; i++) {
      aniBox[i].classList.toggle("stepped");
    }
  }
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions