about me template

[sc=tabbed_interface horizontal]
[ul]
[li]TAB ONE[/li]
[li]TAB 2[/li]
[li]CREDITS[/li]
[/ul][
][sc=tab-active]TEXT ONE
(PUT PKMN PANEL HERE)
[style]
@pkmn-panel-bg: #000000;
@pkmn-border-color: #7C118C;
@pkmn-text-color: #ffffff;
@pkmn-link-color: #ffffff;
@pkmn-platform-color: #000000;
@pkmn-platform-edge: #7C118C;
@pkmn-berry-color: #7C118C;
@pkmn-xp-done: #000000;
@pkmn-xp-remining: #7C118C;
@pkmn-xp-text: #ffffff;
@pkmn-xp-border: #7C118C;

.party {
  display: inline-block;
  margin: 10px;
  width: unset !important;
  color: @pkmn-text-color;

  a {
    color: @pkmn-link-color;
  }

  >div {
    background: @pkmn-panel-bg;
    border-color: @pkmn-border-color;
    box-shadow: none;
    width: 250px;
    margin: 0;
    overflow: hidden;

    &:hover>.action a[data-berry]:after {
      color: @pkmn-border-color;
    }

    >.pkmn:before {
      background-color: @pkmn-platform-color;
      border-color: @pkmn-platform-edge;
    }

    >.name a {
      margin-bottom: 5px;
      max-width: 140px;
    }

    >.expbar {
      width: 140px;
      height: 24px;
      margin-top: 2px;
      background-color: @pkmn-xp-remining;
      border-color: @pkmn-xp-border;
      color: @pkmn-xp-text;

      >div {
        border-color: @pkmn-xp-border;
        background-color: @pkmn-xp-done;
      }
    }

    >.extra {
      >.happy {
        display: none;
      }

      >.nature {
        width: 165px;
        margin-left: 5px;
      }
    }

    >.action {
      width: 140px;
      height: 30px;

      >.berrybuttons {
        >a {
          background-color: @pkmn-berry-color;
          display: none;
          width: 100%;
          height: 30px;
          padding: 3px;
          box-sizing: border-box;

          >img {
            height: 25px;
            vertical-align: top;
          }
        }
      }

      >.berrybuttons[data-up="any"]>a[data-berry="aspear"] {
        display: inline-block;
        border-radius: 20px;
      }
      >.berrybuttons[data-up="sour"]>a[data-berry="aspear"] {
        display: inline-block;
      }
      >.berrybuttons[data-up="spicy"]>a[data-berry="cheri"] {
        display: inline-block;
      }
      >.berrybuttons[data-up="dry"]>a[data-berry="chesto"] {
        display: inline-block;
      }
      >.berrybuttons[data-up="sweet"]>a[data-berry="pecha"] {
        display: inline-block;
      }
      >.berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
        display: inline-block;
      }
    }
  }
}
[/style]
 [sc=arrow][img]https://i.imgur.com/QeV5Hzt.gif[/img][/sc][/sc][

][sc=tab]TEXT TWO[sc=arrow][img]https://i.imgur.com/QeV5Hzt.gif[/img][/sc][/sc][

][sc=tab][h3][pkmn=meowscarada]CREDITS[pkmn=meowscarada][/h3]
[ul]
 [li][url=https://pokefarm.com/forum/post/6000778]compact pkmn panel code[/url][/li]
 [li]theme is based on the game Milk inside a bag of milk inside a bag of milk[/li]
 [li][url=https://pastebin.com/PJDeeFqL]theme code[/url] by [url=https://pfq.link/@J2Lj]me0wscarada[/url][/li]
[/ul][sc=arrow][img]https://i.imgur.com/QeV5Hzt.gif[/img][/sc]
[/sc][/sc]

[style]
@m1 = #7C118C;
@m2 = #5C0220;
@base = #000000;
  font-family: 'Courier New', monospace;
.tabbed_interface
{
    background: @base;
    & > ul
    {
        background: @base;
        & > li
        {
            background: @base;
            border: 3px solid @m1;
            padding: 1%;
            border: 3px solid @m2;
            color: #ffffff;
            &.tab-active
            {
                background: @base;
            }
        }
        & > li:hover
        {
            cursor: pointer;
            border: 3px solid @m1;
            color: #ffffff;
        }
    }
    > .tab, > .tab-active
    {
        background: @base;
        color: #ffffff;
        padding: 1%;
        border: 3px solid @m1;
        border-bottom: none;
    }
.arrow
{
    float: right;
    }
}[/style]