:root{
    --transparent: #00000000;
    --black: #000;
    --white: #fff;
    --pastelyellow: #FFFFE6;
    --blue: #5fc3ff;
    --red: #E8315D;
    --darkblue: #16124A;
    --plum: #43124A;
    --pastelpurple: #EDF;
    --darkred: #861344;
    --midnightblue: #191970;
    --yellow: #ffde90;
}

html,
body {
    background: url("../img/home/dither2.png");
      background-size: cover;
      background-position: center;
    color: var(--pastelyellow);
}

a {
    color: var(--yellow);
}
  
a:hover {
    color: var(--red);
}

.footer a{
    color: var(--white);
}

#navigation{
    color: var(--white);
}

#navigation:hover {
    color: var(--white);
}

.hovertext {
  color: var(--yellow);
}

.unavailable {
  color: var(--white);
}

hr {
    color: var(--blue);
}

h1 {
  background-color: var(--darkred);
  color: white;
}

h2 {
  color: var(--pastelpurple);
  background: var(--plum);
}

h3 {
  color: var(--pastelpurple);
}

h4 {
  color: var(--pastelpurple);
}

mark{
  color: var(--pastelpurple);
  background: var(--plum);
}

form select{
    color: var(--pastelpurple);
    background: var(--plum);
    border: 1px solid var(--transparent);
}

textarea{
  color: var(--white);
  background: var(--black);
}

::selection {
  background-color: var(--magenta);
  color: var(--black);
}

/* Data-title */
.hovertitle[data-title]:hover:after {
  background-color: var(--darkred);
  color: white;
}

.date{
  color:#e0f0ebd4;
}

.box{
    background-color: var(--darkblue);
    border: 3px solid var(--darkred);

}

.innerbox {
    color: var(--pastelyellow);
    background: var(--plum);
}

/* section styling */

.header{ 
  background-image: url("../img/home/headerdark.GIF"); 
}


.sidebar {
	  background-color:var(--plum);
}

.content {
    border: 2px ridge var(--midnightblue);
    background-image: url("../img/home/carpet.jpg");
}

.navigation {
    background-color: var(--plum);
}

.footer {
	background-color:var(--darkred);
    color: var(--white);
}

/* Figures */
figure {
  background-color: var(--darkblue);
}

/* Marquees */
.marqueebox{
    background-color:var(--darkred);
    color: var(--white);
}

/* skip buttons */
.skip-to-nav-link, .skip-to-content-link {
  background-color:var(--darkred);
  color: var(--white);
}

#top {
  background-color: var(--darkred);
  color: var(--white);
}

#top:hover {
  background-color: #555;
}

button{
  color:var(--white);
  background:var(--darkred);
  border: 1px solid var(--transparent);
}

button:hover{
  color:var(--red);
}

/* Image Galleries */
.image-gallery div {
  border: 3px solid var(--darkred);
}

.image-gallery div span {
  background-color: var(--darkred);
  color: var(--white);
}


/* Scrollbars */
  /* Firefox */
  .leftside, .navigation {
    scrollbar-color: var(--white) var(--transparent);
  }

  /* Chrome, Edge, and Safari */

  .leftside::-webkit-scrollbar-track, .navigation::-webkit-scrollbar-track {
    background: var(--transparent);
  }

  .leftside::-webkit-scrollbar-thumb, .navigation::-webkit-scrollbar-thumb {
    background-color: var(--white);
  }

  /* Firefox */
  .content {
    scrollbar-color: var(--blue) var(--transparent);
  }

  /* Chrome, Edge, and Safari */

  .content::-webkit-scrollbar-track {
    background: var(--transparent);
  }

  .content::-webkit-scrollbar-thumb {
    background-color: var(--darkblue);
  }

  /* Firefox */
  .box {
    scrollbar-color: var(--blue) var(--transparent);
  }

  /* Chrome, Edge, and Safari */

  .box::-webkit-scrollbar-track {
    background: var(--transparent);
  }

  .box::-webkit-scrollbar-thumb {
    background-color: var(--blue);
  }

/* Last.FM Widget */
.nowplayingcard {
    
          &:nth-child(odd) {
            color: var(--pastelpurple);
          }
        }

/* Follow on Nekoweb button */
.follow {
  background: var(--darkred);
}

/* About page navi */ 
.navi{
    background-color: var(--darkred);
}

/* About page PKMN */
.pkmn{
    background-color: var(--plum);
}