:root {
  --base-bg-color: #f0f0f0;
  --header-bg-color: #333333;

  --base-font-family: "Helvetica Neue", "Nimbus Sans L", Arial, Helvetica, sans-serif;
  --base-font-size: 1rem;
  --base-line-height: 2;
  --base-text-color: #262727;

  --content-width: 60rem;
  --content-spacing: 1rem;

  --title-font-family: "Yanone Kaffeesatz", "Helvetica Neue", "Nimbus Sans L", Arial, Helvetica, sans-serif;
  --title-font-size: 3.5rem;
  --title-line-height: 1;
  --title-text-color: #e0e0e0;

  --section-title-font-family: "Yanone Kaffeesatz", "Helvetica Neue", "Nimbus Sans L", Arial, Helvetica, sans-serif;
  --section-title-font-size: 2rem;
  --section-title-line-height: 1.5;
  --section-title-text-color: #b5afa8;

  --link-title-font-family: "Yanone Kaffeesatz", "Helvetica Neue", "Nimbus Sans L", Arial, Helvetica, sans-serif;
  --link-title-font-size: 1.2rem;
  --link-title-line-height: 1.5;
  --link-title-text-color: #655c54;

  --book-title-font-family: "Yanone Kaffeesatz", "Helvetica Neue", "Nimbus Sans L", Arial, Helvetica, sans-serif;
  --book-title-font-size: 1.3rem;
  --book-title-line-height: 1.5;
  --book-title-text-color: #655c54;
}

*,
*:before,
*:after {
  position: relative;

  box-sizing: border-box;

  margin: 0;
  padding: 0;

  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
  font-style: normal;
  font-weight: normal;

  line-height: var(--base-line-height);
  vertical-align: baseline;

  color: var(--base-text-color);
}

.bold {
  font-weight: bold;
}

html {
  width: 100%;
  height: 100%;

  overflow-y: scroll;

  font-size: 100%;
}

body {
  width: 100%;
  height: 100%;

  background-color: var(--base-bg-color);
}

header {
  display: flex;
  align-items: center;
  justify-content: center;

  column-gap: var(--content-spacing);

  width: 100%;
  min-height: 9rem;

  padding: var(--content-spacing);

  background-color: var(--header-bg-color);
}

header #logo {
  height: 7rem;
}

header #title {
  font-family: var(--title-font-family);
  font-size: var(--title-font-size);
  font-weight: bold;

  line-height: var(--title-line-height);

  color: var(--title-text-color);
  text-transform: uppercase;
}

section {
  max-width: var(--content-width);

  margin: var(--content-spacing) auto;
  padding-inline: var(--content-spacing);
}

footer {
  width: 100%;

  margin-top: calc(var(--content-spacing) * 2);

  background-color: var(--header-bg-color);
}

footer div {
  display: flex;
  align-items: center;
  justify-content: center;

  column-gap: var(--content-spacing);

  max-width: var(--content-width);

  margin: 0 auto;
  padding: var(--content-spacing);
}

footer span, a {
  flex-grow: 1;
  font-family: var(--title-font-family);
  font-size: calc(var(--base-font-size) * 1.25);

  line-height: 1;

  color: var(--title-text-color);
}

footer span:first-child {
  text-align: start;
}

footer span:last-child {
  text-align: end;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  filter: contrast(0.25);
  text-decoration: underline;
}

#memoriam {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 1rem;
}

#memoriam span, #memoriam a {
  font-family: var(--title-font-family);
  font-size: 1.5rem;
  font-weight: normal;

  line-height: 1.25;

  color: var(--header-bg-color);
}

#memoriam #cross {
  font-size: 3.25rem;
}

#baroja {
  width: 100%;
  height: auto;

  margin: var(--content-spacing) auto;

  line-height: 1;
  text-align: center;
}

#baroja img {
  width: 50%;
}

h2::before {
  position: absolute;
  inset: 50% 0;

  content: "";

  height: 1px;

  background-color: var(--section-title-text-color);
}

h2 span {
  margin-inline-start: calc(var(--content-spacing) * 2);
  padding-inline: var(--content-spacing);

  background-color: var(--base-bg-color);

  font-family: var(--section-title-font-family);
  font-size: var(--section-title-font-size);
  font-weight: bold;

  color: var(--section-title-text-color);
}

p {
  text-align: justify;
}

p:not(:last-child) {
  margin-block-end: var(--content-spacing);
}

#links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: calc(var(--content-spacing));
  column-gap: calc(var(--content-spacing));

  list-style: none;
}

.link > a {
  display: block;

  text-decoration: none;
}

.link > a:hover img {
  filter: saturate(2);
}

.link > a:hover p {
  filter: contrast(0.25);
  text-decoration: underline;
}

.link img {
  display: block;

  width: 100%;
  height: auto;
}

.link p {
  margin-block-end: 0;

  text-align: start;
}

.link .title {
  overflow: hidden;

  text-overflow: ellipsis;
  text-wrap: nowrap;

  font-family: var(--link-title-font-family);
  font-size: var(--link-title-font-size);

  line-height: var(--link-title-line-height);

  color: var(--link-title-text-color);
}

.link .url {
  overflow: hidden;

  text-overflow: ellipsis;
  text-wrap: nowrap;

  font-size: calc(var(--base-font-size) / 1.5);
}

#tweets {
  margin-bottom: -10px;

  column-count: 2;

  list-style: none;
}

.tweet:first-child > div {
  margin-top: 0 !important;
}

.tweet blockquote {
  display: block;

  margin-block: var(--content-spacing);
  padding: var(--content-spacing);

  background-color: white;
  border: 1px solid #cfd9de;
  border-radius: 12px;

  break-inside: avoid;

  text-align: left;
  line-height: 1;

  font-weight: bold;
}

.tweet:first-child > blockquote {
  margin-top: 0 !important;
}

.tweet blockquote > p {
  font-size: 1.25rem;
  line-height: 1.25;
  text-align: left;
}

.tweet blockquote > p a {
  font-size: 1.25rem;
  line-height: 1.25;

  text-align: left;
  text-decoration: none;

  color: #006fd6;
}

.tweet blockquote > p a:hover {
  text-decoration: underline;
}

.tweet blockquote > a {
  display: block;

  color: #536471;
  text-decoration: none;
}

#books {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: calc(var(--content-spacing) * 2);
  column-gap: calc(var(--content-spacing) * 2);

  list-style: none;
}

.book {
  display: grid;
  grid-template-columns: min-content auto;
  column-gap: var(--content-spacing);
}

.book .cover {
  overflow: hidden;

  width: 12rem;

  border-radius: 2px 3px 3px 2px;
  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 1.5px,
    rgba(0, 0, 0, 0.1) 1px 3px 4px,
    rgba(0, 0, 0, 0.08) 0px 6px 8px,
    rgba(0, 0, 0, 0.06) 0px 12px 16.4px,
    rgba(0, 0, 0, 0.04) 0px 30px 45px
}

.book .cover::before {
  position: absolute;
  inset: 1px;
  z-index: 1;

  content: "";

  border-radius: 1px 2px 2px 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 1.5%,
    rgba(255, 255, 255, 0.1) 2.25%,
    rgba(0, 0, 0, 0.1) 3.25%,
    rgba(255, 255, 255, 0.1) 4.25%,
    rgba(244, 244, 244, 0) 8%
  );
}

.book .cover::after {
  position: absolute;
  inset: 0px;
  z-index: 1;

  content: "";

  border-radius: 2px 3px 3px 2px;
  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
}

.book .cover img {
  display: block;

  width: 100%;
  height: auto;
}

.book h3 {
  margin-block-end: calc(var(--content-spacing) / 2);

  font-family: var(--book-title-font-family);
  font-size: var(--book-title-font-size);

  line-height: var(--book-title-line-height);

  color: var(--book-title-text-color);
}

.book h3:has(+ h4) {
  margin-block-end: 0;
}

.book h4 {
  margin-block-end: calc(var(--content-spacing) / 2);

  font-family: var(--book-title-font-family);
  font-size: calc(var(--book-title-font-size) / 1.125);

  line-height: var(--book-title-line-height);

  color: var(--book-title-text-color);
}

.book p {
  margin-block-end: 0;

  text-align: start;
}

.book p.author:has(+ p:not(.author)) {
  margin-block-end: calc(var(--content-spacing) / 2);
}

.book p span {
  font-weight: bold;

  color: var(--book-title-text-color);
}

@media only screen and (max-width: 50rem) {
  #baroja img {
    width: 75%;
  }

  #links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 40rem) {
  #baroja img {
    width: 100%;
  }

  #links {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .link > a > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    column-gap: calc(var(--content-spacing) / 2);

    align-items: center;
  }
}

@media only screen and (max-width: 50rem) {
  #tweets {
    column-count: 1;
  }
}

@media only screen and (max-width: 50rem) {
  .book .cover {
    width: 7rem;
  }
}

@media only screen and (max-width: 40rem) {
  @media (orientation: portrait) {
    #books {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  .book .cover {
    width: 9rem;
  }
}