/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template:
    "header header header" /* row 1 */
    "sidebar main main"  /* row 2 */
    "footer footer footer" /* row 3 */
	/ 1fr 2fr;  /* column widths (1fr = one fraction) */
  grid-gap: 10px;   /* (optional) space between areas */
}

/* assign your elements to the areas you defined in the grid-template rule: */
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }


.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;}

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}


body {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 0;
  background-color: black;
}

a {
  color: hotpink;
}

a:hover{
  text-decoration: none;}

hr {
  color: rgb(131,115,129)
}

.gallery {
  border: none;
}

.gallery img {
  height: 300px;
  border:  rgb(131,115,129);
  margin: 10px;
}



/* Style the header */
header img {
  height: 200px;
  margin: auto;
}

header {
  width: auto;
  margin: auto;
  background-color: rgb(131,115,129);
  padding: 30px;
  text-align: center;
}

header a {
  text-decoration: none;
}

h1 {
  color: pink;
  background-color:rgb(20,20,20); 
  padding: 10px;
  font-family: "Jacquard 12", system-ui
  
}

h2, h3, h4, h6 {
    color: hotpink;
   font-family: "Jacquard 12", system-ui;
}

section {
  border: 5px dotted rgb(131,115,129);
  padding: 15px;
  margin-bottom: 40px;
  border-radius: 40px;
  background-color: rgb(20,20,20);
}



/* Style the top navigation bar */

nav button{
  margin: auto;
  overflow: hidden;
  background-color: rgb(20,20,20);
  font-family: "Jacquard 12", system-ui;
}

/* Style the topnav links */
nav button a{
  margin: 5px;
  display: block;
  color: pink;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 110%;
}

/* Change color on hover */
nav button:hover {
  background-color: #ddd;
}

nav a:hover {
    color: black;
}

button {
  border-radius: 10px;
}

/* Main Body  */
main {
  position: relative;
  width: 70%;
  height: 100%;
  margin-left: 200px;
  padding: 100px;
  color: pink;
  font-family: "Jersey 10", sans-serif;
}



  /* Aside */
  aside {
    position: sticky;
    width: 15%;
    height: 100%;
    left: 0px;
    top: 300px;
    color: pink;
    font-family: "Jersey 10", sans-serif;
  }

  .scrollbox {
    height: 200px;
    width: 50%;
    overflow: auto;
  }

  .cat img {
    height: 100px;  
    margin-left: 50px;
}
  

/* Footer */
footer {
  color: rgb(131,115,129);
  padding: 14px 16px;
  background-color: rgb(20,20,20);
  font-family: "Jersey 10", sans-serif;

}