a css blog: the thirst... HOW TO: make an interests table

hey all, Aydo here. Ever wonder how I managed to make a table in my About Me?

here is how i did it.. and how you can too..

This next part goes inside your bio. Make sure to change the Interests and Username lol.

- ## [username]'s Interests {.infoTable}
- .
    - General
    - [Your general interests]
- .
    - Music
    - [Your musical interests]
- .
    - Movies
    - [Your cinematic interests]
- .
    - Television
    - [Your teleportation-visual interests]
- .
    - Games
    - [Your gaming! interests] 
- .
    - Books
    - [Your analogue interests]
- .
    - Heroes
    - [Your heroic interests], and least of all awtch is my hero 

feel free to add more interests if yhou wnat

the next part you need to put into the top of your css. if you already have a :root element, make sure to put the variables into it.
you can change the colors and backgrounds by changing the values in the appropriate root variables.

:root {
    --tableBackground: #ebd7eb;
    --tableBackgroundPosition: 0px, 0px;
    --tableFont: code ;
    --tableBorder: 2px solid black ;
    --tableHeaderBackground: #000000;
    --tableHeaderColor: #c200ff;
    --tableColor: black;
    --tableTextShadow: none;
}

ul:has(.infoTable) {
    padding: 0px !important;
    background: var(--tableBackground) !important;
    text-shadow: var(--tableTextShadow);
    color: var(--tableColor);
    background-size: cover !important;
    background-position:  var(--tableBackgroundPosition) !important;
    font-family: var(--tableFont);
    border: var(--tableBorder) !important;
    display: table;
    margin: auto;
    margin-top: 11px;
}

ul:has(.infoTable) li ul:is(li:nth-of-type(odd)) {
    float: left;
}

ul:has(.infoTable) li ul:is(li:nth-of-type(even)) {
    float: right;
}

ul li ul {
    background: transparent !important;
    border: 0px !important;
    marker: none;
    font-size: 16px !important;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
}

.infoTable ::marker {
    display: none !important;
    font-size: 0px;
}

h2.infoTable {
    background: var(--tableHeaderBackground);
    margin: 0;
    text-shadow: none;
    color: var(--tableHeaderColor) !important;
    font-size: 18px;
    padding: 5px;
    padding-left: 5px;
}

ul li, ul {
    font-size: 0px !important;
}

ul li ul li {
    font-size: 15px !important;
}

ul:has(img[src="https://i.imgur.com/HGACcXU.gif"]) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: space-around;
    background: transparent !important;
    border: 0px !important;
    padding: 0px;
}

ul li {
    display: table-row-group;
    border-color: inherit;
    vertical-align: middle;
    color: var(--tableColor);
}

ul li ul li:nth-of-type(odd) {
    text-align: left;
    display: table-cell;
    width: 18.3%;
    height: 61px;
}

ul li ul li:nth-of-type(even) {
    text-align: right;
    display: table-cell;
}

ul li il {
    display: table-row;
}

ul li ul {
    vertical-align: inherit;
    border-color: inherit;
    display: table-row;
    /* width: 100% !important; */
}

ul li:has(.infoTable) {
    display: table-caption;
}