.masthead img {
  width: 12vw;
  border-radius: 8px;
}

.codewars {
  width: 1rem;
  height: 1rem;
  margin-bottom: 1px;
  transition: filter ease-in-out 200ms;
  vertical-align: sub !important;
  filter: opacity(80%);
}

.codewars:hover {
  filter: opacity(100%);
}

.navbar-translucent {
  opacity: 75%;
  transition: opacity ease-in-out 250ms;
}

.navbar-translucent:active,
.navbar-translucent:hover {
  opacity: 100%;
}

.container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.masthead {
  text-align: center;
  width: 100%;
  /* height: 50vh; */
  padding-top: 15vh;
  padding-bottom: 15vh;

  background: url("/Resources/img/masthead-tile.png");
}

.masthead *:not(img) {
  color: white;
  mix-blend-mode: overlay;
}

.dark .masthead *:not(img) {
  color: black;
  mix-blend-mode: overlay;
}

blockquote.blockquote p {
  border-left: 1px solid black;
  padding-left: 1rem;
}

#displayModeSwitch,
label[for="displayModeSwitch"] {
  cursor: pointer;
  user-select: none;
}

body.dark {
  background-color: #252525 !important;
  color: #eeeeee !important;
}

#displayModeSwitch {
  border-color: #659999 !important;
}

#displayModeSwitch:focus {
  box-shadow: 0 0 0 0.25rem #65999940 !important;
}

body:not(.dark) #displayModeSwitch {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23659999AA'/%3e%3c/svg%3e");
}
body:not(.dark) #displayModeSwitch:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23659999'/%3e%3c/svg%3e");
}

body.dark #displayModeSwitch {
  background-color: #659999 !important;
}

body.dark .card {
  background-color: #323232 !important;
}

body.dark .modal-content {
  background-color: #252525;
}

body.dark blockquote.blockquote p {
  border-left: 1px solid #aaaaaa;
}

body.dark .modal-footer {
  border-top: 1px solid #202020 !important;
}

body.dark .modal-header {
  border-bottom: 1px solid #202020 !important;
}

body.dark .btn-close {
  filter: invert(1);
}

.cards.grid {
  display: grid;
  flex-direction: row;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2rem;
  grid-auto-flow: dense;
}

/* Force a 2-column grid on larger displays */

@media (min-width: 512px) {
  .cards.grid {
    grid-template-columns: repeat(2, minmax(256px, 1fr));
  }
}

.expanding-navbar-item-inner {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

@media (max-width: 992px) {
  .expanding-navbar-item .link-desc {
    margin-left: 0.5rem;
  }
}

/* Only show the link descriptions *if* the navbar is in mobile-mode */
@media (min-width: 992px) {
  .expanding-navbar-item:hover .link-desc {
    margin-left: 0.5rem;
  }

  .link-desc {
    overflow: hidden;
  }

  .expanding-navbar-item .link-desc {
    width: 0;
  }

  .expanding-navbar-item:hover .link-desc {
    transition: width ease-in-out 200ms;
    width: 100%;
  }
}

.cards.grid {
  grid-auto-rows: unset !important;
}

.cards.grid.singular {
  grid-template-columns: repeat(1, minmax(256px, 1fr)) !important;
  max-width: 50%;
  margin: 0 auto;
}