/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --white: #f0cee0;
  --red: #d34091;
  --yellow: #f30096;
  --purplelogo: #d34091;
  --pinklogo: #d34091;
  --fontbase: #262929
}

@font-face {
  font-family: KACHIKA;
  src: url(/Minecraft.ttf);
}

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

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

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



.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: 10px;

}

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

body {
  background-image: url("https://i.pinimg.com/736x/a2/7a/0d/a27a0d154232f06a74839395c07eb0e9.jpg");
  width: 1536px;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-family: KACHIKA;
  margin-left: 200px;

}


/* --- 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: 100px;
}

/* --- 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;
}

/* --- keroberos --- */
#kero {
  z-index: -2;
  position: absolute;
  left: 1000px;
  bottom: 850px;
}

#planet {
  z-index: -2;
  position: absolute;
  top: 20px;
  right: 1150px;
}

/* --- body decorations --- */

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

#ipod {
  z-index: 10;
  position: absolute;
  top: 770px;
  right: -350px;
}


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