@import url(fonts/montserrat.css);
@import url(fonts/tinos.css);
@import url(fonts/frankruhl.css);
@import url(fonts/assistant.css);
body {
  margin: 2em;
  background: #0d1020;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 660px) {
  body {
    margin: 1em;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #ffffff;
    color: #002058;
  }
}

[lang=he] {
  direction: rtl;
  text-align: right;
  font-family: "Assistant", sans-serif;
}

a:link,
a:visited {
  color: #61c0ec;
}
@media (prefers-color-scheme: light) {
  a:link,
  a:visited {
    color: #008cff;
  }
}

a:hover,
a:active {
  color: #d4d6e6;
}
@media (prefers-color-scheme: light) {
  a:hover,
  a:active {
    color: #62b8ff;
  }
}

.width-limited {
  max-width: 650px;
  margin: 0 auto;
}

.flipping-image {
  display: inline-block;
  border-radius: 50%;
  border: 4px solid #002360;
  width: 100px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (max-width: 660px) {
  .flipping-image {
    width: 80px;
  }
}
.flipping-image > * {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.flipping-image > .side-b {
  opacity: 0;
}
.flipping-image:hover:not([force-side=a]):not([disable-hover=true]) > .side-a, .flipping-image[force-side=b] > .side-a {
  opacity: 0;
}
.flipping-image:hover:not([force-side=a]):not([disable-hover=true]) > .side-b, .flipping-image[force-side=b] > .side-b {
  opacity: 1;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 400%;
  text-align: center;
  font-family: "Tinos", sans-serif;
  font-style: italic;
}
@media screen and (max-width: 660px) {
  h1 {
    font-size: 250%;
  }
}
@media screen and (max-width: 420px) {
  h1 > span {
    width: min-content;
  }
}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  text-decoration: none;
  color: #fff;
}
@media (prefers-color-scheme: light) {
  h1 a:link,
  h1 a:visited,
  h1 a:hover,
  h1 a:active {
    color: #002058;
  }
}

h2 {
  font-size: 200%;
}
.main-page h2, .about-page h2 {
  text-align: center;
}

header > .tagline {
  display: flex;
  align-items: center;
  justify-content: center;
}
header > .tagline > span {
  flex-shrink: 0;
  width: fit-content;
  margin: 0 2rem;
  font-size: 140%;
  font-style: italic;
}
@media screen and (max-width: 660px) {
  header > .tagline > span {
    font-size: 110%;
  }
}
@media screen and (max-width: 420px) {
  header > .tagline > span {
    font-size: 100%;
    margin: 0 1rem;
  }
}
header > .tagline > .line {
  width: 100%;
  height: 2px;
  background-color: #fff;
  flex-shrink: 1;
}
@media (prefers-color-scheme: light) {
  header > .tagline > .line {
    background-color: #002058;
  }
}

nav {
  margin: 2em 0 4em 0;
}
nav > ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2em;
}
@media screen and (max-width: 420px) {
  nav > ul {
    font-size: 80%;
  }
}

ul.post-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  --gap: 2em;
  gap: var(--gap);
}
ul.post-list.smaller {
  --gap: 1em;
}
ul.post-list > li {
  width: calc(33% - var(--gap));
  margin-bottom: 3em;
}
ul.post-list > li img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
ul.post-list > li span {
  display: block;
  line-height: 1.2em;
  text-align: center;
}
ul.post-list.smaller > li {
  width: calc(25% - var(--gap));
  margin-bottom: 1em;
}
@media screen and (max-width: 660px) {
  ul.post-list > li {
    width: calc(49% - var(--gap));
  }
  ul.post-list.smaller > li {
    width: calc(33% - var(--gap));
  }
}
@media screen and (max-width: 420px) {
  ul.post-list:not(.smaller) {
    --gap: 0;
  }
  ul.post-list > li {
    width: 80%;
  }
  ul.post-list.smaller > li {
    width: calc(49% - var(--gap));
  }
}

footer {
  text-align: center;
}
footer hr {
  margin: 2em 0 3em 0;
  border: none;
  height: 2px;
  background: #fff;
}
@media (prefers-color-scheme: light) {
  footer hr {
    background: #002058;
  }
}
footer ul.social-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2em;
}
footer .image-credit {
  font-style: italic;
}

.post, .poetry {
  --post-font: Tinos, serif;
  --header-font: Montserrat, sans-serif;
  font-size: 110%;
  text-align: justify;
  font-family: var(--post-font);
  color: #fff;
}
.post[lang=he], [lang=he] .post, .poetry[lang=he], [lang=he] .poetry {
  --post-font: Frank Ruhl Libre, serif;
  --header-font: Assistant, sans-serif;
}
@media (prefers-color-scheme: light) {
  .post, .poetry {
    color: #000000;
  }
}
.post > .post-image, .poetry > .post-image {
  font-size: 91%;
}
.post h2, .poetry h2 {
  font-family: var(--header-font);
}
.post hgroup, .post h2, .poetry hgroup, .poetry h2 {
  text-align: start;
  margin-bottom: 2em;
  color: #fff;
}
@media (prefers-color-scheme: light) {
  .post hgroup, .post h2, .poetry hgroup, .poetry h2 {
    color: #002058;
  }
}
.post hgroup > h2, .post h2 > h2, .poetry hgroup > h2, .poetry h2 > h2 {
  margin-bottom: 0;
}
.post hgroup > .date, .post h2 > .date, .poetry hgroup > .date, .poetry h2 > .date {
  font-style: italic;
}
.post hr, .poetry hr {
  margin: 1.5em auto 1.5em 0;
  border: none;
  width: 3em;
  height: 2px;
  background: #fff;
}
@media (prefers-color-scheme: light) {
  .post hr, .poetry hr {
    background: #000000;
  }
}
.post[dir=rtl] hr, .poetry[dir=rtl] hr {
  margin-left: auto;
  margin-right: 0;
}
.post .separator, .poetry .separator {
  text-align: center;
}
@media screen and (max-width: 660px) {
  .post h2, .poetry h2 {
    font-size: 180%;
  }
}

.post p {
  line-height: 1.4;
}
.post > h3 {
  font-size: 150%;
  margin-bottom: 0;
}
.post > h3 + p {
  margin-top: 0.5em;
}

.post-image {
  margin: 2em 0;
}
.post-image span {
  opacity: 60%;
  font-style: italic;
}
.post-image img {
  max-width: 100%;
}

.side-by-side {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12em;
  row-gap: 3em;
}

.poetry > h2 {
  margin-bottom: 1em;
}
.poetry > ul.contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 100% !important;
}
.poetry > ul.contents > li {
  display: inline-block;
  margin-inline-end: 1.5em;
  margin-bottom: 1em;
}

.poem > hgroup {
  margin-bottom: 1.15em;
}
.poem > hgroup h3, .poem > hgroup p {
  margin: 0;
}
.poem > hgroup p, .poem > hgroup a {
  font-style: italic;
  font-size: 80%;
}
.poem .big-space {
  height: 10em;
}

nav:has(+ .about-page) {
  margin-bottom: 0.5em;
}

.about-cols {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.about-cols > .image-container {
  width: 200px;
  flex-shrink: 0;
}
@media screen and (max-width: 660px) {
  .about-cols > .image-container {
    width: 150px;
  }
}
@media screen and (max-width: 420px) {
  .about-cols > .image-container {
    width: 120px;
  }
}
.about-cols > .image-container > img {
  width: 100%;
  border-radius: 10px;
}
.about-cols > .image-container > .credit {
  display: block;
  margin-top: 0.5em;
  opacity: 0.6;
  font-style: italic;
}
.about-cols > .text-container {
  text-align: justify;
  line-height: 1.4;
}
@media screen and (max-width: 660px) {
  .about-cols > .text-container {
    font-size: 90%;
  }
}
.about-cols > .text-container > p:first-child {
  margin-top: 0;
}
.about-cols > .text-container > p.non-justified {
  text-align: start;
}

/*# sourceMappingURL=wolfe2.css.map */