/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --white: #ffffff;
  --red: #696969;
  --yellow: #696969;
  --purplelogo: #696969;
  --pinklogo: #828282;
  --fontbase: #262929
}

@font-face {
  font-family: KACHIKA;
  src: url(/music/I-pixel-u.ttf);
}

@font-face {
  font-family: pixel;
  src: url(/music/I-pixel-u.ttf);
}

/* ------------------------ HTML AND BODY DESIGN ------------------------ */


#dune {
  position: absolute;
  z-index: 9;
  background-color: var(--white);
  padding: 20px;
  border: 2px outset var(--pinklogo);
  border-radius: 2px;
  top: 930px;
  left: 1250px;
}

#batman {
  position: absolute;
  z-index: 9;
  background-color: var(--white);
  padding: 20px;
  border: 2px outset var(--pinklogo);
  border-radius: 2px;
  top: 1210px;
  left: 1450px;
}

.button { border: outset; color: white; padding: 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; }

img {
  border-radius: 5%;
}

.cursor {
    cursor: url("/assets/Normal-Select.png");
}

body {
  background-image: url("https://sadhost.neocities.org/images/tiles/num.gif");
  width: 1536px; /*note: this is the size of my screen. feel free 2 edit to fit yours, though you'll likely have 2 move the graphics as well*/
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: KACHIKA;
  margin-left: 0px; /*note: gets rid of the weird random left spacing??? idk :p sometimes i fix things w duct tape*/

}


/* --- link color attributes --- */
a:link {
  color: var(--pinklogo);
}

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

a:hover {
  color: var(--red);
  cursor: url("/assets/Link-Select.png"), auto;
}

/* --- bullet point --- */
ul {
  list-style-image: url("assets/heart 2.gif");
}

/* --- emphasis --- */
mark {
  color: var(--white);
  background-color: var(--red);
}

b {
  color: var(--purplelogo);
}

i {
  color: var(--pinklogo);
}



/* ------------------------ GRID LAYOUT ------------------------ */
.grid-container {
  display: grid;
  grid-template-areas:
    "title title title title"
    "topdeco topdeco topdeco topdeco"
    "main main main nav"
    "footer footer footer footer";
}
.grid {
  background-color: var(--white);
  border: 10px outset var(--pinklogo);
  padding: 20px;
  border-radius: 25px
}

/* --- G1 // cardcaptor logo --- */
.g1 {
  grid-area: title;
  text-align: center;
  margin: 0px;
  margin-bottom: 0px;
  margin-top: 10px;
  padding: 10px;
}

/* --- G3 // nav bar --- */
.g3 {
  grid-area: nav;
  margin-right: 200px;
  margin-left: 15px;
}

/* --- G4 // main content --- */
.g4 {
  grid-area: main;
  margin-left: 200px;
}

/* --- G5 // footer --- */
.g5 {
  grid-area: footer;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 15px;
}
/* ------------------------ GRAPHIC DECORATIONS  ------------------------ */
/* --- heading text --- */
.header {
  font-family: pixel;
  font-size: 50px;
  color: var(--red);
}

/* --- horizontal bar --- */
.bar {
  background-color: var(--red);
  border-radius: 5px;
  margin-left: 0; /*note: keeps the bar left aligned. remove this to have centered bars*/
  width: 500px;
  height: 30px;
}

/* --- gif --- */

#crystal {
  z-index: -2;
  position: absolute;
  top: 20px;
  right: 950px;
}

/* --- body decorations --- */
#disc {
  z-index: -1;
  position: absolute;
  right: 30px;
  animation: spin 10s linear infinite;
}

#flower {
  z-index: 1;
  position: absolute;
  top: 1350px;
  right: 440px;
}

#media {
  z-index: 1;
  position: absolute;
  top: 380px;
  right: -410px;
}


#fig1 {
  z-index: 1;
  position: absolute;
  top: 400px;
  left: 550px;
}

/* --- spin animation --- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}