@font-face {
    font-family: 'Amatic SC';
    src: url('/static/fonts/AmaticSC-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Amatic SC';
    src: url('/static/fonts/AmaticSC-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
  }

@font-face {
    font-family: 'KodeMono';
    src: url('/static/fonts/KodeMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'KodeMono';
    src: url('/static/fonts/KodeMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: 'KodeMono';
    src: url('/static/fonts/KodeMono-Medium.ttf') format('truetype');
    font-weight: medium;
    font-style: normal;
  }


:root {
    --background-color: #271c3a;
    --code-color: #C4D8E3;
    --code-background-color: #271c3a;
    --text-color: #D8E3C5;
    --highlight-color: #E3C4D8;
    --navbar-text-color: #E3C4D8;
    --navbar-text-color-active: #e2e8f0;
    --navbar-dropdown-menu-background: #E3C4D8;
    --quotes-blue-color: #E3C4D8;

    --very-light-grey-color: #eeeeee; 
    --light-grey-color: #555555;
    --dark-blue-color:#020381;
    /* --quotes-blue-color: #E3C4D8; */
    --light-blue-color: #2aa4cb;
    --red-color: #C81F22;
    --pink-color: #e83e8c;
    --green-color: #ADF850;
    --dark-green-color: #4CBE00;
}

body, html {
    height: 100%;
    margin: 0;
    line-height: 1.6;
    font-size: 1.0em;
    font-family: "KodeMono";
    font-style: normal;
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
}

.bg-dark {
    background-color: var(--background-color) !important;
}

.navbar-nav {
  --bs-nav-link-color: var(--navbar-text-color) !important;
  --bs-nav-link-hover-color: var(--navbar-text-color-active) !important;
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color) !important;
  list-style: none;
}

.navbar-nav .nav-link.show {
  color: var(--navbar-text-color-active);
}

.navbar-nav .dropdown-menu {
  color: var(--code-background-color);
  background-color: var(--navbar-dropdown-menu-background);
}

h1 {
  color: var(--highlight-color);
  padding:0px .5em;
  border-left:20px solid var(--highlight-color);
  margin-bottom: 1em;
}

h2 {
  color: var(--highlight-color);
  padding:0px .5em;
  border-left:10px solid var(--highlight-color);
}

h2::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--highlight-color) !important;
}

h3 {
  color: var(--highlight-color);
  padding:0px .5em;
  border-left:6px solid var(--highlight-color);
}

h3::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 0;
  bottom: 0;
  width: 6px;
  background-color: var(--highlight-color) !important;
}

a {
  color: var(--navbar-text-color);
  text-decoration: none;
}

img {
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  float:right;
  margin: 20px;
  width: auto;
  height: auto;
}


.left-sidebar .page-category {
    font-weight: bold;
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 0px;
    color: var(--highlight-color) !important;
}

.left-sidebar ul li {
    margin-bottom: 5px;
    margin-left: 5px;
}

.left-sidebar ul li a {
    color: #000000;
    text-decoration: none;
    color: var(--highlight-color) !important;
}

code {
    display: inline-block;
    font-size: 1em;
    color: var(--code-color) !important;
    background-color: var(--code-background-color) !important;
}

.navbar-brand {
  font-family: "Amatic SC", "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--text-color) !important;
  font-weight: bold;
  font-size: 2em;
}

/* Section: Quotes **********************************************************
 * This section was inspired by https://codepen.io/jimmycow/pen/LmjVaz crafted by Jaime (jimmycow)
*/
.blockquote {
  padding: 20px 40px 20px;
  position: relative;
}
.blockquote p {
  font-size: 1.3em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

.blockquote span.source {
  font-size: 1rem;
  font-weight: bold;
  float: right;
}

.blockquote:before {
position: absolute;
font-family: 'FontAwesome';
top: 0;
content:"\f10d";
font-size: 5em;
color: rgba(0,0,0,0.1);
float: left;
}

.blockquote::after {
  content: "";
  top: 20px;
  left: 40%;
  position: absolute;
  border-bottom: 3px solid var(--quotes-blue-color);
  height: 3px;
  width: 20%;
}

.otro-blockquote{
font-size: 0.9em;
margin: 1.2em auto;
font-weight: normal;
font-style:italic;
color:  var(--text-color);
padding:2em 10px 2em 10px;
border-left:3px solid var(--quotes-blue-color);
line-height:1.6;
position: relative;
/* background: var(--very-light-grey-color); */
}

.otro-blockquote::before{
font-family:Arial;
content: "\201C";
color: var(--quotes-blue-color);
font-size:4em;
position: absolute;
left: 0px;
top: -20px;
}

.otro-blockquote::after{
content: '';
}

.otro-blockquote span.source {
  display:block;
  font-size: 1em;
  font-style:normal;
  font-weight: bold;
  margin-top:1em;
}

/* .otro-blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
} */

/* Section: Quotes End ******************************************************/