/* 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." */

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Jacquard+12&family=Jacquard+24&family=Liter&family=Outfit:wght@100..900&family=Stack+Sans+Text:wght@200..700&display=swap');



:root {
  cursor: url("cursor.png"), auto; 
  /* Background Colors: */
  --background-color: #e3170a;
  --content-background-color: #F3EFE0;
  --sidebar-background-color: #F3EFE0;
  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #5CC8FF;
  --link-color-hover: #43AA8B;

  /* Text: */
  --font: 'Inconsolata';
  --heading-font: 'Jacquard 24';
  --font-size: 16px;

  /* Other Settings: */
  --margin: 16px;
  --padding: 16px;
  --border: 2px solid #000000;
  --round-borders: 2px;
  --sidebar-width: 200px;
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

/* Links: */
a {
  text-decoration: underline;
}

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

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

.after-header{
  background-color: var(---background-color);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  }

.layout {
  
  width: 900px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

header {
  font-size: 1.2em;
  background-color: var(--background-color);
}

#header-content {
  position: relative;
  min-height: 200px;
}

#header-content canvas {
  position: relative !important;
  display: block;
}

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

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

aside {
  grid-area: aside;
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}
.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 2.4em;
  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 {
}

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


main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border-radius: var(--round-borders);
  border-width: 4px;
  
  
}
.main-content{
  padding: 30px;
}

body {
 
  color: black;
  font-family: Inconsolata;
  background: var(--background-color);
}

.finger-pick {
  visibility: hidden;
  width: 30px;
  transform: rotate(90deg);
}

.finger-picked {
  visibility: visible;
  width: 40px;
  transform: rotate(90deg);
}

.index-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  }
.index-item:hover .finger-pick {
  visibility: visible;
}
.index-item-selected {
display: flex;
  flex-direction: row;
  align-items: center;
}
.index-item-selected a{
  color: var(--link-color-hover);
  text-decoration: none;
  
  }