body{
/* theme variables go here */
  --background: #b05478;
  --text: #420f1b;
  --font: Georgia, serif;
  --content: #c95f7b;
  --content-border: solid transparent;
  --head-and-foot: #bf829b;
  --head-border: #c993a9;
  --marquee: linear-gradient(to right, #788292, #b65b6c, #c39fa5, #b65b6c, #788292);
  --marquee-border: #dbb8c0;
  --link: #6b142d;
  --visited: #8f3161;
  --hover: #6e0926;
  --cursor: url("images/cursor.png"), auto;
  --pointer: url("images/pointer.png"), auto;
  --select-bg: #788292;
  --select: #c39fa5;
/* here is the actual stylesheets */
  background: var(--background);
  background-size: 12rem;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  cursor: var(--cursor);
}

#main {
  width: 50rem;
  margin: auto;
  align-content: flex-end;
}

.footer {
  height: 3rem;
  line-height: 50%;
   padding: 0.1rem;
   margin-top: 1rem;
  border: 0.25rem solid var(--head-border);
  background-color: var(--head-and-foot);
  text-align: center;
}

.oooh {
  padding: 0.5rem;
  border: 0.25rem solid var(--marquee-border);
  background: var(--marquee);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--visited);
}

a:hover {
  color: var(--hover);
  text-decoration: none;
  cursor: var(--pointer);
}
::selection {
  background: var(--select-bg);
  color: var(--select);
}

.box {
  padding: 0.5rem;
  border: 0.5rem solid var(--head-border);
  background-color: var(--head-and-foot);
}

.pages {
  padding: 0.5rem;
  background-color: var(--content);
  border: 0.25rem var(--content-border);
}

.links {
     list-style-type: none;
     margin: 0;
    padding: 0;
}

ul {
  list-style-type: none;
  line-height: 200%;
}

.a {
  display: inline;
  word-spacing: 5rem;
}

.content {
    padding: 0.5rem;
    margin-top: 1rem;
  background-color: var(--content);
  border: 0.25rem var(--content-border);
}

.side {
    padding: 0.5rem;
    margin-top: 1rem;
  background-color: var(--content);
  border: 0.25rem var(--content-border);
  width: 80%;
}

.maybebuttons {
  padding: 0.5rem;
  margin-top: 1rem;
  margin-left: 1rem;
  background-color: var(--content);
  border: 0.25rem var(--content-border);
  width: 20%;
  text-align: center;
}

.allofit {
  display: flex;
}

.art {
  max-height: 20rem;
  overflow: auto;
}

details:hover {
  cursor: var(--hover);
}

/*from rework. reformat later. */
.interact {
  display: flex;
}

.spinny {
  width: 50%;
}

.buttons {
  width: 50%;
}

.click {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

.click:hover {
  width: 60%;
}

#tricks {
  max-width: 90%;
  padding: 10px;
}

.wow {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* other themes,, */
.neon {
  --background: #000000;
  --text: #d60675;
  --font: "Comic Sans MS", sans-serif;
  --content: #000000;
  --content-border: dotted #d60675;
  --head-and-foot: #000000;
  --head-border: #d60675;
  --marquee: #000000;
  --marquee-border: #d60675;
  --link: #0099d3;
  --visited: #03688f;
  --hover: #0099d3;
  --cursor: auto;
  --pointer: auto;
  --select-bg: #0099d3;
  --select: #ffffff;
}

#Splatnet table {
  background-image: url("images/splatnet/OffTheHookPattern.jpg");
  background-size: 255px 270px;
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 50px;
  height: 75px;
}

#rightarrow{
height: 20px; /*< CHANGE ARROW HEIGHT!*/
width: 20px; /*< CHANGE ARROW WIDTH!*/
content: url("images/splatnet/TealRight.png");
}

#leftarrow{
height: 20px; /*< CHANGE ARROW HEIGHT!*/
width: 20px; /*< CHANGE ARROW WIDTH!*/
content: url("images/splatnet/TealLeft.png")
}

#chibi {
 height: 30px; /*< CHANGE HEIGHT!*/
 width: 30px; /*< CHANGE WIDTH!*/
content: url("images/splatnet/DeepCutSymbol.png")
}

#chara {
 height: 150px; /*< CHANGE HEIGHT!*/
 width: 180px; /*< CHANGE WIDTH!*/
content: url("images/splatnet/ChaosVsOrder.png")
}

#splatlogo {
 height: 30px; /*< CHANGE HEIGHT!*/
 width: 95px; /*< CHANGE WIDTH!*/
content: url("images/splatnet/splatnet.png")
}



/*BE CAREFUL EDITING THESE!*/
#Splatnet table tr td {
  padding: 13px; /* Creates some space between the links and text inside the widget */
}

#Splatnet {
  margin: 0 auto;
  padding: 10px; /* creates some space around the widget */
}

#Splatnet .webring-prev {
  text-align:right;
}

#Splatnet .webring-info {
   text-align:center;
}

#Splatnet .webring-links {
  font-size:small;
  color: white;
}

#Splatnet .webring-next {
  text-align:right;
}

#Splatnet .webring-prev {
  text-align:left;
}