/* Defines the overall style of the entire webpage */
/* Different stylings can be defined in separate files, and imported here */
/* Individual pages import this file in their css, and can also tweak styling page-by-page */

/* Select color styling */
/* Define some palettes here? */
@import "beige.css";

/* Later, move this to separate file and import here */

/* Title bar */
/* Contains: Logo, site name (h1), possibly some animation */
.title {
  border: 1px solid black;
  padding: 0px 0px 0px 20px;
  background: cyan;
}

.title > h1 {
  text-align: left;
}

/* Navigation links */
/* Normal hyperlinks, generated programmatically (sections?) */
nav {
  border-bottom: 1px solid black;
  grid-column: 2 / 5;
}

nav > div {
  background: var(--shadow);
  display: flex;
  justify-content: space-evenly;
}

nav > div > a {
  border: 0.2rem solid var(--shadow2);
  padding: 5px 10px 5px 10px;
}

.main {
  display: grid;
}

/* Sidebar */
/* For recent articles and article navigation (sections)? */
aside {
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  grid-column: 1 / 2;
  grid-row-end: span 3;
  background: var(--shadow);
}

aside > section {
  border: 0.5rem solid var(--shadow);
  padding: 5px 0px 5px 0px;
  background-image: linear-gradient(to bottom, var(--highlight), var(--base)); 
}

/* Main content of the page */
/* For example article, list of articles, etc. (sections) */
article {
  grid-column: 2 / 5;
  /*border-left: 3rem solid var(--shadow);*/
  /*border-top: 1rem solid var(--shadow);*/
  /*border-image: url("../img/site/orn27.gif");*/
  /*border-image-width: 1rem;*/
  /*border-image-slice: 4.1% 100% 44.5% 100%;*/
  /*border-image-repeat: round;*/
}

/* Funny quote */
article > .quote {
  border: none;
}

/* Standalone article sections (e.g. infoboxes?) */
article > section {
}

/* Article content divisions */
article > div {
}


/* Footer */
footer {
  margin: 10px;
  background: var(--shadow);
}