* {
  font-family: "Rosario", sans-serif;
  color:#ffffff;
}
body {
  font-size:18px;
  display: grid;
  grid-template: repeat(88, 16px) / repeat(160, 16px);
  background:#000000;
}
header {
  background: #000000;
  border-style: solid;
  border-color: #ffffff;
  box-shadow:0px 0px 15px 0px #ff00ff;
  text-shadow:0px 0px 15px #ff00ff;
  border-width: 5px;
  grid-area: 4/6/18/92;
  text-align:center;
  color:#ffffff;
  font-size:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
}
a{
  text-decoration:none;
}
#logo {
  background:#000000 url("heart.png") no-repeat center;
  background-size:contain;
  border-style: solid;
  border-color: #000000;
  border-width: 5px;
  grid-area: 2/2/10/16;
}
#logo:hover {
  background:#000000 url("heartbroken.png") no-repeat center;
  background-size:contain;
}
.button {
  background: #ffffff;
  color: #000000;
  border: none;
  box-shadow:0px 0px 15px 0px #ff00ff;
  text-decoration:none;
  justify-content:center;
  display:flex;
  align-items:center;
}
.button2 {
  background: #ffffff;
  color: #000000;
  border: none;
  box-shadow:0px 0px 15px 0px #ff00ff;
  text-decoration:none;
  justify-content:center;
  display:flex;
  align-items:center;
}
.button3 {
  display:none;
}
#button1 {
  grid-area: 19/6/23/16;
}
#button2 {
  grid-area: 19/17/23/27;
}
#button3 {
  grid-area: 19/28/23/38;
}
#button4 {
  grid-area: 19/39/23/49;
}
#button5 {
  grid-area: 19/50/23/60;
}
#button6 {
  grid-area: 19/61/23/71;
}
#button1:hover {
  transform:rotate(-15deg);
}
#button2:hover {
  transform:rotate(-15deg);
}
#button3:hover {
  transform:rotate(-15deg);
}
#button4:hover {
  transform:rotate(-15deg);
}
#button5:hover {
  transform:rotate(-15deg);
}
#button6:hover {
  transform:rotate(-15deg);
}
#sidebar {
  background: #000000;
  border-style: solid;
  box-shadow:0px 0px 15px 0px #ff00ff;
  border-color: #ffffff;
  border-width: 5px;
  grid-area: 19/72/57/92;
}
#button7 {
  grid-area: 21/84/25/94;
}
#button7:hover {
  grid-area: 21/86/25/96;
}
#button8 {
  grid-area: 27/84/31/94;
}
#button8:hover {
  grid-area: 27/86/31/96;
}
#button9 {
  grid-area: 33/84/37/94;
}
#button9:hover {
  grid-area: 33/86/37/96;
}
#button10 {
  grid-area: 39/84/43/94;
}
#button10:hover {
  grid-area: 39/86/43/96;
}
#button11 {
  grid-area: 45/84/49/94;
}
#button11:hover {
  grid-area: 45/86/49/96;
}
#button12 {
  grid-area: 51/84/55/94;
}
#button12:hover {
  grid-area: 51/86/55/96;
}
main {
  border-style: solid;
  background-color:#000000;
  border-color: #ffffff;
  box-shadow:0px 0px 15px 0px #ff00ff;
  text-shadow:0px 0px 15px #ff00ff;
  border-width: 5px;
  grid-area: 24/6/57/71;
  font-size:50px;
  padding-right:20px;
  padding-left:50px;
  padding-top:50px;
}
#the::after{
  content:"MERCY";
  font-size:100px;
  text-shadow:0px 0px 15px #ff00ff;
  display:inline-block;
  width:1040px;
  height:256px;
  padding-top:75px;
  padding-bottom:100px;
  padding-left:95px;
}
#dnr::after{
  content:"the heartfelt horror";
  font-size:50px;
  text-shadow:0px 0px 15px #ff00ff;
  display:inline-block;
  width:1040px;
  height:256px;
  padding-top:85px;
  padding-bottom:105px;
  padding-left:575px;
}
#bandlabel{
    grid-area:24/6/40/71;
    background:url("pinkslash.png") no-repeat 100% 60%;
    background-size:500px;
    border:#ffffff solid 5px;
    border-bottom:none;
}
#timelabel{
  grid-area:40/6/57/71;
  background:url("pinkflip.png") no-repeat 0% 40%;
  background-size:500px;
  border-left:#ffffff solid 5px;
}
.tourdiv{
  font-size:40px;
  text-align:center;
}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-shadow:none;
  box-shadow:none;
  width:200px;
  padding:10px;
}
#picture{
  grid-area: 24/6/57/27;
  background-image:url("crisiscall.png");
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  border-left:#ffffff solid 5px;
}
#bio{
  grid-area:24/27/57/71;
  padding:50px;
  font-size:30px;
}
#text::after{
  content:"the heartfelt horror bringS holographic Art to the next level bY takinG it On tour. while Other holographic performers are confineD By their programming, mercY is fully autonomous and rEady to Take the stage by stOrm.";
}
ol{
  font-size:30px;
}
#li1::after{
  content:"number station";
}
#li2::after{
  content:"hardware";
}
#li3::after{
  content:"form&function";
}
#li4::after{
  content:"breakthrough";
}
#li5::after{
  content:"gifted";
}
#li6::after{
  content:"keyframe";
}
#li7::after{
  content:"v0x";
}
#li8::after{
  content:"no account";
}
#li9::after{
  content:"the flatline";
}
#li10::after{
  content:"crisis call";
}
#items{
  grid-area:24/6/50/71;
}
#buttons{
  grid-area:50/6/57/71;
}
#tshirt{
  width:30%;
  height:100%;
  background-size:contain;
  background-image:url("tshirt1front.png");
  background-repeat: no-repeat;
  background-position: center;
  display:inline-block;
}
#tshirt:hover{
  background-image:url("tshirt1back.png");
}
#jacketorsweatshirt{
  width:30%;
  height:100%;
  background-size:contain;
  background-image:url("jacket1front.png");
  background-repeat:no-repeat;
  background-position: center;
  display:inline-block;
}
#jacketorsweatshirt:hover{
  background-image:url("jacket1back.png");
}
#jacket{
  width:30%;
  height:100%;
  background-size:contain;
  background-image:url("jacket2.png");
  background-repeat:no-repeat;
  background-position:center;
  display:inline-block;
}
#jacket:hover{
  background-image:url("jacket1back.png");
}
.disabled2 {
  opacity: 0.6;
  cursor: not-allowed;
  text-shadow:none;
  box-shadow:none;
  width:200px;
  padding:10px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
#button13 {
  grid-area: 58/6/62/92;
}
footer {
  grid-area: 63/6/65/92;
  font-size: small;
  color:#ffffff;
}