[nospaces][googlefont="Roboto Condensed|Playfair Display|Material+Icons"][var name="background" value="#fff"][var name="orange" value="#fbd0c8"][var name="middle" value="#fdd1e2"][var name="pink" value="#ffd1ff"][var name="border" value="#222"][var name="bug" value="#aabb22"][var name="electric" value="#fbcc33"][var name="dark" value="#775544"][var name="dragon" value="#7766ee"][var name="electric" value="#fbcc33"][var name="fairy" value="#ee99ee"][var name="fighting" value="#bb5544"][var name="fire" value="#ed462f"][var name="flying" value="#8999fc"][var name="ghost" value="#6666bb"][var name="grass" value="#77cc55"][var name="ground" value="#ddbb55"][var name="ice" value="#66ccfc"][var name="normal" value="#aaaa99"][var name="poison" value="#aa5599"][var name="psychic" value="#ec5098"][var name="rock" value="#bbaa66"][var name="steel" value="#aaaabb"][var name="water" value="#3499fb"]

[newclass=".tricolor"] max-width: 100%; width: 400px; height: 300px; color: #000; background: linear-gradient(-45deg, [var="pink"], [var="pink"] 0%, [var="orange"] 100%, [var="orange"]); border: 10px [var="background"] solid; box-shadow: 0 0 5px [var="border"]; margin: 30px auto; padding: 20px; cursor: default; } .tricolor .container { width: 100%; height: 100%; background: [var="background"]; color: #000; text-align: center; display: flex; flex-direction: column; } .tricolor .container h1 { font: 20px 'Roboto Condensed'; text-transform: uppercase; display: inline-block; height: 27px; border-bottom: 3px [var="middle"] solid; margin: 10px auto 5px auto; padding: 0 4px; } .tricolor .container h2 { font: 11px 'Playfair Display'; font-style: italic; display: block; } .tricolor .container h2 b { font: inherit; font-style: normal; font-weight: bold; } .tricolor .container .moveset { height: 180px; display: flex; flex-direction: column; flex-wrap: wrap; } .tricolor .container .moveset div { font: 9px 'Roboto Condensed'; text-align: left; text-transform: uppercase; width: 110px; display: block; transform: translate(-30px, 20px); margin: 0 0 15px 0; } .tricolor .container .moveset div h3 { font: 10px 'Roboto Condensed'; font-weight: normal; text-transform: uppercase; border-left: 2px [var="middle"] solid; display: block; padding: 0 0 0 5px; margin: 0 0 3px 0; transition: all .3s ease-in-out; } .tricolor .container .moveset div:hover h3 { padding: 0 0 0 10px; letter-spacing: 1px; } .tricolor .container .moveset div span { line-height: 9px; } .tricolor .container .moveset .status::before, .tricolor .container .moveset .physical::before, .tricolor .container .moveset .special::before { background-size: 20px 10px; display: inline-block; width: 20px; height: 10px; content: ''; margin: 0 3px 0 0; } .tricolor .container .moveset .status::before { background-image: url('https://img.pokemondb.net/images/icons/status.png'); } .tricolor .container .moveset .physical::before { background-image: url('https://img.pokemondb.net/images/icons/physical.png'); } .tricolor .container .moveset .special::before { background-image: url('https://img.pokemondb.net/images/icons/special.png'); [/newclass]

[newclass=".tricolor .moves"] } .tricolor .electric-m { background: [var="electric"]; } .tricolor .fairy-m { background: [var="fairy"]; } .tricolor .ghost-m { background: [var="ghost"]; } .tricolor .normal-m { background: [var="normal"]; } .tricolor .psychic-m { background: [var="psychic"]; } .tricolor .rock-m {background: [var="rock"]; } .tricolor .steel-m {background: [var="steel"]; } .tricolor .normal-m, .tricolor .electric-m, .tricolor .fairy-m, .tricolor .ghost-m, .tricolor .psychic-m, .tricolor .rock-m, .tricolor .steel-m { color: [var="background"]; display: inline-block; padding: 1px 2px 0 2px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.2); text-shadow: 1px 1px 1px 2px rgba(0,0,0,0.7); margin: 0px; transform: translate(0, -2px); } .tricolor .container .info { display: flex; flex-direction: row; align-items: center; } .tricolor .container .info img { display: block; width: 200px; height: 200px; transform: translate(-50px, 20px); [/newclass]

[newclass=".tricolor"] color: inherit; } .tricolor .PT_table .PT_spots { background: none; } .tricolor .PT_Tabs_holder tr { height: 20px; display: flex; justify-content: center; align-items: flex-end; } .tricolor .PT_Tabs_holder tr td { width: 2px; height: 2px; border-radius: 50%; font-size: 0; margin: 0 2px; } .tricolor .PT_tabs { color: #ccc; background: #ccc; } .tricolor .PT_tabs.PT_tabs_selected, .tricolor .PT_tabs_selected, .tricolor .PT_tabs_hover, .tricolor .PT_tabs_selected_hover { color: [var="middle"]; background: [var="middle"]; } #icecream { width: 460px; margin: -15px auto 15px auto; display: grid; grid-template-columns: repeat(8, 48px); grid-template-rows: repeat(3, auto); grid-gap: 10px; grid-auto-flow: row; justify-content: space-between; } #icecream div { background: linear-gradient(160deg, [var="pink"] 0%, [var="orange"] 55%, [var="background"] 0%, [var="background"]); width: 40px; height: 40px; border: 4px [var="background"] solid; border-radius: 3px; box-shadow: 0 0 5px [var="border"]; overflow: hidden; cursor: default; } #icecream span { display: block; font: 14px 'Material Icons'; color: [var="background"]; letter-spacing: -2px; transform: translate(-3px, -1px) rotate(-12deg); height: 9px; } #icecream div.rip { filter: grayscale(1); } .tricolor #spotlight, .tricolor #spotlight a { font: 20px 'Roboto Condensed'; background: linear-gradient(-45deg, [var="pink"], [var="pink"] 0%, [var="orange"] 100%, [var="orange"]); background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: translate(0, -20px) rotate(-5deg); text-align: right; transparency: .5; [/newclass]