@font-face {
  font-family: JetBrainsMonoNerdFontMono-Regular;
  src: url(./../fonts/JetBrainsMonoNerdFontMono-Regular.ttf) format('truetype');
}

/* Colors
 #618685
 Background : #4040a1
 Article : #36486b
 Text : #fefbd8
 Border : #e6af91
 */

.pop {
  border-top: .1rem solid black;
  border-left: .1rem solid black;
  border-right: .2rem solid black;
  border-bottom: .2rem solid black;
  margin-bottom: 1rem;
}


:root {
  --bg-color: #f1e2be;
  --line-color-1: #a58a62;
  --line-color-2: #a9a994;
  --dark-water: #445162;
  --light-water: #96a4b6;
  --light-parchment: #f1e2be;
  --dark-parchment: #886243;
}

.graph-paper {
  height: 100%;
  background-color: var(--bg-color);
  background-image:
    conic-gradient(at calc(100% - 2px) calc(100% - 2px), var(--line-color-1) 270deg, #0000 0);
  background-size: 10rem 10rem, 2rem 2rem;
}

.graph-paper-pop {
  height: 100%;
  background-color: var(--bg-color);
  background-image:
    conic-gradient(at calc(100% - 2px) calc(100% - 2px), var(--line-color-1) 270deg, #0000 0);
  background-size: 10rem 10rem, 2rem 2rem;
  border-top: .1rem solid black;
  border-left: .1rem solid black;
  border-right: .2rem solid black;
  border-bottom: .2rem solid black;
  margin-bottom: 1rem;
}


html {
  font-family: JetBrainsMonoNerdFontMono-Regular;
}

body {
  background-color: var(--dark-water);
}



header {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: JetBrainsMonoNerdFontMono-Regular;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.9rem;
}

h4 {
  font-size: 1.7rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.2rem;
}

p {
  font-family: JetBrainsMonoNerdFontMono-Regular;
  font-size: 1rem;
  line-height: 2rem;
  text-indent: 50px;
  margin: 1rem;
}

li {
  font-family: JetBrainsMonoNerdFontMono-Regular;
  line-height: 2rem;
}

blockquote {
  font-family: JetBrainsMonoNerdFontMono-Regular;
  line-height: 2rem;
  border: .2rem solid black;
  padding: 1rem;
  margin: 2rem;
}

ol {
  list-style-type: lower-greek;
  list-style-position: inside;
}

ul {
  list-style-type: disc;
  list-style-position: inside;
}


nav,
.navbar,
.navbar-nav {
  background-color: var(--dark-parchment);
}

.nav-link {
  color: var(--light-parchment);
  margin-left: 1rem;
  margin-right: 1rem;
}

footer {
  margin-top: 2rem;
}

main {
  margin-left: 10%;
  margin-right: 10%;
}

section {
  background-color: var(--light-parchment);
  padding: 2rem 1rem;
  margin-top: 1rem;
  border: .3rem solid var(--dark-parchment);
}

section a,
ol a,
ul a {
  color: #445162;
}

p a {
  padding: .5rem;
  color: #445162;
}

p a:link,
p a:visited {
  text-decoration: none;
  color: #445162;
}

p a:hover,
p a:active {
  text-decoration: none;
  color: #445162;
}

.list-group-item {
  background-color: var(--light-water);
  color: #445162;
}

.list-group-item:hover {
  background-color: #445162;
  color: #96a4b6;
}


.sidebar {
  margin-top: 1rem;
}

.sidebar a:link,
.sidebar a:visited {
  text-align: center;
  display: block;
}