body{
/* theme variables go here */
  --background: url("images/checkers.png");
  --text:  #051d31;
  --font: 'Ms Ui Gothic', 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: #051d31;;
  --visited:  #273b4b;
  --hover: #0099d3;
  --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 {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

body::before {
     content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.015) 10%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;

}

#title {
 width: 45%;
}

#chars1 {
  padding: 10px;
}

.footer {
  max-width: 45%;
  padding: 5px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

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

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

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

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

.box {
  padding: 0.5rem;

}

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

ul {
  list-style: 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;
  
}

.yeah {
  background: url("images/woah2.jpg");
  background-size: 25rem;
  border: dotted 5px rgba(185, 52, 97, 0.61);
  margin-top: 10px;
  min-width: 50rem;
}

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

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

.boy{
  padding: 10px;
}

/*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: 205px;
}

.click2:hover {
  width: 103%;
}

.homeclick:hover {
  width: 95%;
}

#tricks {
  max-width: 360px;
  padding: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wow {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  margin-top: 5px;
}

#title {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#boy{
  height: 325px;
  position: absolute;
  z-index: 4;
}

#buttons {
  max-height: 150px;
  width: 400px;
  overflow: auto;
  position: absolute;
  background: url("images/gaystarsbetter.png");
  background-size: 130px;
  border: solid 5px rgba(185, 52, 97, 0.61);
  left: 641px;
  top: 335px;
  z-index: 7;
}

.yay {
  background-color: #ae536c;
}

.badges {
  max-height: 525px;
  width: 200px;
  min-width: 200px;
  background: url("images/lightstars.jpg");
  background-size: 20rem;
  color: #d8a2c3;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 2px;
  overflow: auto;
  border: solid 5px rgba(185, 52, 97, 0.29);
  scrollbar-width: thin;
   scrollbar-color: rgba(222, 71, 129, 0.61) rgba(185, 52, 97, 0.29);
}

.how {
  background: url(images/bluestar.jpg);
  background-size: 60rem;
  max-height: 255px;
  margin-top: 15px;
  min-width: 285px;
  margin-left: 15px;
  margin-right: 10px;
  border: solid 5px rgba(185, 52, 97, 0.29);
  padding: 2px;
  overflow: auto;
  color: #051d31;
  scrollbar-width: thin;
   scrollbar-color: rgba(74, 94, 164, 0.53) rgba(185, 52, 97, 0.29);
}

#disclaim {
  font-size: 4%;
  line-height: 10%;
}

.hi {
  display: flex;
  min-width: 285px;
   scrollbar-width: thin;
  scrollbar-color: #c39fa5 #788292;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

#lilith {
  margin-left: 10px;
}

#between {
  width: 60%;
  max-height: 250px;
  overflow: auto
}

#about {
  text-align: center;
}

.notepad {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

.write {
  position: absolute;
  width: 325px;
  margin-left: 44px;
  margin-top: 110px;
  font-size: 25px;
  line-height: 2.2;
  display: block;
}

#okay {
  position: absolute;
  left: 15%;
  margin-top: 471px;
  width: 200px;
}

#okay:hover {
  width: 27%;
  cursor: var(--pointer);
}

.rings {
  max-width: 45%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #E97BC2;
  text-align: center;
  font-size: larger;
  position: relative;
}

#chat {
  width: 100%;
}

#ringtext {
  position: absolute;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 29%;
  bottom: -62%;
}

.lol {
  width: 195px;
  max-height: 129px;
  overflow: auto;
  background: url(images/arcadebg.png);
  position: absolute;
  margin-left: 244px;
  margin-top: -248px;
  padding: 2px
}

.hitrix {
  float: right;
}

.blogposts {
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
  margin-top: 25px;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.options {
  position: absolute;
  top: 25%;
  background: linear-gradient(#a2ccee, #a2ccee, #d0e7fb);
  background-size: 15rem;
  max-width: 15%;
  padding: 2px;
  border:  solid, #a2ccee;
  border-radius: 10px;
  max-height: 300px;
  overflow: auto;
   scrollbar-width: thin;
  scrollbar-color: #c39fa5 #788292;
}

.construct {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  display: block;
}

#okay2 {
  position: static;
}

#okay2:hover {
  width: 19%;
  cursor: var(--pointer);
}

.contain {
  display: block;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.ds {
    margin-left: auto;
  margin-right: auto;
  display: block;
  width: 45%;
}

.hello {
  background: linear-gradient(#cecece, #cecece, #d1a4ad);
  border: solid, #cecece;
  padding: 2px;
  display: flex;
  max-width: 45%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

#welcome {
  max-width: 45%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

#info {
  margin-left: auto;
  margin-right: auto;
}

#hrm {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 26%;
  left: 12%;
  width: 80%;
  max-height: 122px;
  overflow: auto;
   scrollbar-width: thin;
  scrollbar-color: #f7b0de #E97BC2;
}

.more {
   display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 45%;
}

.pages {
  margin-right: 10%;
  text-align: center;
  background: linear-gradient(#a2ccee, #a2ccee, #d0e7fb);
  border: solid, #a2ccee;
  border-radius: 10px;
  margin-bottom: 10px;
}

.heh {
  width: 60%;
}

.log {
  background: linear-gradient(#d1a4ad, #d1a4ad, #f0cdd4);
  margin-right: 10%;
  text-align: center;
  border: solid, #d1a4ad;
  border-radius: 10px;
  height: 160px;
  max-height: 160px;
  overflow: auto;
   scrollbar-width: thin;
  scrollbar-color: #f7b0de #E97BC2;
}

.recents {
  text-align: center;
  border-radius: 10px;
  width: 45%;
  background: linear-gradient(#cacaca, #cacaca, #e2e2e2);
  border: solid, #cacaca;
}


.page:link, .page:visited {
  background-color: #7ab5e4;
  color: white;
  width: 60%;
  padding: 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: solid;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #333333;
  border-right-color: #333333;
}

.page:hover, .page:active {
  background-color: #61a5dc;
  border: solid;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #333333;
  border-right-color: #333333;
}

.yt {
  display: flex;
}

.text2 {
  width: 40%;
  height: 50%;
}

.status {
  border: solid, #051d31;
  border-radius: 25px;
  margin-left: 25px;
  margin-right: 25px;
}

.buttons {
  max-width: 45%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.friends {
  width: 45%;
  background: linear-gradient(#cecece, #cecece, #d1a4ad);
  border: solid, #cecece;
  border-radius: 10px;
  padding: 5px;
  margin-right: 10%;
  text-align: center;
  max-height: 300px;
  overflow: auto;
   scrollbar-width: medium;
  scrollbar-color: #cecece #d1a4ad;
}

.interests {
  background: url(images/arcadebg.png);
  color: #ffffff;
  padding: 3px;
  border: solid, rgba(82, 82, 82, 0.5);
  border-radius: 10px;
  width: 100%;
  text-align: center;
  max-height: 300px;
  overflow: auto;
   scrollbar-width: medium;
  scrollbar-color: rgba(148, 148, 148, 0.36) rgba(82, 82, 82, 0.5);
}

.menu {
  display: flex;
}

.home {
  max-width: 20%;
}

.here {
  width: 15%;
}

.cartridges {
  max-width: 45%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cart {
  background: none;
  border: none;
  margin: 30px;
}

.bro {
  width: 150px;
}

.cart:hover {
  transform: rotate(5deg);
  cursor: url("images/pointer.png"), auto;
}

.yippee {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 45%;
  
}

.wait {
  max-width: 45%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
}

#meow {
  height: 50px;
  width: 150px;
  font-family: 'Ms Ui Gothic', serif;
  font-size: large;
  background: none;
  border-radius: 10px;
  margin: 10px;
}

/* art display elements */
#digital {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
  text-align: center;
}

#trad {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
   text-align: center;
}

#oc {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
   text-align: center;
}

#three {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
   text-align: center;
}

#anim {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
   text-align: center;
}

#photo {
  display: none;
  background-color: rgba(211, 211, 211, 0.8);
  border-radius: 5px;
   text-align: center;
}

/* 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;
}

@media only screen and (max-width: 600px) {
  #main {max-width: 100%;}
  #title {width: 100%;}
  .hello {max-width: 100%; display: block;}
  #welcome {max-width: 100%;}
  .rings {max-width: 100%; font-size: medium;}
  .more {max-width: 100%; display: block;}
  .pages {width: 100%; margin-right: 0; margin-bottom: 15px;}
  .heh {width: 100%;}
  .log {margin-right: 0; margin-bottom: 15px;}
  .recents {width: 100%;}
  .page:link, .page:visited {margin-top: 0%; margin-bottom: 0%;}
  .buttons {max-width: 100%; width: 100%; display: block;}
  .friends {max-width: 100%; width: 100%; margin-right: 0; padding: 0; margin-bottom: 5%;}
  .interests {padding: 0;}
  .footer {max-width: 100%;}
  .ds {width: 100%;}
  .options {position: static; display: block; margin-left: auto; margin-right: auto; max-width: 90%;}
  .blogposts {max-width: 95%}
  .home {max-width: 40%;}
  .here {width: 40%;}
  .cartridges {max-width: 100%}
  .cart {margin: 10px;}
  .bro {width: 135px;}
  .yippee {max-width: 100%;}
  .wait {max-width: 100%;}
}