Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class='container'>
  <div class='switch'>
    <div class='joy-con left'></div>
    <div class='bezel-bezel'>
      <div class='bezel'>
        <div class='screen'>
          <div class='header'>
            <div class='options'></div>
            <div class='battle-type'>Solo Battle</div>
          </div>
          <div class='characters-container'>
            <div class='characters'>
              <div class='aang'>
                <span>Aang</span>
              </div>

              <div class='katara'><span>Katara</span></div>
              <div class='sokka'><span>Sokka</span></div>
              <div class='toph'><span>Toph</span></div>
              <div class='zuko'><span>Zuko</span></div>
              <div class='suki'><span>Suki</span></div>
              <div class='uncle-iroh'><span>Uncle Iroh</span></div>
              <div class='azula'><span>Azula</span></div>
              <div class='ty-lee'><span>Ty Lee</span></div>
              <div class='mai'><span>Mai</span></div>
              <div class='ozai'><span>Ozai</span></div>
              <div class='roku'><span>Roku</span></div>
              <div class='jet'><span>Jet</span></div>
              <div class='pipsqueak'><span>Pipsqueak</span></div>
              <div class='combustion-man'><span>Combustion Man</span></div>
              <div class='admiral-zhao'><span>Admiral Zhao</span></div>
              <div class='hakoda'><span>Hakoda</span></div>
              <div class='the-boulder'><span>The Boulder</span></div>
              <div class='king-bumi'><span>King Bumi</span></div>
              <div class='pakku'><span>Pakku</span></div>
              <div class='piandao'><span>Piandao</span></div>
              <div class='jeong-jeong'><span>Jeong Jeong</span></div>
              <div class='long-feng'><span>Long Feng</span></div>
              <div class='huu'><span>Huu</span></div>
              <div class='gyatso'><span>Gyatso</span></div>
              <div class='hama'><span>Hama</span></div>
              <div class='june'><span>June</span></div>
              <div class='korra'><span>Korra</span></div>
              <div class='mako'><span>Mako</span></div>
              <div class='bolin'><span>Bolin</span></div>
              <div class='asami'><span>Asami</span></div>
              <div class='tenzin'><span>Tenzin</span></div>
              <div class='lin-beifong'><span>Lin</span></div>
              <div class='amon'><span>Amon</span></div>
              <div class='lieutenant'><span>Lieutenant</span></div>
              <div class='tahno'><span>Tahno</span></div>
              <div class='jinora'><span>Jinora</span></div>
              <div class='ikki'><span>Ikki</span></div>
              <div class='meelo'><span>Meelo</span></div>
              <div class='general-iroh'><span>General Iroh</span></div>
              <div class='tarrlok'><span>Tarrlok</span></div>
              <div class='tonraq'><span>Tonraq</span></div>
              <div class='unalaq'><span>Unalaq</span></div>
              <div class='ed'><span>Eska &amp; Desna</span></div>
              <div class='wan'><span>Wan</span></div>
              <div class='general-bumi'><span>General Bumi</span></div>
              <div class='kya'><span>Kya</span></div>
              <div class='tzu-li'><span>Tzu Li</span></div>
              <div class='vatuu'><span>Vatuu</span></div>
              <div class='raava'><span>Raava</span></div>
              <div class='aye-aye'><span>Aye-aye</span></div>
              <div class='zaheer'><span>Zaheer</span></div>
              <div class='pli'><span>P'li</span></div>
              <div class='ming-hua'><span>Ming Hua</span></div>
              <div class='ghazan'><span>Ghazan</span></div>
              <div class='suyin'><span>Suyin</span></div>
              <div class='opal'><span>Opal</span></div>
              <div class='kai'><span>Kai</span></div>
              <div class='ww'><span>Wing and Wei</span></div>
              <div class='kuvira'><span>Kuvira</span></div>
              <div class='kyoshi'><span>Kyoshi</span></div>
              <div class='yangchen'><span>Yangchen</span></div>
              <div class='kuruk'><span>Kuruk</span></div>
              <div class='haru'><span>Haru</span></div>
              <div class='smellerbee'><span>Smellerbee</span></div>
              <div class='last-row'>
              <div class='long-shot'><span>Long Shot</span></div>
              <div class='xin-fu'><span>Xin Fu</span></div>
              <div class='waterbender'><span>Waterbender</span></div>
              <div class='air-nomad'><span>Air Nomad</span></div>
              <div class='swampbender'><span>Swampbender</span></div>
              <div class='sandbender'><span>Sandbender</span></div>
              <div class='fn-soldier'><span>Fire Nation Soldier</span></div>
              <div class='dai-li'><span>Dai Li Agent</span></div>
              <div class='white-lotus'><span>White Lotus</span></div>
              <div class='random-char'><span>Random</span></div>
              </div>
            </div>
          </div>
          <div class='selection-container'>
            <div class='selection p1'>
              <div class='overlay p1-overlay'>
                <div class='p1-title'>Player 1</div>
                <div class='label p1-label'>P1</div>
              </div>
            </div>
            <div class='selection cpu'>
              <div class='qm'></div>
              <div class='overlay cpu-overlay'>
                <div class='random'>Random</div>
                <div class='cpu-lvl'>
                  <span>CPU Lv.</span>
                  <span>3</span>
                </div>
                <div class='label cpu-label'>CPU</div>
              </div>
            </div>
            <div class='plus-minus'></div>
          </div>
        </div>
      </div>
    </div>
    <div class='joy-con right'></div>
  </div>
</div>
              
            
!

CSS

              
                $grey: #2d3032;
$joy-con-left: #00a0bd;
$joy-con-right: #ff5b4d;
$sel-big-diag: #b01e64;
$sel-med-diag: #c5486d;
$sel-sml-diag: #d5818d;
$sel-bg: #b6b4d2;

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 10px;
  font: 800 100% system-ui;
}

.container {
  display: grid;
  width: 100%;
  height: 100vh;
  place-items: center;
}

.switch {
  height: 470px;
  display: flex;

  &:before {
    display: block;
    content: "";
    padding-bottom: calc(100% * 9 / 16);
  }
}

.bezel-bezel {
  padding: 0.5rem 1rem;
  background: $grey;
  clip-path: polygon(
    0% 2%,
    1% 2%,
    1% 0%,
    99% 0%,
    99% 2%,
    100% 2%,
    100% 98%,
    100% 100%,
    85% 100%,
    15% 100%,
    0 100%,
    0% 85%
  );
}

.bezel {
  padding: 1.5rem 2rem;
  background: #0c0c0e;
  background-clip: padding-box;
  border-radius: 1em;
}

.joy-con {
  height: 470px;
  width: 135px;

  &.left {
    background: 
      linear-gradient(#0c0c0e 0% 100%) 80% 30px / 22px 5px, 
      radial-gradient(circle, #2d3032 40%, #0c0c0e 44% 50%, transparent 50%) 50% 90px / 85px 85px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 205px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 275px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 20% 240px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 80% 240px / 35px 35px,
      linear-gradient(#0c0c0e 0% 100%) 80% 330px / 22px 22px, 
      $joy-con-left;
    background-repeat: no-repeat;
    border-radius: 65% 1% 0% 65% / 20% 1% 0% 20%;
  }

  &.right {
    background: 
      linear-gradient(#0c0c0e 0% 100%) 20% 30px / 22px 5px, 
      linear-gradient(#0c0c0e 0% 100%) 24% 22px / 5px 22px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 75px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 50% 145px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 20% 110px / 35px 35px,
      radial-gradient(circle, #0c0c0e 50%, transparent 50%) 80% 110px / 35px 35px,
      radial-gradient(circle, #2d3032 40%, #0c0c0e 44% 50%, transparent 50%) 50% 220px / 85px 85px,
      radial-gradient(circle, #0c0c0e 45%, #8a8c8e 45% 55%, transparent 55%) 20% 330px / 35px 35px,
      $joy-con-right;
    background-repeat: no-repeat;
    border-radius: 1% 65% 65% 0% / 1% 20% 20% 0%;
    margin-left: -1px;
  }
}

.screen {
  width: 720px;
  height: calc(720px * 9 / 16);
  background: white;
  display: grid;
  grid-template-rows: 10% 59% 1fr;
}

.header {
  display: flex;
  background: linear-gradient(358deg, #ac0104 60%, transparent 61%) 0% 0/100%
      50%,
    linear-gradient(to right, #cbdfe9 20%, #fede57 40%) 0 0 / 100% 50%,
    linear-gradient(#000 0% 100%);
  background-repeat: no-repeat;
  height: 100%;
}

.options {
  background: linear-gradient(
    120deg,
    #ac010f 45%,
    #870104 45% 85%,
    transparent 85%
  );
  width: 125px;
  height: 90%;
  position: relative;
  &:before {
    display: block;
    content: "";
    height: 100%;
    width: 45px;
    font-size: 8px;
    position: relative;
    left: 1em;
    background: linear-gradient(
          0deg,
          #fb7073 0.35em,
          #ac010f 0.35em 0.65em,
          #fb7073 0.65em
        )
        1.9em 1em / 0.9em 1em,
      linear-gradient(135deg, transparent 49%, #fb7073 50%) 1em 0.3em / 1.2em
        1.2em,
      linear-gradient(45deg, transparent 49%, #fb7073 50%) 1em 1.5em / 1.2em
        1.2em,
      radial-gradient(
          circle at left,
          transparent 0.45em,
          #fb7073 0.5em 0.85em,
          transparent 0.85em 1.15em,
          #fb7073 1.15em 1.5em,
          transparent 1.55em
        )
        2.75em 1em / 3em 3em,
      linear-gradient(
          0deg,
          #fb7073 0.35em,
          #ac010f 0.35em 0.65em,
          #fb7073 0.65em
        )
        2.3em 3em / 0.5em 1em;
    background-repeat: no-repeat;
  }

  &:after {
    display: block;
    content: "";
    height: 75%;
    width: 2.6em;
    font-size: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.6em;
    background: radial-gradient(
          circle at right,
          #870104 0.1em,
          transparent 0.1em
        ) -0.6em 0/1em 1em,
      linear-gradient(0deg, #870104 0% 100%) 0.3em 0.3em/2em 0.3em,
      radial-gradient(circle at left, #870104 0.1em, transparent 0.1em) 2.3em
        0em/1em 1em,
      linear-gradient(#ff7073 0% 100%);
    border-radius: 15% 2% 2% 15% / 15% 2% 2% 15%;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
  }
}
.battle-type {
  width: 50%;
  position: relative;
  top: 5%;
  background: linear-gradient(0deg, #000 0% 15%, transparent 15%) 50% -85%/77% 50%,
    linear-gradient(0deg, #000 0% 15%, transparent 15%) 50% 100%/77% 50%,
    linear-gradient(
        45deg,
        transparent 10%,
        #000 10% 12%,
        #fede57 12% 50%,
        transparent 50%
      )
      0% 100%/100% 50%,
    linear-gradient(
        135deg,
        transparent 10%,
        #000 10% 12%,
        #fede57 12% 50%,
        transparent 50%
      )
      0% 0%/100% 50%,
    linear-gradient(
        135deg,
        transparent 50%,
        #fede57 50% 88%,
        #000 88% 90%,
        transparent 90%
      )
      0% 100%/100% 50%,
    linear-gradient(
        45deg,
        transparent 50%,
        #fede57 50% 88%,
        #000 88% 90%,
        transparent 90%
      )
      100% 0%/100% 50%,
    linear-gradient(#fede57 0% 100%) 50% 50% / 50% 50%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;

  &:before {
    display: block;
    content: "";
    position: absolute;
    right: 12%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 10px solid #7f5d29;
  }
}

.characters-container {
  width: 100%;
  background-color: #000;
  padding: 0.5em 0.5em 0.5em;
}

.characters {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(13, calc(100% / 12.99));
  font: 800 50% system-ui;
  background: linear-gradient(to bottom right, #448fe5, #fede57);
}

.characters > div, .characters > .last-row > div {
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid black;

  &:before {
    content: "";
    padding-bottom: 66%;
    display: block;
  }

  & > span {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    text-align: center;
    overflow-wrap: break-word;
  }
}

.aang {
  background: url("https://cdn130.picsart.com/313639937062211.png?type=webp&to=min&r=240");
  background-size: 30px 38px;
}

.katara {
  background: url("https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/avatar/characters/katara-character-web-desktop.png?height=0&width=480&matte=true&crop=false");
  background-size: 160px 153px;
    background-position: -63px -41px;
}

.sokka {
  background: url("https://upload.wikimedia.org/wikipedia/en/c/cc/Sokka.png"),
    padding-box;
      background-size: 67px 81px;
    background-position: 7px -3px;
}

.toph {
  background: url("https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/avatar/characters/toph-character-web-desktop.png?height=0&width=480&matte=true&crop=false");
  background-size: 160px 153px;
    background-position: -63px -29px;
}

.zuko {
  background: url("https://vignette.wikia.nocookie.net/villains/images/2/23/Principe_zuko_by_yuzumi2000-d6lbrj4.png/revision/latest?cb=20170611234341");
  background-size: 350% 350%;
  background-position: 55% 25%;
}

.suki {
  background: url("https://vignette.wikia.nocookie.net/p__/images/f/f7/Suki_%28Avatar%29.png/revision/latest?cb=20200608031102&path-prefix=protagonist");
  background-position: 25% 21%;
    background-size: 126px 253px;
}

.uncle-iroh {
  background: url("https://cdn130.picsart.com/314979716371211.png?type=webp&to=min&r=480");
  background-size: 105px 80px;
    background-position: 50% -8px;
}

.azula {
  background: url("https://vignette.wikia.nocookie.net/villains/images/a/ac/Azula_Render.png/revision/latest/top-crop/width/360/height/450?cb=20170715180812");
  background-size: 90px 113px;
    background-position: 72% 26%;
}

.ty-lee {
  background: url("https://vignette.wikia.nocookie.net/villains/images/6/6d/Ty_Lee.png/revision/latest/top-crop/width/360/height/450?cb=20200626041512");
      background-size: 90px 113px;
    background-position: 37% 18%;
}

.mai {
  background: url("https://cdn140.picsart.com/332349869025211.png?type=webp&to=min&r=240");
  background-size: 60px 63px;
    background-position: 50% 4%;
}

.ozai {
  background: url("https://vignette.wikia.nocookie.net/villains/images/e/e7/Ozai_Render.png/revision/latest/top-crop/width/360/height/450?cb=20200403045627");
  background-size: 90px 113px;
    background-position: 72% 12%;
}

.roku {
  background: url("https://64.media.tumblr.com/67a7a84b854877742e001f18df520ffe/tumblr_p4si8dVN7p1tyjd90o1_400.png");
  background-size: 190% 190%;
    background-position: -33% 36%;
}

.jet {
  background: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2ce65474-ccdb-427a-9a86-367308a340c3/dbagr5n-1afd4265-f0d7-4f90-8c85-12d1841d5bf6.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMmNlNjU0NzQtY2NkYi00MjdhLTlhODYtMzY3MzA4YTM0MGMzXC9kYmFncjVuLTFhZmQ0MjY1LWYwZDctNGY5MC04Yzg1LTEyZDE4NDFkNWJmNi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.xBXBXcL4Dq5knijiKGT_zHKfzl7q0H4_fBrQ6Md6Jms");
  background-size: 124px 139px;
    background-position: 64% 18%;
}

.pipsqueak {
  background-image: url('https://64.media.tumblr.com/0370bbf19238114e6381a62cc3d1eed0/tumblr_p2mak6FIKD1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 52% 4%;
}

.combustion-man {
  
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/1/1b/Tumblr_p4q1ez5NI91tyjd90o1_250.png/revision/latest?cb=20190215013325');
  background-size: 94px 151px;
    background-position: 52% 4%;
}

.admiral-zhao {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/d/d4/General_Zhao.png/revision/latest/top-crop/width/360/height/450?cb=20200607023441');
  background-size: 90px 120px;
  background-position: 10% 10%;
}

.hakoda {
  background-image: url('https://64.media.tumblr.com/1987a086e8a630fce36eaf5e914ac02e/tumblr_p47uac1mPR1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 32% 4%;
}

.the-boulder {
  background-image: url('https://cdn141.picsart.com/330128437043211.png?type=webp&to=min&r=240');
  background-size: 93px 110px;
  background-position: 80% 10%;
}

.king-bumi {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/6/6e/King_Bumi_Render.png/revision/latest/top-crop/width/360/height/450?cb=20190214211947&path-prefix=protagonist');
  background-size: 90px 113px;
  background-position: 20% 0%;
}

.pakku {
  background-image: url('https://cdn130.picsart.com/333233450054211.png?type=webp&to=min&r=1280');
  background-size: cover;
}

.piandao {
  background-image: url('https://static1.comicvine.com/uploads/original/11129/111295032/5383098-2254338212-Piand.png');
background-size: 125px 96px;
    background-position: 50% 27%;
}

.jeong-jeong {
  background-image: url('https://1.bp.blogspot.com/-DFzBUNhzvi0/XwlhWmjmXbI/AAAAAAAAHC4/pQhQ1_Bn3sgZ_SwWdcI9CVgAftt4oxQrwCNcBGAsYHQ/w125-h200/tumblr_p2xfq7ir2o1tyjd90o1_250.png');
  background-position: 50% 10%;
}

.long-feng {
  background-image: url('https://64.media.tumblr.com/22684331e14c92bc411976ce59225e3f/tumblr_p3wrtqkwRD1tyjd90o1_250.png');
      background-size: 82px 180px;
    background-position: -13px -2px;
}

.huu {
  background-image: url('https://66.media.tumblr.com/7356901de6a103d3b110cc7f70e02a5a/tumblr_p3coh1mzxW1tyjd90o1_500.png');
  background-size: 115px 100px;
  background-position: 50% 32%;
}

.gyatso {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/gyatso.png');
  background-size: cover;
  background-position: 0% 30%;
}

.hama {
  background-image: url('https://64.media.tumblr.com/2222f77ed79e07f107ed3e32f273411f/tumblr_p4w0uiqPUr1tyjd90o1_250.png');
  background-size: 94px 151px;
    background-position: 32% 4%;
}

.june {
  background-image: url('https://64.media.tumblr.com/1f4cef5246519a17521342385c946ab5/tumblr_p5cyji8C5K1tyjd90o1_250.png');
  background-size: 66px 200px;
  background-position: 100% 6%;
}

.korra {
  background-image: url('https://cdn130.picsart.com/270253092011211.png?type=webp&to=min&r=640');
  background-size: 92px 86px;
  background-position: 70% 10%;
}

.mako {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/6/6f/Mako-0.png/revision/latest/top-crop/width/360/height/450?cb=20150922163724&path-prefix=protagonist');
  background-size: 90px 113px;
    background-position: 10% 20%;
}

.bolin {
  background-image: url('https://nick-intl.mtvnimages.com/uri/mgid:file:gsp:kids-assets:/nick/properties/legend-of-korra/characters/bolin-character-web-desktop.png?height=0&width=480&matte=true&crop=false');
  background-size: 120px 113px;
  background-position: 70% 15%;
}

.asami {
  background-image: url('https://i.pinimg.com/originals/d5/72/fb/d572fb617af19e7332a23632b35f4eac.png');
  background-size: 73px 141px;
  background-position: 10% 12%;
}

.tenzin {
  background-image: url('https://vignette.wikia.nocookie.net/nickelodeon/images/d/d6/Tenzin.png/revision/latest?cb=20200301062511');
  background-size: 160px 148px;
  background-position: 40% 5%;
}

.lin-beifong {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/2/22/Linbeifong.png/revision/latest/top-crop/width/360/height/450?cb=20151028200838&path-prefix=protagonist');
  background-size: 90px 113px;
    background-position: 30% 5%;
}

.amon {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/8/84/Amon-Full-Body-Render-amon-36836979-526-1016.png/revision/latest?cb=20200626065332');
  background-size: 175px 339px;
  background-position: 60% 12%;
}

.lieutenant {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04e00fc4-400f-4c87-9e7a-9efa27c5cb0c/d5bgcf2-28d66a3a-9c51-4f9d-b7e3-01133cd42714.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDRlMDBmYzQtNDAwZi00Yzg3LTllN2EtOWVmYTI3YzVjYjBjXC9kNWJnY2YyLTI4ZDY2YTNhLTljNTEtNGY5ZC1iN2UzLTAxMTMzY2Q0MjcxNC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.1VIsk9HIFAso8Dj8QyezpYToH0m68jp3vot42Mk8-RI');
  background-size: 160px 165px;
  background-position: 30% 5%;
}

.tahno {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4162efc0-2b20-4d54-a195-a45691d720ed/d5anhq1-61fa103b-4276-4ee8-9a2b-f86ff4f07fa6.png/v1/fill/w_700,h_352,strp/tahno__the_last_hairbender_by_luvlegendofkorra_d5anhq1-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0zNTIiLCJwYXRoIjoiXC9mXC80MTYyZWZjMC0yYjIwLTRkNTQtYTE5NS1hNDU2OTFkNzIwZWRcL2Q1YW5ocTEtNjFmYTEwM2ItNDI3Ni00ZWU4LTlhMmItZjg2ZmY0ZjA3ZmE2LnBuZyIsIndpZHRoIjoiPD03MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.SLboxqt2jm4RkLL2j5rw9_F76WlHmtfjANjZ7DZVd8s');
  background-size: 140px 70px;
  background-position: 80% 0%;
}

.jinora {
  background-image: url('https://i.pinimg.com/originals/75/7d/f8/757df8198b03c25324a8b8df8cdf26f0.png');
  background-size: 114px 157px;
  background-position: 40% 8%;
}

.ikki {
  background-image: url('https://cdn140.picsart.com/336436372045211.png?type=webp&to=min&r=240');
  background-size: 60px 70px;
  background-position: 0% 5%;
}

.meelo {
  background-image: url('https://static.zerochan.net/Avatar%3A.The.Legend.of.Korra.full.2455898.png');
  background-size: 267px 360px;
  background-position: 63% 58%;
}

.general-iroh {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e9b01209-c378-4e1b-8533-1c545b4f60ac/d63sjr5-4889181f-4a23-45cb-9124-5caf79bcae43.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvZTliMDEyMDktYzM3OC00ZTFiLTg1MzMtMWM1NDViNGY2MGFjXC9kNjNzanI1LTQ4ODkxODFmLTRhMjMtNDVjYi05MTI0LTVjYWY3OWJjYWU0My5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.7lyyGUCSInvTgkwvIvGkry-7RtqH8sml8e3gOZg3t5c');
  background-size: 110px 210px;
  background-position: 50% 10%;
}

.tarrlok {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/tarrlok.png');
  background-size: cover;
}

.tonraq {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/tonraq.png');
    background-size: cover;
}

.unalaq {
  background-image: url('https://vignette.wikia.nocookie.net/villains/images/7/7c/Unalaq.png/revision/latest/top-crop/width/180/height/135?cb=20200907042846');
  background-size: 90px 67px;
  background-position: 70% 40%; 
}

.ed {
 background-image: url('https://s3.amazonaws.com/petergarrow.com/images/eska-desna.png');
  background-size: 88px 50px;
  background-position: 50% 20%;
}

.wan {
  background-image: url('https://wyspstore2.s3.amazonaws.com/posts/840151001v3.png');
  background-size: 120px 124px;
  background-position: 10% 10%;
}

.general-bumi {
  background-image: url('https://38.media.tumblr.com/f21e9cde3d42b391ef740956dec05631/tumblr_ncnu89J4jg1qkwdtzo1_r1_1280.png');
  background-size: 267px 178px;
  background-position: 70% 5%;
}

.kya {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/kya.png');
  background-size: 60px 75px;
  background-position: 50% 40%;
}

.tzu-li {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/zhu-li.png');
  background-size: cover;
}

.vatuu {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/c/cb/Vaatu_mega_by_saxonxvi-d73v17k.png/revision/latest?cb=20151023125909');
  background-size: cover;
}

.raava {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/83dd7847-3f8e-4e81-bc6c-de0e7039d8be/d73uyxu-22d91a1b-72c0-433c-a459-4a010634ec45.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvODNkZDc4NDctM2Y4ZS00ZTgxLWJjNmMtZGUwZTcwMzlkOGJlXC9kNzN1eXh1LTIyZDkxYTFiLTcyYzAtNDMzYy1hNDU5LTRhMDEwNjM0ZWM0NS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.PwuK97NV9O2llOIe4taPHYDjtTtmJr2wzGfQYG-3CZY');
  background-size: cover;
}

.aye-aye {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/aye-aye.png');
  background-size: cover;
}

.zaheer {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/7/79/Zaheer_render_by_legendaryrey-d7wyzuo.png/revision/latest/scale-to-width-down/340?cb=20151023125447');
  background-size: 113px 87px;
  background-position: 70% 10%;
}

.pli {
  background-image: url("https://s3.amazonaws.com/petergarrow.com/images/p'li.png");
  background-size: cover;
}

.ming-hua {
  background-image: url('https://vignette.wikia.nocookie.net/vsbattles/images/c/c4/Ming_hua_render_by_legendaryrey-d7wz088.png/revision/latest?cb=20151031112305');
  background-size: 120px 116px;
  background-position: 60% 60%;
}

.ghazan {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/ghazan.png');
  background-size: cover;
  background-position: 0% 20%;
}

.suyin {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/suyin.png');
  background-size: cover;
}

.opal {
  background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/65cc28bf-d46a-4459-8d83-e94298a26133/d90vcaq-551f734e-df32-4fb7-b7e5-e449d926b2bb.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNjVjYzI4YmYtZDQ2YS00NDU5LThkODMtZTk0Mjk4YTI2MTMzXC9kOTB2Y2FxLTU1MWY3MzRlLWRmMzItNGZiNy1iN2U1LWU0NDlkOTI2YjJiYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.IN-NuZZ7JpyspXqDI7PKg4yVzYe1DA2h06UeGZzXGlQ');
  background-size: 241px 180px;
  background-position: 20% 40%;
}

.kai {
  background-image: url('https://cdn130.picsart.com/335146149012211.png?type=webp&to=min&r=240');
  background-size: 120px 188px;
  background-position: 30% 10%;
}

.ww {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/wing-wei.png');
  background-size: cover;
}

.kuvira {
  background-image: url('https://vignette.wikia.nocookie.net/p__/images/e/ec/Kuvira.png/revision/latest/top-crop/width/360/height/450?cb=20190214014419&path-prefix=protagonist');
      background-size: 90px 113px;
    background-position: 20% 10%;
}

.kyoshi {
  background-image: url('https://external-preview.redd.it/qPxQdHYGBIwX9HMnWt7TgpPikb3I4KzzYX9OJ1eJDBg.png?auto=webp&s=972da68715fae2a1cddab552edbb33149236c798');
  background-size: 100px 87px;
  background-position: 50% 80%;
}

.yangchen {
  background-image: url('https://i.pinimg.com/originals/ac/74/c5/ac74c5693b20eaa25fde56fecedca272.png');
  background-size: 156px 174px;
  background-position: 50% 3%;
}

.kuruk {
  background-image: url('https://i.pinimg.com/originals/71/ba/c7/71bac7b6cfc6257d0ada7093e1ddd43f.png');
  background-size: 156px 174px;
  background-position: 50% 5%;
}

.haru {
  background-image: url('https://64.media.tumblr.com/60527750388d85d2d865efca52bc97dd/tumblr_p4zzmmnH8X1tyjd90o1_250.png');
      background-size: 94px 151px;
    background-position: 50% 4%;
}

.smellerbee {
  background-image: url('https://i.pinimg.com/originals/bc/fd/f1/bcfdf15061bd3f9fbdc64a6726c8e4ce.png');
  background-size: 112px 163px;
  background-position: 50% 25%;
}

.long-shot {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/longshot.png');
  background-size: cover;
}

.xin-fu {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/xin-fu.png');
  background-size: cover;
  background-position: 0% 40%;
}

.waterbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/waterbender.png');
  background-size: cover;
}

.air-nomad {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/air-bender.png');
  background-size: 166px 125px;
  background-position: 50% 30%;
}

.swampbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/swampbender.png');
  background-size: cover;
}

.sandbender {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/sandbender.png');
  background-position: 0% 40%;
  background-size: cover;
}

.fn-soldier {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/fire-nation-soldier.png');
  background-size: cover;
}

.dai-li {
  background-image: url('https://64.media.tumblr.com/719c06b8ed2027a907a4e74a0facf1f2/tumblr_p51agr0h501tyjd90o1_250.png');
  background-size: 125px 200px;
  background-position: 50% 15%;
}

.white-lotus {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/white-lotus.png');
  background-size: cover;
}

.random-char {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/Questionmark.png');
  background-size: 23px 33px;
  background-position: 50%;
  
}

.selection-container {
  background: radial-gradient(
    at top right,
    #e9ece2 5%,
    #1f82e4 32% 45%,
    #432d93 92%
  );

  background-repeat: no-repeat;
  display: grid;
  padding: 0.5em 0.5em 0em;
  grid-template-columns: 47.5% 47.5% 1fr;
  grid-gap: 0.5em;
}

.selection {
  &.cpu {
    $sel-big-diag: #707070;
    $sel-med-diag: #a5a5a5;
    $sel-sml-diag: #cfcfcf;
    $sel-bg: #dbdbdb;
    background: linear-gradient(135deg, #000 0% 34px, transparent 34px),
       linear-gradient(15deg, $sel-sml-diag 25%, transparent 25%),
    linear-gradient(25deg, $sel-med-diag 35%, transparent 35%),
    linear-gradient(40deg, $sel-big-diag 50%, transparent 50%),
      linear-gradient($sel-bg 0% 100%);
  }
  height: 100%;
  width: 100%;
  border-top: 0.5em solid black;
  border-right: 0.2em solid black;
  border-left: 0.2em solid black;
  clip-path: polygon(45px 0, 100% 0, 100% 100%, 0 100%, 0% 45px);
  background: linear-gradient(135deg, #000 0% 34px, transparent 34px),
    linear-gradient(15deg, $sel-sml-diag 25%, transparent 25%),
    linear-gradient(25deg, $sel-med-diag 35%, transparent 35%),
    linear-gradient(40deg, $sel-big-diag 50%, transparent 50%),
    linear-gradient($sel-bg 0% 100%);
  background-repeat: none;
  position: relative;
}

.qm {
  background: url('https://s3.amazonaws.com/petergarrow.com/images/Questionmark.png');
  height: 100px;
  width: 78px;
  background-size: cover;
  position: absolute;
  left: 50px;
}

.p1-overlay {
  height: calc(100% + 1px);
  width: 60%;
  position: relative;
  top: -1px;
  left: 40%;
  clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 0% 100%);
  background: 
    linear-gradient(108deg, transparent 17%, rgba(0, 0, 0, .2) 17% 19%, rgb(254, 54, 53) 19% 20%, blue 20%),
    ;
  background-repeat: no-repeat;
  z-index: 1000;
  &:before {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    width: calc(100% - 10px);
    left: 10px;
    clip-path: polygon(35px 0%, 100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(15deg, #f37b6d 8%, transparent 8%),
    linear-gradient(25deg, #db413b 14%, transparent 14%),
    linear-gradient(40deg, #b70506 30%, transparent 30%),
      rgb(254, 54, 53);
    z-index: -100;
  }
  
  &:after {
    display: block;
    content: '';
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/p1hand.png');
  background-size: cover;
  height: 54px;
  width: 49px;
  position: absolute;
  top: 5%;
  left: 45%;
  }
}

.cpu-overlay {
  height: calc(100% + 1px);
  width: 60%;
  position: relative;
  top: -1px;
  left: 40%;
  clip-path: polygon(0px 0%, 100% 0%, 100% 100%, 0% 100%);
  background:
    linear-gradient(108deg, transparent 17%, rgba(0, 0, 0, .2) 17% 19%, #afafaf 19% 20%),
    ;
  background-repeat: no-repeat;
  z-index: 1000;
  &:before {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    width: calc(100% - 10px);
    left: 10px;
    clip-path: polygon(35px 0%, 100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(15deg, #afafaf 8%, transparent 8%),
    linear-gradient(25deg, #939393 14%, transparent 14%),
    linear-gradient(40deg, #676767 30%, transparent 30%),
      #a1a1a1;
    z-index: -100;
  }
}

.p1-hand {
  background-image: url('https://s3.amazonaws.com/petergarrow.com/images/p1hand.png');
  background-size: cover;
  height: 54px;
  width: 49px;
  position: absolute;
  top: 5%;
  left: 45%;
}

.p1-title {
  width: 50%;
  height: 1.5em;
  border: 1px solid black;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-40%);
  background: #fba0a1;
  display: grid;
  place-items: center;
  font-size: 80%
}

.random {
  width: 60%;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-40%);
  text-align: right;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  font-size: 110%;
}

.cpu-lvl {
  width: 50%;
  height: 1.5em;
  border: 1px solid black;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-40%);
  background: 
    linear-gradient(110deg, #212121 2px, black 2px 3px, #212121 3px 5px, black 5px 6px, #212121 6px 8px, black 8px 9px, #212121 9px 11px, black 11px 12px, #212121 12px 14px, black 14px 15px, #212121 15px 17px, black 17px 18px, #212121 18px 20px, black 20px 21px, #212121 21px 23px, black 23px 24px, #212121 24px 26px, black 26px 27px, #212121 27px 29px, black 29px 30px, #212121 30px 32px, black 32px 33px, #212121 33px 35px, black 35px 36px, #212121 36px 38px, black 38px 39px, #212121 39px 41px, black 41px 42px, #212121 42px 44px, black 44px 45px, #212121 45px 47px, black 47px 48px, #212121 48px 50px, black 50px 51px, #212121 51px 53px, black 53px 54px, #212121 54px 56px, black 56px 57px, #212121 57px 59px, black 59px 60px,  transparent 60px 100%),
    #a2a2a2;
  display: grid;
  place-items: center;
  font-size: 80%;
  display: flex;
  justify-content: space-between;
  padding: 0 .5em;
  
  & span {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  }
  
  & span:first-of-type {
    color: #acacac;
  }
  
  & span:last-of-type {
    color: #36f6e9;
  }
}

.label {
  width: 53%;
  height: 1.5rem;
  border: 1px solid black;
  border-bottom: 0px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-40%);
  font-size: 110%;
  color: #000;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 1px 0 #fff;
  text-align: right;
  padding: 0em 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  clip-path: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%),
    
    ;
  
  &.cpu-label {
    $diag-bg: #6a6a6a;
    $diag-bg-muted: #646464;
    background: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%), linear-gradient(110deg, $diag-bg 2px, $diag-bg-muted 2px 3px, $diag-bg 3px 5px, $diag-bg-muted 5px 6px, $diag-bg 6px 8px, $diag-bg-muted 8px 9px, $diag-bg 9px 11px, $diag-bg-muted 11px 12px, $diag-bg 12px 14px, $diag-bg-muted 14px 15px, $diag-bg 15px 17px, $diag-bg-muted 17px 18px, $diag-bg 18px 20px, $diag-bg-muted 20px 21px, $diag-bg 21px 23px, $diag-bg-muted 23px 24px, $diag-bg 24px 26px, $diag-bg-muted 26px 27px, $diag-bg 27px 29px, $diag-bg-muted 29px 30px, $diag-bg 30px 32px, $diag-bg-muted 32px 33px, $diag-bg 33px 35px, $diag-bg-muted 35px 36px, $diag-bg 36px 38px, $diag-bg-muted 38px 39px, $diag-bg 39px 41px, $diag-bg-muted 41px 42px, $diag-bg 42px 44px, $diag-bg-muted 44px 45px, $diag-bg 45px 47px, $diag-bg-muted 47px 48px, $diag-bg 48px 50px, $diag-bg-muted 50px 51px, $diag-bg 51px 53px, $diag-bg-muted 53px 54px, $diag-bg 54px 56px, $diag-bg-muted 56px 57px, $diag-bg 57px 59px, $diag-bg-muted 59px 60px,  transparent 60px 100%),;
  }
  
  &.p1-label {
    $diag-bg: #c31f1e;
    $diag-bg-muted: #ab0408;
    background: polygon(.5rem 0%, calc(100% - .5rem) 0%, 100% .5rem, 100% 100%, 0% 100%, 0% .5rem);
  background: linear-gradient(135deg, #000 .35rem, transparent .35rem),
    linear-gradient(45deg, transparent 94%, #000 94%), linear-gradient(110deg, $diag-bg 2px, $diag-bg-muted 2px 3px, $diag-bg 3px 5px, $diag-bg-muted 5px 6px, $diag-bg 6px 8px, $diag-bg-muted 8px 9px, $diag-bg 9px 11px, $diag-bg-muted 11px 12px, $diag-bg 12px 14px, $diag-bg-muted 14px 15px, $diag-bg 15px 17px, $diag-bg-muted 17px 18px, $diag-bg 18px 20px, $diag-bg-muted 20px 21px, $diag-bg 21px 23px, $diag-bg-muted 23px 24px, $diag-bg 24px 26px, $diag-bg-muted 26px 27px, $diag-bg 27px 29px, $diag-bg-muted 29px 30px, $diag-bg 30px 32px, $diag-bg-muted 32px 33px, $diag-bg 33px 35px, $diag-bg-muted 35px 36px, $diag-bg 36px 38px, $diag-bg-muted 38px 39px, $diag-bg 39px 41px, $diag-bg-muted 41px 42px, $diag-bg 42px 44px, $diag-bg-muted 44px 45px, $diag-bg 45px 47px, $diag-bg-muted 47px 48px, $diag-bg 48px 50px, $diag-bg-muted 50px 51px, $diag-bg 51px 53px, $diag-bg-muted 53px 54px, $diag-bg 54px 56px, $diag-bg-muted 56px 57px, $diag-bg 57px 59px, $diag-bg-muted 59px 60px,  transparent 60px 100%),;
  }
}

.plus-minus {
  background: 
    linear-gradient(30deg, transparent 75%, #000 75%),
    linear-gradient(-30deg, #000 14%, transparent 14%),
    linear-gradient(0deg, #575757 43%, #000 43% 47%, #d6d6d6 47%)
    #d6d6d6;
  width: calc(100% + .5rem);
  margin-left: -.5rem;
  height: 85%;
  place-self: end;
  border-right: 4px solid #000;
  border-left: 2px solid #000;
  clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);
  position: relative;
  
  &:before {
    content: '';
    display: block;
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/plus.png');
    position: absolute;
    height: 21px;
    width: 18px;
    top: 28px;
    left: 2px;
    background-size: cover;
  }
  
  &:after {
    content: '';
    display: block;
    background-image: url('https://s3.amazonaws.com/petergarrow.com/images/minus.png');
    position: absolute;
    height: 21px;
    width: 18px;
    top: 62px;
    left: 2px;
    background-size: cover;
  }
}

div.last-row {
  border: none;
  &:before {
    padding: 0;
    background: black;
  }
  &:after {
    display: block;
    content: '';
    background: black;
  }
  grid-column: 1 / 14;
  display: grid;
  grid-template-columns: 81.2px repeat(10, 1fr) 81.2px;
}
              
            
!

JS

              
                
              
            
!
999px

Console