/* FONT */
@font-face {
  font-family: "Literata";
  src: url(Literata-VariableFont_opsz,wght.ttf) format("truetype");
  font-weight: 300 700;
  font-style: normal;
}

@font-face {
  font-family: "Literata";
  src: url(Literata-Italic-VariableFont_opsz,wght.ttf) format("truetype");
  font-weight: 300;
  font-style: italic;
}


/* BASE */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: "Literata", serif; font-size: 19px; background: #e0e0e0; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; color: black; padding: 1rem; text-align: justify; }
a { text-decoration: none; color: black; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

nav { background: black; display: flex; flex-wrap: wrap; align-items: center; padding-left: 1rem; padding-right: 1rem; }
nav a { color: white; }
nav h1 { flex: auto; margin: 0; padding-top: 1rem; padding-bottom: 1rem; }
nav h1 a { font-size: 2.5rem; font-variant: small-caps; font-family: "Literata"; font-weight: 900; }
nav h1 a:hover { text-decoration: none; }
nav ul a { color: white; padding-left: 0.5rem; }
nav ul { display: flex; flex-wrap: wrap; margin: 0; padding-bottom: 0.5rem; }

header { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 0.5rem; }
header a { margin-left: auto; margin-right: 0; }
header h1 { flex: auto; font-size: 2.0rem; font-weight: 700; margin: 0; font-family: "Literata"; }

.content { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; }

footer { background: black; color: white; text-align: center; padding: 1rem; }
footer a img { width: 1rem; margin-inline: 1.5rem; }

hr { border: none; border-top: 1px solid lightgray; }

img { max-width: 100%; height: auto; }

/* PUBLICATIONS */
article .info { padding-left: 0; padding-right: 0; }
article .head { display: flex; flex-wrap: wrap; align-items: center; }
article .title { font-size: 1.0rem; font-weight: 600; font-family: "Literata"; }
article .auth_pub { font-size: 0.8rem; font-style: italic; padding-bottom: 0rem; }
article .journal_pub { font-size: 0.8rem; color: slategray; padding-bottom: 0rem; }
article .uni_pub { font-size: 0.8rem; color: slategray; padding-bottom: 0rem; }

p::first-letter { font-size: 1.5rem; font-weight: bold; }

/* SHELF */
.shelf { padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); text-align: left; }
.shelf a { display: flex; flex-direction: column; gap: 0.2rem; }
.shelf img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }
.shelf .t { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.shelf .m { font-size: 0.7rem; font-style: italic; font-weight: 400; color: slategray; }
.shelf .stars { font-size: 0.7rem; letter-spacing: 0.05em; }
.more { font-size: 0.8rem; text-align: right; margin-top: 1rem; }

/* TABLET */
@media only screen and (max-width: 1000px) {
  html {
    font-size: 23px;
  }
}

/* PHONE */
@media only screen and (max-width: 600px) {
  html {
    font-size: 17px;
    padding: 0.5rem;
  }
  body {
    padding: 0.5rem;
  }
  nav h1 a {
    font-size: 1.8rem;
  }
  nav ul {
    gap: 0.25rem;
  }
  nav ul a {
    padding-left: 0.25rem;
  }
  header h1 {
    font-size: 1.5rem;
  }
  .content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}