/* 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." */
   :root{
     --background-color: #1A141C;
     --background-opacity: 0.8;
     --content-background-color: #1A141C;
     --sidebar-background-color: #1A141C;
     
     --text-color: #BAC0C2;
     --highlight-color: #9877C0;
     --sidebar-text-color: #BAC0C2;
     --link-color: #BAC0C2;
     --link-color-hover: #ADEEB8;
     --link-color-visited: #ADEEB8;
     
     --font: Calibri, monospace;
     --heading-font: Lucida Console, monospace;
     --font-size: 15px;
     
     --margin: 10%;
     --padding: 25px;
     --border: 4px solid white;
     --round-borders: 6px;
     --sidebar-width: 250px;
   }

* {
  box-sizing: border-box;
}

body {
  font-size: var(--font-size);
  margin: var(--margin);
  padding: var(--padding);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("https://mildlycloudy.neocities.org/images/bookbg.jpg");
  background-attachment: fixed;
}

::selection {
  background: var(--highlight-color);
}

/*LINKS*/
a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}


/*LAYOUT*/
.layout {
  width: 100%;
  display: grid;
  grid-gap: 60px;
  grid-template:
  "header"
  "main"
  "footer";
}

/*HEADER*/
header {
  grid-area: header;
  font-size: 1.2em;
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  text-align: center;
  justify-content: center;
  display: flex;
  }
  
  .header-content {
  padding: var(--padding);

}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}

/*SIDEBAR*/
aside {
  grid-area: sidebar;
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
  }
  
  .sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
  }
  
  .sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

      /*NAVIGATION*/
nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* DROP DOWN MENU */

header nav ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/*MAIN BODY*/
main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border-radius: var(--round-borders);
  width: 70%;
  max-width: 1920px;
  margin: auto;
  justify-content: center;
  align-items: center;
  }
  
  /*FOOTER*/
footer {
  grid-area: footer;
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: left;
  }
  
/*SKIP BUTTON*/
#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/*MOBILE*/
@media (max-width: 800px) {
  .layout {
    grid-template:
    "header"
    "main"
    "footer";
  }
}


/*CONTAINERS*/

.container {
  display: block;
}

.element {
  padding: var(--padding);
    width: 550px;
    overflow: hidden;
}

a.chapter:link {
  background: #614F6D;
  font-size: 20px;
  font-family: Lucida Console;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
  margin: 20px;
  width: 160px;
}

a.chapter:hover{
  text-decoration: none;
  background: #9877C0;
  color: #BAC0C2;
}

a.chapter:visited{
    text-decoration: none;
  background: #9877C0;
  color: #BAC0C2;
}

.chapters{
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 20px;
  display: inline-block;
  
}

.page-select{
  display: block;
  text-align: center;
  font-size: 25px;
  align-items: center;
  justify-content: center;
  position: float;
}

/*SPECIAL LINES*/

.Mepheia{
  font-family: Gabriola;
  font-size: 18px;
}