body { 
  background-color: #dee2d0; 
}

.navbar {
  z-index:1000; /* overlapping gist snippets */
}

/* row-layout on the base.html */

.row { 
  display: flex; /* equal height of the children */ 
}

.container { 
  width: 75%;
  padding: 4%;
  float: left;
}
.sidebar {
  background-color: rgb(230, 227, 214);
  float: left;
  width: 20%;
}
.sidebar li { 
  font-size: 17px; 
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.canvas-link { cursor: pointer; }

code {
  background-color: #053a46;
  color:white;
  font-size: 16px;
  border: 1px solid #999;
  display: block;
  padding: 2% 2% 2% 6%;
  margin: 2% 0 4% 0%;
  white-space:pre;
}

.chapter-title { font-size: 28px; }

.intro {
  padding: 2% 2% 0 2%;
  font-family: Consolas,monospace;
  font-size: 18px;
  width: 75%;
}
.intro-hr {
  width: 75%; 
  border: 2px solid gray;
}
.intro-home {
  padding: 1% 2% 0% 2%;
  font-family: Consolas,monospace;
  font-size: 18px;
}
.portfolio-home {
  padding: 2% 2% 0 8%;
  font-family: Consolas,monospace;
  
}
.learning-links {
  padding: 2% 2% 0 8%;
  font-family: Consolas,monospace;
  font-size: 18px;
}

.star { 
  font-size: 24px; 
}

li {
  padding-bottom: 1%;
  font-family: Consolas,monospace;
  font-size: 20px;
  color: transparent;  /* color: #5fb948; */
}

/* #django-start {
  visibility: true;
} */

/* anchors */

a:link { 
  color: #1c626e; 
}
a:visited {
  color: #1c626e;
}
/* mouse over link */
a:hover {
  color: blue;
}

.clickable-link:link, .clickable-link:link:visited { 
  color: #1c626e;
  text-decoration: none;
}
.clickable-link:active {
  background-color: rgb(102, 241, 9);
  padding: 1% 3% 1% 3%;
  border-radius: 6px; 
}
/* mouse over link */
.clickable-link:hover {
  color: rgb(62, 62, 202);
}

.navbar-toggler-icon {
  background-color: rgb(149, 166, 180);
  border-radius: 5px;
  text-decoration: none;
}


@media screen and (max-width: 1200px) {
  
  pre code { 
    display: inline-block;
  }

  .container { 
    width: 100%;
    float: none;
  }

  .chapter-title { 
    font-size: 24px;
  }

  .intro { 
    width: 100%;
  }

  .intro-hr {
    width: 100%;
  }
  
  li {
    padding-bottom: 2%;
    font-family: Consolas,monospace;
    font-size: 17px;
  }

}

@media screen and (max-width: 991px) {
  .menus:hover, .menus:visited, .menus:link  {
    background-color: #4b6f4f;
    color: white;
    text-decoration: none;
    padding: 2%;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  
  h1 {
    font-size: 22px;
  }

}

@media screen and (max-width: 400px) {
  
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 22px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 16px;
  }
  pre {
    font-size: 12px;
  }
  code {
    font-size: 12px;
    display: flex;
    justify-content: center;
    padding: 1%;
  }
  #docker {
    font-size: 10px;
  }
  .container {
    width: 100%;
  }
  .intro {
    font-size: 16px;
    padding: 4%;
  }
  .intro-home {
    font-size: 16px;
  }
  .learning-links {
    font-size: 14px;
  }
  .star {
    font-size: 18px;
  }
  p {
    font-size:13px;
  }
  .p-text {
    margin: 3%;
    font-size: 15px;
  }
  li {
    padding-bottom: 2%;
    font-size: 17px;
    font-family: Consolas,monospace;
  }  
  
}