/* 
                   _                 _                         _                    
                  | |               | |                       | |                   
  ___ __ _ _ __ __| | ___ __ _ _ __ | |_ ___  _ __   ___  __ _| | ___   _ _ __ __ _ 
 / __/ _` | '__/ _` |/ __/ _` | '_ \| __/ _ \| '__| / __|/ _` | |/ / | | | '__/ _` |
| (_| (_| | | | (_| | (_| (_| | |_) | || (_) | |    \__ \ (_| |   <| |_| | | | (_| |
 \___\__,_|_|  \__,_|\___\__,_| .__/ \__\___/|_|    |___/\__,_|_|\_\\__,_|_|  \__,_|
                              | |                                                   
                              |_|                                                   

hi! thanks for downloading my code. this is the css! it should work out of the box, but if you run into any
issues, let me know! i've commented this to make it (hopefully) easy to understand and navigate. a bit of 
tomfoolery was used to get some things working, so don't mind that...

this code is free to use! please credit me if you're asked where the code comes from, but otherwise go
wild o7

thanks for checking it out!
made with love by angel

---------- contact ----------
email: angel at angelnetcast dot com
main site: https://angelnetcast.com/
layout site: https://layouts.angelnetcast.com/

*/

/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  --black: black;
  --white: white;
  --skyblue: rgb(223, 247, 255);
  --lightpink: rgb(255, 229, 252);
  --red: red;
  --yellow: yellow;
  --purplelogo: #941f9b;
  --pinklogo: #ff7cb5;
}

@font-face {
  font-family: magazine;
  src: url(assets/Magazine.ttf);
}

@font-face {
  font-family: abalonesmile;
  src: url(assets/AbaloneSmile.otf);
}

/* ------------------------ HTML AND BODY DESIGN ------------------------ */
html {
  background-image: linear-gradient(
    to bottom,
    var(--skyblue) 70%,
    var(--lightpink) 100%
  );
  cursor: url("assets/cursor.gif"), auto;
}

body {
  width: 1500px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  font-family: abalonesmile;
  margin-left: 0px; /*note: gets rid of the space on left side of body container*/
}

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

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

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

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

/* --- emphasis --- */
mark {
  color: var(--black);
  background-color: var(--yellow);
}

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: 5px dashed var(--pinklogo);
  padding: 20px;
}

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

/* --- G2 // cloud divider --- */
.g2 {
  grid-area: topdeco;
  text-align: center;
  position: relative;
  display: block;
  font-size: 0px; /*note: this is here to remove the weird gaps in the clouds*/
}

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

/* --- G4 // main content --- */
.g4 {
  grid-area: main;
  position: relative;
  display: block;
  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: magazine;
  font-size: 50px;
  color: var(--red);
  text-shadow: var(--yellow) 2px 0px;
}

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

/* --- keroberos --- */
#kero {
  z-index: -1;
  position: absolute;
  right: 600px;
  top: -290px;
}

#planet {
  z-index: -2;
  position: absolute;
  left: 290px;
  top: -270px;
  animation: 10s spin linear infinite;
}

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

#flower {
  z-index: 1;
  position: absolute;
  bottom: -70px;
  left: 700px;
}

#sakura {
  z-index: 1;
  position: absolute;
  top: -150px;
  left: -50px;
}

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