vent inspired pokefarm q about me template

[sc=body][sc=banner][/sc][sc=credit][url="https://www.google.com/search?client=firefox-b-1-d&q=color+picker"]icon[/url][/sc][sc=avatar][/sc][sc=displayname]Possideo[/sc][sc=emote]POGGERS[/sc]
[sc=bio]test test test
test test test[/sc]
[table][tr]
[th]VENTS[/th]
 [th]LISTENERS[/th]
 [th]LISTENING[/th]
[/tr]
[/table]
[sc=tabbed_interface horizontal][ul][
][li]one[/li][
][li]tab two[/li][
][li]three[/li][
][/ul][
][sc=tab tab-active][sc=ventywenty][sc=avatar][/sc][sc=ventytext][b]Possideo[/b] is[/sc][sc=emote]POGGERS[/sc][/sc]hey! thanks for using this. this is relatively unfinished, since i only intended it for my use (and i dont use everything available), so if you really wanna use this then you're welcome to contact me and i can try to work something out. the code is extremely messy right now, so while i'd love to say "please don't steal" it's more like "steal at your own risk" also because this is kinda cobbled together from CSS tutorials
[type=grass][pkmn=Morelull]
[hide=woah a hide!]text text text text
[/hide][hide=a hide with table][table]
[tr][th]Header 1[/th]
 [th]Header 2[/th][/tr]
[tr][td][pkmn=Cleffa][pkmn=Clefairy][/td][td]91[/td]
[/tr]
[tr][td][pkmn=Klefki][/td][td]3[/td]
[/tr]
[/table][/hide]
[url=https://twitter.com/aspdfigaro]its a link!!![/url]
[progress=4/10]a pog-gress bar[/progress]
[/sc][
][sc=tab][sc=ventywenty][sc=avatar][/sc][sc=ventytext][b]Possideo[/b] is[/sc][sc=emote]POGGERS[/sc][/sc][table][tr][th]Header 1[/th]
 [th]Header 2[/th][/tr]
[tr][td][pkmn=Cleffa][pkmn=Clefairy][/td][td]91[/td]
[/tr]
[tr][td][pkmn=Klefki][/td][td]3[/td]
[/tr][/table][/sc][
][sc=tab][sc=ventywenty][sc=avatar][/sc][sc=ventytext][b]Possideo[/b] is[/sc][sc=emote]POGGERS[/sc][/sc]text[/sc][
][/sc]
[sc=credit bottom][url="https://pokefarm.com/user/Possideo"]code[/url][/sc]
[/sc]

[style]

@emote: #7e6cb8;
//controls the theme color

@icon: "https://cdn.discordapp.com/attachments/697818315766104105/935676650073505823/unknown.png";
// ya

@color1: white;
// controls the bg and icon border, its only called color1 because im stupid and thought id have more colors that werent specifically named and im not cleaning it up

@text: black;
// self explanatory

@border: #bfbfbf;
// self explanatory

@border2: #e3e3e3;
// color of unhighlighted tabs and stuff

@links: #538be6;
// self explanatory

img {
    width: 100%;
    height: 100%;
}

.avatar {
    border: 4px solid @color1;
    width: 1%;
    height: 1%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -12%;
    padding:10%;
    background-image: url(@icon);
    background-size: 100%;
    }

.banner {
    height:12%;
    background-color: @emote;
    padding:10%;
    margin-bottom:5px;
    }

.body {
    width: 100%;
    font-family: "Avante Garde";
    background-color: @color1;
    color:@text;
    padding-bottom:3px;
    text-align: center;
	line-height: 1.4;
        img {
        width:auto;
        height:auto;
        display:inline-blok;
        }
    }

.credit {
    display: inline;
    float: right;
    text-align: right;
    font-size:12px;
    font-family:"Arial";
    padding:0.5%;
    margin-right:1.5%;
        a {
        text-decoration: underline solid @text;
        }
    &.bottom {

    }
    }

.displayname {
    color:@text;
    font-family: "Arial Black";
    padding: 1%;
    padding-bottom:2%;
    font-size: 14px;
    }

.emote {
    width:25%;
    background-color:@emote;
    color: white;
    font-size:12px;
    font-family:"Arial";
    margin-left:auto;
    margin-right:auto;
    padding:1.5%;
    display:inline;
    }

    .expbar {
        background-color:@border2;
        border: 2px solid @border;
        color: @text;
        font-weight: 900;
        font-family:"Arial";
        &>span {
            }

        &>div {
        background-color:@emote;
            }
    }

.bio {
    color:@text;
    font-family:"Arial";
    margin-top:5%;
}

.panel {
    background-color:@color1;
    font-family:"Arial";
    font-size:14px;
    color:@text;
    border: 2px solid @border;
    border-collapse: collapse;
    box-shadow:0 0 0 transparent;
	padding:2%;
        img {
        width:auto;
        height:auto;
        }
        table {
        border: 1px solid @border;
        }
            td {
            border: 1px solid @border;
            vertical-align: middle;
            }
        h3 {
        background-color:@color1;
        color:@text;
        }

            a {
            color:@text;
            text-decoration:none;
            }
        div {
        font-family:"Arial";
        font-size:14px;
        color:@text;
        padding:2.5%;
        }
}

.tabbox {
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: none;
    border-radius: 0;
}

.tabbed_interface {
    border: hidden;
    border-radius: 0;
    color: @text;
    background-color:@color1;
    > img {
        width: 65%;
    }
    > ul {
    border-top: 7px solid @border2;
    margin:0.5%;
    background-color:@color1;
            > li {
        background-color: @border2;
        border: hidden;
        height:10%;
        margin:0.3%;
        text-align: center;
        color: @text;
        font-family:"Arial";
        font-size:14px;
        padding: 3%;
        border-bottom: 5px solid @border;
            &.tab-active {
                color: @emote;
                border-bottom: 5px solid @emote;
                background-color:@color1;
            }
        }
    li:hover {
            background-color: #F6F8FA;
            color: @emote;
            }
    }
    > div {
    background-color: @color1;
    color:@text;
    font-family:"Arial";
    font-size:14px;
    text-align:left;
    padding:3%;
    border:none;
    box-shadow: 0 0 0 transparent;
    }
}

.ventywenty {
    text-align: left;
    color: @text;
    padding-top:3%;
    padding-bottom:9%;
    padding-left:3%;
    > .ventytext {
        padding:3%;
        display:inline;
        text-align:left;
        font-family:"Arial";
    }
    > .emote {
        text-align: center;
        font-weight: bold;
        padding:1.5%;
        display:inline;
        font-family:"Arial";
        font-size:12px;
        }
    > .avatar {
        background-size:100%;
        border: hidden;
        width:1%;
        height:1%;
        padding:6%;
        margin-left:-3%;
        margin-top:-3%;
        float:left;
    }



}

a {
    color:@links;
    font-weight: bold italic;
    text-decoration: underline wavy @emote;
    }

table {
    margin: auto;
    font-family: "Arial";
    font-size:12px;
    text-align:center;
    width:100%;
    table-layout: fixed;
    height:6%;
    border: hidden;
    padding:5px;
}

th {
    background-color:@color1;
    vertical-align: middle;
    border: 2px solid #bfbfbf;
}

td {
    border: 2px solid @border;
    }

th:firstchild {
    border-left:1px solid @text;
}


[/style]