/*importing the google web font*/
@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');

* {
  box-sizing: border-box;
}
/* main grid container*/
.container {
  gap: 50px;
  margin: 0 auto;
  max-width: 1400px;
  display: grid;
  grid-template-areas:
  "header header header"
  "menu content banner"
  "footer footer footer";
  grid-template-columns: 200px 6fr;
}



.container > header{
  background-color: transparent;
  grid-area: header;
  text-align: center;
}

/* side bar */
.container > .nav-bar {
  background-color: hsl(198, 72%, 49%);
  background-image: url("images/starstest.webp");
  background-size: 125px;
  border-radius: 5px;
  box-sizing: border-box;
  outline-style: solid;
  outline-width: 3px;
  outline-color: hsl(198 72% 73%);
  grid-area: menu;
  width: 200px;
  animation: 20s linear infinite falling-stars;
}

/*HSL LITERALLY MEANS HUE SATURATION LIGHTNESS YOU IDIOT.
Header for the sidebar.*/ 
aside > header {
  outline-style: solid;
  outline: hsl(198 72% 73%) solid 3px;
  border-radius: 1px;
  color: hsl(47 90% 82%);
  text-shadow: 0px 2px 5px hsl(202, 71%, 39%);
  font-size: 18pt;
  padding: 20px 0;
  text-align: center;
  background-color: #e2a4cf;
  background-image: linear-gradient(
    hsla(0 0 100% / 1.0),
    hsla(0 0 100% / 0.4) 40%,
    hsla(0 0 100% / 0.1) 50%,
    hsla(0 0 100% / 0.60) 100%
  );
}

/*Container for nav buttons*/
.side-nav {
  gap: 15px;
  flex-direction: column;
  display: flex;
  padding: 20px;
}

/* Button styling for nav bar */
.side-nav > a {
  color:black;
  gap: 5px;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
  background-color: white;
  text-decoration: none;
  
}

.side-nav > a :visited {
color: black;
}

.side-nav > a:hover {
  outline: hsl(224 72% 37%) solid 2px;
} 

/*content banner*/

.container > .banner {
  align-content: center;
  display: flex;
  flex-direction: column;
  background-color: hsl(202, 71%, 49%);
  box-sizing: border-box;
  width: 200px;
  grid-area: banner;
  border-radius: 1px;
  outline-style: solid;
  outline-width: 3px;
  outline-color: hsl(198 72% 73%);
  
}




/* the background image essentially, and some other stuff for the styling.
the wild card below is used so the background and other images on the site
can be under different rendering modes.*/
body {
  margin: 0;
  font-family: "Chango", sans-serif;
  background-image: url("images/site-background.webp");
  background-size: cover;
  color: black;
  min-height: 100vh;
  image-rendering: pixelated;
}

body > * {
  image-rendering: auto;
}
/*styling for main content area*/
.container > main {
  text-align: left;
  background-color: hsl(224, 60%, 94%);
  border-radius: 15px;
  outline-style: solid;
  outline-color: hsl(224, 75%, 37%);
  outline-width: 15px;
  line-height: 15px;
}


/*animation for the nav bar*/
@keyframes falling-stars {
  from {
    background-position-x: 0;
    background-position-y: 0;

  }
  to {
    background-position-x: 750px;
    background-position-y: 375px ;
    
    
  }
}

/*a sleepy little guy*/
.sleepy-kirby {
  width: 100px;
  position:fixed;
  right: 50px;
  bottom: -5px;
}

.doll {
  align-items: center;
}

div > header {
text-align: center;
size: 200px;
left: 50px;
}

div> p 
{line-height: 20px;
padding-left: 20px;}

h1 {
  font-size: 40pt;
}

header> h2 {
  font-size: 20pt;
  font-style: italic;
}