:root {
  --primary-color: rgb(0, 30, 67);
  --secondary-color: rgb(255, 153, 59);
  --secondary-color-alpha: rgba(255, 153, 59, 0.4);
  --dark-color: rgb(36, 36, 36);
  --white-color: rgb(223, 227, 228);
}

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

nav {
  background-color: var(--dark-color);
}

footer {
  background-color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
}


.accordion-button {
  background-color: var(--white-color);
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--dark-color);
  
}

.accordion-button:not(.collapsed) {
  background-color: var(--secondary-color);
  color: var(--dark-color);
}

.accordion-button:hover{
  background-color: rgb(224, 241, 255);
}

.accordion-button:focus,
.accordion-button:active {
  outline: none;
  box-shadow: 0 0 0 3px var(--secondary-color-alpha);
}

.even {
  font-weight: bolder;
}

.odd {
  font-weight: 100;
}

main>.container {
  padding: 60px 15px 0;
}

#content {
  min-height: 90vh;
}


footer {
  padding-right: 1rem;
}

footer .social>a {
  color: var(--white-color);
  opacity: 0.75;
}

footer .social>a:hover {
  opacity: 0.9;
  color: var(--secondary-color);
}

.bsicon {
  color: purple
}

.jsicon {
  color: rgb(226, 211, 4);

}

.html5icon {
  color: orangered
}

.css3icon {
  color: rgb(11, 82, 214)
}

.checklist>li i {
  color: var(--secondary-color);
}

code[class*="language-"],
pre[class*="language-"] {
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
}

/* -- Style the CTA on the app page ---*/
.cta {
  background-color: var(--dark-color);
  color: var(--white-color);
}

.cta h4 {
  color: var(--white-color);
}

.cta h6 {
  color: var(--white-color);
}

.cta a {
  color: var(--secondary-color);
  text-decoration: none;
}

.cta a:hover {
  font-weight: bolder;
  text-decoration: underline;
}