:root {
  --je-primary-color: #53688f;
  /* theme-100 or theme-200 // theme-800 or theme-900 ? */
  --je-secondary-color: #ffcee4;
  /* theme-core or theme-500 or theme-600 */
  --je-light-color: #dfe3e4;
  --je-dark-color: #1b1b1b;
}

/* Sticky Footer */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

/* End Sticky Footer */

footer,
nav.navbar {
  flex-shrink: 0;
  background-color: var(--je-primary-color);
  color: var(--je-light-color);
}

footer .bi {
  font-size: 2rem;
  padding-left: .5rem;
  color: var(--je-light-color);
  transition: color 0.15s ease-in;
}

footer .bi:hover {
  color: var(--je-secondary-color);
}

.nav-link.active:hover {
  color: var(--je-secondary-color);
}

.devicons {
  font-size: 3rem;
}

.bi-check-square-fill {
  color: var(--je-secondary-color);
}

.app-logo {
  max-width: 400px;
  border-radius: 15px;
  /* box-shadow: ; */
}

.code-header {
  font-size: 1.25rem;
  transition: all 0.25s;
}

.code-header:active,
.code-header:focus {
  box-shadow: none;
}

.code-header.collapsed {
  background-color: var(--je-primary-color);
  color: var(--je-light-color);
}

.code-header.collapsed:hover,
.code-header.collapsed:focus,
.code-header:not(.collapsed) {
  background-color: var(--je-secondary-color);
  color: var(--je-dark-color);
}

.code-header.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfe3e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.code-header.collapsed:hover::after,
.code-header.collapsed:focus::after,
.code-header:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b1b1b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.code-toolbar > pre {
  max-height: 50vh;
}

.accordion-collapse > .row > .col-lg-4 {
  max-height: 50vh;
  overflow-y: auto;
}

.personal-link > img {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.personal-link:hover > img,
.personal-link:focus > img,
.personal-link:active > img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}