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

helloooooo and welcome 2 the cardcaptor theme's html. thanks for downloading it! i'll be commenting this 
code the best i can to split things up into easy-to-navigate sections. this code shoooould work out of the 
box, but if it doesnt/you have any questions feel free 2 email me.

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: angelnetcast at protonmail dot com
main site: https://angelscake.neocities.org/
layout site: https://angelslayouts.neocities.org/
*/

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

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

@font-face {
  font-family: momstypewriter;
  src: url(MomsTypewriter.ttf);
}

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

body {
  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: momstypewriter;
}

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

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

a:hover {
  color: var(--red);
}

/* --- bullet point --- */
ul {
  list-style-image: url("assets/bullet.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: 5px solid var(--black);
  padding: 20px;
}

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

/* --- G2 // cloud divider --- */
.g2 {
  grid-area: topdeco;
  text-align: center;
}

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

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

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

#fig1 {
  z-index: 1;
  position: absolute;
  top: 870px;
  left: 120px;
}

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