Barebones Profile Template

This is just what I cooked up while messing around with my theme for a bit. WIP

<style>

@import url("https://fonts.googleapis.com/css2?family=");

:root {

  --nav-background-color: ;

  --nav-background-img: ;

  --nav-links-background-color: ;

  --footer-background-color: var(--nav-background-color);

  --footer-background-img: ;

  --footer-color: ;

  --footer-link-color: ;

  --main-profile-background-color: ;

  --main-profile-background-img: url("");

  --main-background-color: ;

  --main-background-img: url("");

  --scroll-track-background: ;

  --scrollbar-color: ;

  --scrollbar-border-color: 2px solid white;

  --scrollbar-hov-color: ;

  --border: 3px solid ;

  --title-background-color: ;

  --title-color: ;

  --title-font: "", serif;

  --white-online-ico: hue-rotate(-75deg) sepia(1) saturate(0) brightness(0) invert(1);

  --black-online-ico: hue-rotate(-75deg) sepia(1) saturate(0) brightness(0);

  --heading-background-color: ;

  --heading-color: ;

  --heading-font: "", serif;

  --subheading-background-color: ;

  --subheading-color: ;

  --subheading-font: "", sans-serif;

  --normal-cursor: url(".ani"), url(".gif"), auto;

  --normal-background-color: ;

  --normal-heading-color: ;

  --normal-color: ;

  --normal-font: "", sans-serif;

  --link-cursor: url(".ani"), url(".gif"), auto;

  --link-color: ;

  --link-hov-color: ;

  --link-td: none;

/*--link-td: underline;*/

  --edit-link-background: ;

}

nav .top {

  background-color: var(--nav-background-color);

  background-image: var(--nav-background-img);

}

nav .links {

  background-color: var(--nav-links-background-color);

}

body {

  background-color: var(--main-background-color);

  background-image: var(--main-background-img);

  cursor: var(--normal-cursor);

}

footer {

  background-color: var(--footer-background-color);

  background-image: var(--footer-background-img);

}

footer p {

  color: var(--footer-color);

}

footer a {

  color: var(--footer-link-color);

}

/*scrollbar*/

body::-webkit-scrollbar {

  width: 10px;

}

/*background*/

body::-webkit-scrollbar-track {

  background: var(--scroll-track-background);

}

/*scroller*/

body::-webkit-scrollbar-thumb {

  background-color: var(--scrollbar-color);

  border: var(--scrollbar-border-color);

}

body::-webkit-scrollbar-thumb:hover {

  background-color: var(--scrollbar-hov-color);

}

main {

  background-color: var(--main-profile-background-color);

  background-image: var(--main-profile-background-img);

}

/*name / title*/

span[itemprop="name"] h1 {

  background: var(--title-background-color);

  color: var(--title-color);

  font-family: var(--title-font);

  text-align: center;

}

.online {

  color: var(--title-color);

}

.online img {

  filter: var(--white-online-ico);

}

/*name, edit your profile*/

h1, h2, h3, h5 {

  font-family: var(--heading-font);

  color: var(--heading-color);

}

/*Latest Blog Entries (title), Blurbs (title), About me: (title), Contacting (title), Who I'd like to meet: (title), Friend Space (title), Interests (title), Links (title)*/

h4,

.blog-preview h4,

.profile .blurbs .heading,

.profile .friends .heading {

  font-family: var(--heading-font);

  color: var(--heading-color);

}

/*start left*/

span[itemprop="name"] h1,

.details,

.mood,

.profile .contact,

.profile .url-info,

.profile .table-section,

.setting-section,

.home-actions,

/*start right*/

.profile-info,

.blog-preview h4,

.profile .blurbs .heading,

.profile .friends .heading {

  border: var(--border);

}

/*start left*/

.profile .contact .heading,

.profile .table-section .heading,

.setting-section .heading,

.home-actions .heading,

/*start right*/

.profile-info,

.blog-preview h4,

.profile .blurbs .heading,

.profile .friends .heading {

  background: var(--heading-background-color);

}

/*details, mood, contact, SpaceHey URL, Interests & Links titles*/

.details,

.mood,

div.contact,

div.url-info,

.details-table td:first-child {

  background: var(--subheading-background-color);

}

/*Interests & Links titles*/

.details-table td:first-child p {

  color: var(--subheading-color);

}

/*Interests & Links details*/

.details-table td {

  background: var(--normal-background-color);

}

.details-table td p {

  color: var(--normal-color);

}

.blog-preview p,

.friends .inner p,

.profile .friends .person p {

  color: var(--subheading-color);

}

.blog-preview p,

.profile .blurbs .section h4,

.profile .friends .person p,

#comments b {

  background: var(--subheading-background-color);

  text-align: center;

}

/*Comments*/

.comments-table td:first-child, .music-table td:first-child {

   background: var(--subheading-background-color);

}

.comments-table td, .music-table td {

  background: var(--normal-background-color);

}

.comments-table b {

  background: none !important;

}

.comment-replies {

  border: var(--border);

}

.comments-table {

  border: var(--border);

}

/*Blurbs*/

.section {

  background: var(--normal-background-color);

  text-align: center;

}

.profile .blurbs .section h4,

.count {

  color: var(--normal-heading-color);

}

p {

  font-family: var(--normal-font);

  color: var(--normal-color);

}

a {

  color: var(--link-color);

}

a:hover {

  cursor: var(--link-cursor);

  color: var(--link-hov-color) !important;

  text-decoration: var(--link-td) !important;

}

.edit-link a,

#comments b a {

  background: var(--edit-link-background);

}

</style>