/* If the screen size is smaller than 450px, change equation styling */
@media (max-width: 450px) {
  .katex {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .katex-display > .katex > .katex-html > .tag {
    position: relative;
    right: -10px;
  }
}
/* If the screen size is smaller than 450px, change equation styling */

/* Change navbar color */
.md-header {
  background-color: #e4efeb;
}
.md-tabs {
  background-color: #e4efeb;
}
[data-md-color-scheme="slate"] {
  .md-header {
    background-color: hsl(158 26% 40% / 1);
  }
  .md-tabs {
    background-color: hsl(158 26% 40% / 1);
  }
}
/* Change navbar color */

/* Increase the logo size */
.md-header__button.md-logo {
  margin: 20px;
  padding: 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.6rem;
}
/* To make anchor links work with the increased logo size:
For PC screens: */
:target {
}
@media (min-width: 1220px) {
  :target {
    --md-scroll-offset: -1.5rem !important;
  }
}
/* Increase the logo size */

/* Post title image settings */
.post-title-image {
  height: auto;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
/* Post title image settings */

/* For YouTube embeds */
.video-wrapper {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}
.video-wrapper > iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* For YouTube embeds */

/* For self-hosted videos */
.post-video {
  display: block;
  width: 100%;
  margin: 1em 0;
}
.post-video > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: #000;
}
/* For self-hosted videos */

/* Group photo settings */
#group-photo {
  border-radius: 10px;
  margin: auto;
  display: block;
}
/* Group photo settings */

/* For index page, posts  */
.post-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 20px;
}
.post {
  margin-bottom: 20px;
  flex: 31%;
  padding: 15px;
  border-radius: 10px;
  background-color: #e4efeb60;
}

@media (max-width: 650px) {
  .post {
    flex: 100%;
  }
}

[data-md-color-scheme="slate"] {
  .post {
    background-color: hsl(158deg 26% 40% / 10%);
  }
}
/* For index page, posts  */

/* For members page  */
.member-wrapper {
  width: 95%;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: #e4efeb60;
  padding: 15px;
  margin-bottom: 20px;
  h3 {
    padding-left: 20px;
    margin: 10px 0px;
  }
}
.member-wrapper:hover {
  background-color: #c7eee042;
  transition-duration: 1s;
}
.member-container {
  display: flex;
  flex-wrap: wrap;
}
.member-photo,
.member-description {
  padding: 15px;
  border-radius: 10px 0px 0px 10px;
}
.member-photo {
  flex: 25%;
  text-align: center;
  border-radius: 10px 0px 0px 10px;
}
.member-description {
  flex: 65%;
  border-radius: 0px 10px 10px 0px;
}
.member-photo img {
  border-radius: 10px 10px 10px 10px;
}
.member-photo p {
  margin-bottom: 0px;
}

@media (min-width: 700px) {
  .member-photo,
  .member-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .member-description > p:first-child {
    margin-top: 0px;
  }
  .member-description > p:last-child {
    margin-bottom: 0px;
  }
}

@media (min-width: 550px) {
  .member-photo img {
    margin: auto;
    width: 85%;
  }
}

@media (max-width: 700px) {
  .member-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0px;
  }
  .member-photo,
  .member-description {
    margin-bottom: 0px;
    flex: 100%;
  }
  .member-photo {
    border-radius: 10px 10px 0px 0px;
    padding-bottom: 0px;
  }
  .member-description {
    border-radius: 0px 0px 10px 10px;
    padding-top: 0px;
  }
}

[data-md-color-scheme="slate"] {
  .member-wrapper {
    background-color: hsl(158deg 26% 40% / 10%);
  }
  .member-wrapper:hover {
    background-color: hsla(158, 26%, 40%, 0.24);
  }
  .md-typeset .past-member-grid > ul > li {
    background-color: hsl(158deg 26% 40% / 10%);
  }
}
.past-member-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 9rem), 1fr)
  ) !important;
}

.md-typeset .past-member-grid > ul {
  display: contents;
}

.md-typeset .past-member-grid > ul > li {
  background-color: #e4efeb60;
  border-radius: 10px;
  display: grid;
  margin: 0;
  padding: 0.8rem;
  text-align: center;
  aspect-ratio: 1 / 1.2;
}

.md-typeset .past-member-grid > ul > li > p {
    overflow: hidden;
    display: block;
    height: inherit;
}

.md-typeset .past-member-grid > ul > li > hr {
  display: none;
}

.md-typeset .past-member-grid > ul > li > :first-child {
  margin-top: 0;
}

.md-typeset .past-member-grid > ul > li > :last-child,
.md-typeset .grid > .card > :last-child {
  margin-bottom: 0;
}

.md-typeset .past-member-grid > ul > li :last-child {
  width: 100%;
}

/* For members page  */

/* For footer logo */
.footer-logo {
  text-align: center;
}
.footer-logo > img {
  height: 52px;
  margin-top: 22px;
}
/* For footer logo */