.grid {
margin: 80px;
position: absolute;
z-index: -100;
background-image:url('img/grid.png');
}

.decostarA {
image-rendering: pixelated;
animation: spin 10s linear infinite;
}

.decostarB {
image-rendering: pixelated;
animation: spin 10s linear infinite;
animation-direction: reverse;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.wizard {
background:url('img/wiz.png');
height: 90px;
width: 90px;
border-radius: 200px;
}

/* accent header */
.headerbg {
background-color: #442648;
height: 33px;
width: 800px;
border-radius: 10px;
margin-top: -10px;
}


/* windows */
.container {
background-image:url("img/dither.png");
background-color: #7d3b55;
height: 250px;
width: 550px;
border-radius: 5px;
border: 1px solid;
border-color: #649189;
text-align: center;
margin-top: 10px;
}

.containerB {
background-color: #7d3b55;
height: 250px;
width: 550px;
border-radius: 5px;
border: 1px solid;
border-color: #649189;
text-align: center;
margin-top: 10px;
}

.window {
padding: 5px;
font-size: 12px;
font-family: MS gothic;
color: #e1787a;
}

.windowbar {
background-image:url("img/wave.png");
text-align: center;
height: 20px;
background-color: #38335a;
font-weight: bold;
padding-top: 3px;
border-bottom: 1px solid;
border-color: #649189;
}

span {
background-color: #38335a;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottoM: 2px;
border-radius: 5px;
font-size: 15px;
font-family: times new roman;
color: #649189;
}

/* dl pages */
h4 {
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
padding-bottoM: 2px;
border-radius: 5px;
font-size: 15px;
font-family: times new roman;
color: #649189;
text-shadow: 1px 1px #e1787a;
}

.dlheader {
background-color: #442648;
border-radius: 5px;
margin-bottom: -10px;
margin-top: -10px;
}



/* resource frame */
iframe {
font-size: 12px;
font-family: MS gothic;
color: #e1787a;
background: transparent;
border: 0px solid;
height: 100%;
width: 100%;
border-radius: 5px;
}


/* crew page */
.crew {
background-image:url("img/dither.png");
background-color: #7d3b55;
margin: 0px;
padding: 2px;
}

.crew img {
margin-right: -10px;
}


.petpic {
margin-left: -10px;
margin-right: -10px;
cursor: url('img/cur2.png'), auto;
}

.crewlink {
margin: 15px;
}

.nobg {
padding-top: 10px;
background-image:url("img/dither.png");
background-color: #7d3b55;
max-width: 560px;
margin:auto;
image-rendering: pixelated;
}

.nobg img {
background-image:url("img/grid2.png");
padding: 3px;
}

.arcfile {
margin-bottom: 80px;
}

.arcdesc {
padding-left: 3px;
padding-right: 3px;
}

.archive {
padding-top: 10px;
background-image:url("img/dither.png");
background-color: #7d3b55;
max-width: 560px;
margin:auto;
 font-size: 12px;
image-rendering: pixelated;
}

.archive img {
background-image:url("crew/grid3.png");
padding: 5px;
margin-top: 40px;
padding-bottom: 10px;
border: 3px double #442648;
cursor: url('img/pet.png'), auto;
}


body {
 background-color: #281029;
 background-image:url("img/gradiate2.png");
 background-attachment: fixed;
 font-size: 12px;
 font-family: MS gothic;
 color: #e1787a;
 text-align: center;
}


body, * { 
cursor:url(img/cur.png), auto; }

h3 {
color: #649189;
text-shadow: 1px 1px #e1787a;
font-size: 30px;
font-style: italic;
  -webkit-font-smoothing: never;
  -moz-osx-font-smoothing: never;
animation: shine 5s infinite;
font-family: times new roman;
}

@keyframes shine {
   0% { color: #7ac698}
  50% { color: #649189}
  100% { color: #7ac698}
}


em {
color: #649189;
text-shadow: 1px 1px #38335a;
font-weight: bold;
}

a {
color: #e1787a;
}

a:hover {
color: #7ac698;
animation: link-colour 0.1s;
}

@keyframes link-colour {
  0% { color:#e1787a; }
  100% { color: #7ac698; }
}

hr {
border: 3px double #442648;
}


.box {
background-image:url("img/line.png");
background-color:#55223a;
color: #a9bfb5;
border-radius: 2px;
margin: auto;
margin-left: 43px;
margin-top: 30px;
padding: 15px;
width: 750px;
border: 2px solid #b94b53;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  margin-left: 90px;
  width: 650px;
  grid-gap: 15px 24px;
}

.grid-item {
  background-color:#55223a;
  color: #a9bfb5;
  border-radius: 5px;
  border: 2px solid #b94b53;
  padding: 20px;
  width: 170px;
  height: 100px;
  text-align: center;
}

.party {
color: #c9a1a5;
text-shadow: 2px 2px #0e090d;
font-size: 35px;
margin: 25px;
border-bottom: 3px double;
font-style: strong;
letter-spacing: 2px;
animation: rainbow 1s infinite;
}

@keyframes rainbow {
  0% { color: #ff9d96; border-color: #ff9d96;}
  20% { color: #ffc796; border-color: #ffc796;}
  40% { color: #e8ff96; border-color: #e8ff96;}
  60% { color: #96f3ff; border-color: #96f3ff;}
  80% { color: #c8a8ff; border-color: #c8a8ff;}
  90% { color: #ffa8d6; border-color: #ffa8d6;}
  100% { color: #ff9d96; border-color: #ff9d96;}
}

.box2 {
background-image:url("img/oddbg.png");
color: #abb5b1;
border-radius: 10px;
margin: auto;
margin-top: 30px;
padding: 18px;
width: 650px;
border: 4px double;
animation: rainbow 1s infinite;
}



/* scrollbar time */
::-webkit-scrollbar-track
{
background-color: #442648;
border-left: 1px dotted;
border-color: #649189;
background-image:url("img/line.png");
}

::-webkit-scrollbar
{
width: 15px;
background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
background-color: #38335a;
border-radius: 5px;
height: 120px;
border: 1px dotted;
border-right: 0px solid;
border-color: #649189;
background-image:url("img/dither.png");
}

/* for hr styling */

.date {
text-align:center;
color: #649189;
font-weight: bold;
text-shadow: 1px 1px #38335a;
}

.date hr {
	margin-left:auto;
	margin-right:auto;

}

.left {
	float:left;
	width:5%;
margin-top: 3px;
}

.right {
	float:right;
	width:75%;
margin-top: 3px;
}