<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 & 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>$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;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.