/* body base*/

.dreaming {
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  text-align: center;
  background-color: black;
  background-image: url(https://87dream.neocities.org/87DreamPics/Arcade.png);
  background-repeat: repeat;
  background-attachment: scroll;
}

/*left block*/

leftblock {
  background-color: black;
  width: 15%;
  border: 5px solid deeppink;
  border-radius:5px;
  position: fixed;
  padding: 5px;
  top: 30%;
  left: 8%
}

header {
  background-image: url(https://87dream.neocities.org/87DreamPics/animate.gif);
  border: deeppink dashed 5px;
  border-radius: 50px;
  width: 15%;
  justify-content: center;
  position: fixed;
  padding: 5px;
  top: 5%;
  left: 8%

}

compass {
  background-image: linear-gradient(to top, indigo, blue);
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: large;
  font-weight: bold;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: deeppink solid 2px;
}

tableofcontents {
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: small;
}

footer {
  background-color: indigo;
  width: 100%;
  justify-content: center;
  font-size: smaller;
  border-top: deeppink solid 1px;
  padding-top: 5px;
  padding-bottom: 5px;
}

sidebarleft {
  width: 8%;
  justify-content: space-between;
  font-size: smaller;
  font-style: italic;
  display: grid;
  grid-template-columns: 100%;
  padding: 1rem;
  margin: auto;
  position: fixed;
  bottom: 5%;
  left: 11%;
}

/*body*/

.updatelog {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.outerbox {
  font-size: small;
  background-color: white;
  width: 35%;
  padding: 15px;
  margin: auto;
  position: sticky;
  top: 15%;
  text-align: center;
  float: none;
  align-items: flex-start;
  border-radius: 2px;
}

.outerbox2 {
  font-size: small;
  background-color: white;
  width: 35%;
  padding: 15px;
  margin: auto;
  position: sticky;
  top: 15%;
  text-align: left;
  float: none;
  align-items: flex-start;
  border-radius: 2px;
}

innerbox {
  background-color: rgba(0, 0, 0, 0);
  justify-content: center;
}

/*right block*/

sidebarright {
  justify-content: space-between;
  font-size: small;
  display: grid;
  grid-template-columns: 100%;
  padding: 1rem;
  margin: auto;
  position: fixed;
  top: 8%;
  right:8%;
}

sidebarright2 {
  justify-content: space-between;
  font-size: small;
  display: grid;
  grid-template-columns: 100%;
  padding: 1rem;
  margin: auto;
  position: fixed;
  top: 8%;
  right:16%;
}

sidebarright3 {
  align-items: center;
  font-size: small;
  display: grid;
  grid-template-columns: 100%;
  padding: 1rem;
  margin: auto;
  position: fixed;
  top: 8%;
  right:24%;
}

extrasbar {
  align-items: flex-start;
  font-size: small;
  display: grid;
  grid-template-columns: 100%;
  padding: 1rem;
  margin: auto;
  position: fixed;
  top: 14.5%;
  right:10%;
  max-width: 8%;
  max-height: 50%;
  overflow: scroll;
}

/*common tags*/

img {
  max-width: 100%;
  max-height: 100%; 
}

text {
  font-size: 12px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: left;
}

toctext {
  color: black;
  font-size: 12px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: left;
}

centext {
  font-size: 12px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
}

vtext {
  color: rgb(255, 0, 0);
  text-orientation: upright;
  writing-mode: vertical-rl;
}

vstext {
  display: flex;
  color: white;
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

.padding {
  padding:10px;
}

paddingtb {
  padding-top: 15px;
  padding-bottom: 15px;
}

.icon {
  width:2rem;
  height:2rem;
  border-radius: 100%;
}

.iconbig {
  width:5rem;
  height:5rem;
  border-radius: 100%;
}

container {
 display: grid;
 align-items: center; 
 column-gap: 5px;
 grid-template-columns: 1fr 1fr;
}

.doric {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.canoe {
  display: grid;
  grid-row: auto;
  justify-content: space-evenly;
}

a:link {
  color: #030BFF;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #FF006E;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #7FD7FF;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #FF006E;
  background-color: transparent;
  text-decoration: underline;
}

a.two:link {
  color: #FF006E;
  background-color: transparent;
  text-decoration: underline;
}

a.two:visited {
  color: #030BFF;
  background-color: transparent;
  text-decoration: underline;
}

a.two:hover {
  color: indigo;
  background-color: transparent;
  text-decoration: underline;
}

a.two:active {
  color: #FF006E;
  background-color: transparent;
  text-decoration: underline;
}

a.block:link {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 7px;
}

a.block:visited {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 7px;
}

a.block:hover {
  animation: glow 2.5s alternate infinite;
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 7px;
}

a.block:active {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 7px;
}

a.blockf:link {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 5px;
}

a.blockf:visited {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 5px;
}

a.blockf:hover {
  color: #ffffff;
  background-color: transparent;
  text-decoration: underline;
  padding: 5px;
}

a.blockf:active {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
  padding: 5px;
}

a.gradient:visited {
  color: white;
  background: linear-gradient(to up, blue, indigo);
  padding: 12px 17px;
  padding-right: 6rem;
  margin: 5px;
  border-radius: 5px;
  box-sizing: border-box;
  text-decoration: none;
}

a.gradient:link {
  color: white;
  background: linear-gradient(to top, blue, indigo);
  padding: 15px;
  border-radius:5px;
  box-sizing: border-box;
  text-decoration: none;
}

a.gradient:hover {
  color: white;
  background-image: linear-gradient(to top, indigo, blue);
  padding: 15px;
  border-radius: 5px;
  box-sizing: border-box;
  text-decoration: none;
}

dashed {
  border: 2px dashed #FF006E;
  margin-left: 20%;
  margin-right: 20%;
}

.dashed2 {
  border: 2px dashed #FF006E;
  margin-left: 20%;
  margin-right: 20%;
}

dashedb {
  border-bottom: 2px dashed #FF006E;
  padding: 3px;
}

solid {
  border: 2px solid #FF006E;
  margin-left: 20%;
  margin-right: 20%;
}

.solid2 {
  border-bottom: 2px solid #FF006E;
  width:100%;
}

dotted {
  border: 2px dotted #FF006E;
  margin-left: 20%;
  margin-right: 20%;
}

shadowed {
  text-shadow: 0 0 5px white;
}

hS {
  position: sticky;
  top: 0;
  font-size: 15px;
  text-align: left;
  border: 2px dotted blue;
  margin-left: 20%;
  margin-right: 20%;
}

/*
.hSS {
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 20%;
    position: fixed;
    margin: auto;
    font-size: 32px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 0 #FF006E,
    -1px 1px 0 #FF006E,
    1px -1px 0 #FF006E,
    -1px -1px 0 #FF006E,
    0px 1px 0 #FF006E,
    0px -1px 0 #FF006E,
    -1px 0px 0 #FF006E,
    1px 0px 0 #FF006E,
    2px 2px 0 #FF006E,
    -2px 2px 0 #FF006E,
    2px -2px 0 #FF006E,
    -2px -2px 0 #FF006E,
    0px 2px 0 #FF006E,
    0px -2px 0 #FF006E,
    -2px 0px 0 #FF006E,
    2px 0px 0 #FF006E,
    1px 2px 0 #FF006E,
    -1px 2px 0 #FF006E,
    1px -2px 0 #FF006E,
    -1px -2px 0 #FF006E,
    2px 1px 0 #FF006E,
    -2px 1px 0 #FF006E,
    2px -1px 0 #FF006E,
    -2px -1px 0 #FF006E;
}
*/

h1 {
  color: white;
  text-shadow: 1px 1px 0 #FF006E,
    -1px 1px 0 #FF006E,
    1px -1px 0 #FF006E,
    -1px -1px 0 #FF006E,
    0px 1px 0 #FF006E,
    0px -1px 0 #FF006E,
    -1px 0px 0 #FF006E,
    1px 0px 0 #FF006E,
    2px 2px 0 #FF006E,
    -2px 2px 0 #FF006E,
    2px -2px 0 #FF006E,
    -2px -2px 0 #FF006E,
    0px 2px 0 #FF006E,
    0px -2px 0 #FF006E,
    -2px 0px 0 #FF006E,
    2px 0px 0 #FF006E,
    1px 2px 0 #FF006E,
    -1px 2px 0 #FF006E,
    1px -2px 0 #FF006E,
    -1px -2px 0 #FF006E,
    2px 1px 0 #FF006E,
    -2px 1px 0 #FF006E,
    2px -1px 0 #FF006E,
    -2px -1px 0 #FF006E;
}

h2 {
  color: white;
  text-shadow: 1px 1px 0 #FF006E,
    -1px 1px 0 #FF006E,
    1px -1px 0 #FF006E,
    -1px -1px 0 #FF006E,
    0px 1px 0 #FF006E,
    0px -1px 0 #FF006E,
    -1px 0px 0 #FF006E,
    1px 0px 0 #FF006E,
    2px 2px 0 #FF006E,
    -2px 2px 0 #FF006E,
    2px -2px 0 #FF006E,
    -2px -2px 0 #FF006E,
    0px 2px 0 #FF006E,
    0px -2px 0 #FF006E,
    -2px 0px 0 #FF006E,
    2px 0px 0 #FF006E,
    1px 2px 0 #FF006E,
    -1px 2px 0 #FF006E,
    1px -2px 0 #FF006E,
    -1px -2px 0 #FF006E,
    2px 1px 0 #FF006E,
    -2px 1px 0 #FF006E,
    2px -1px 0 #FF006E,
    -2px -1px 0 #FF006E;
}

h3 {
  color: white;
  text-shadow: 1px 1px 0 #FF006E,
    -1px 1px 0 #FF006E,
    1px -1px 0 #FF006E,
    -1px -1px 0 #FF006E,
    0px 1px 0 #FF006E,
    0px -1px 0 #FF006E,
    -1px 0px 0 #FF006E,
    1px 0px 0 #FF006E,
    2px 2px 0 #FF006E,
    -2px 2px 0 #FF006E,
    2px -2px 0 #FF006E,
    -2px -2px 0 #FF006E,
    0px 2px 0 #FF006E,
    0px -2px 0 #FF006E,
    -2px 0px 0 #FF006E,
    2px 0px 0 #FF006E,
    1px 2px 0 #FF006E,
    -1px 2px 0 #FF006E,
    1px -2px 0 #FF006E,
    -1px -2px 0 #FF006E,
    2px 1px 0 #FF006E,
    -2px 1px 0 #FF006E,
    2px -1px 0 #FF006E,
    -2px -1px 0 #FF006E;
}

h4 { 
color: #00FFFF;
  text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF;
}

hLB  {
  color:indigo;
  font-size: small;
  font-weight: bold;
  font-style: italic;
  font-family: sans-serif;
  padding-top: 10px;
  text-align: center;
}

#bI {
  border: 5px solid transparent;
  padding: 15px;
  border-image: url() 50 repeat;
  border-image-slice: 30;
}

#gradient {
  background-image: linear-gradient(to right, blue, indigo);
  border: deeppink dashed 2px;
  border-radius: 2px;
  align-items: center;
}

#gradient2 {
  color: white;
  background-image: linear-gradient(to bottom, blue, indigo);
  border: deeppink solid 2px;
  border-radius: 2px;
  align-items: center;
}

#gradientfire {
  color: white;
  background-image: linear-gradient(to top, red, deeppink);
  border: deeppink ridge 3px;
  border-radius: 2px;
  align-items: center;
}

#gradientsummer {
  color: white;
  background-image: linear-gradient(to top, deeppink, darkorange);
  border: crimson solid 2px;
  border-radius: 5px;
}

#gradientdream {
  background-image: linear-gradient(to top, blue, indigo);
  border: deeppink dashed 1px;
  border-radius: 50px;
  align-items: center;
}

/* Animations */

a.blink { 
  font-weight: bold!important;
  font-size: larger;
  animation: blink 1.5s linear infinite;
  color: red;
  font-family: sans-serif;
  text-decoration: none;
  padding: 10px;
}

a.blink:hover {
  font-size: larger;
  animation: blink 1.5s linear infinite;
  color: white;
  font-family: sans-serif;
}
 
@keyframes blink {
 50% {opacity: 0;}
}

.glow {
  animation: glow 1.5s linear infinite;
  color: rgb(255, 255, 255);
  font-family: sans-serif;
 }

@keyframes glow {
  0% {filter:drop-shadow(0 0 8px white)}
  100% {filter:drop-shadow(0 0 4px blue)}
}

.colorshift {
 animation: colorshift 1.5s linear infinite;
  color: red;
  font-family: sans-serif;

}

@keyframes colorshift {
  0% {color:red;}
  50% {color:rgb(76, 0, 255);}
  100% {color:red;}
}   

/* Notes

87 Dream Pink: FF006E
87 Dream Dark Blue: 030BFF
87 Dream Light Blue: 7FD7FF

87 Valley Purple: 862FE0
87 Valley Green: 88E032
87 Valley Grey: 626464

For making an element have its own background:
background-image: url(https://87dream.neocities.org/87ValleyPics/paper.png);

16x16 sprites for buttons

<marquee scrollamount="10" behavior="scroll" direction="left" style="white-space: nowrap; font-family: monospace; font-size: 14px; color: #00ffcc; background-color: #000; padding: 4px 0; border-bottom: 1px solid #00ffcc;">text goes here!</marquee>

<iframe data-testid="embed-iframe" style="border-radius:12px" src="(link goes here) https://open.spotify.com/embed/track/6Wobsw9uZ0D0xkfOjxXSq9?utm_source=generator&amp;theme=0" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
*/