/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    3. Allow percentage-based heights in the application
  */
html,
body {
  height: 100%;
}

/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

/*
custom
*/
ul {
  padding-inline-start: 0;
}

h1, h2, h3 {
  margin-block-start: 0;
}

ul {
  font: 1.2em iosevka-light;
  list-style-position: inside;
  padding-bottom: 0.2em;
  list-style: none;
}
ul li::before {
  margin-right: 0.3em;
  content: "•";
  position: relative;
  top: 0.075em;
}
ul li.active::before {
  color: #793327;
}
ul li.with-description {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 125%;
}
ul .li-description {
  font-size: 1em;
  font-family: futura-light;
}

/* li with date */
li .li-spacing {
  display: none;
}
li .li-date {
  display: none;
}

.li-with-date li > .li-with-date-item {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 1.75rem);
}
.li-with-date li > .li-with-date-item .li-spacing {
  display: inline;
  flex-grow: 1;
  border-bottom: dashed 1px #eee;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 0.3em;
}
.li-with-date li > .li-with-date-item .li-date {
  display: inline;
  font-size: 0.9em;
  margin-top: auto;
}

.menu-right ul {
  direction: rtl;
}

.colorset-a {
  background-color: #D6B43E;
  color: #f2f2f2;
}
.colorset-a .section-header {
  color: #793327;
}
.colorset-a .section-header-color {
  color: #793327;
}
.colorset-a .section-date {
  color: #547076;
}
.colorset-a .content-container h1,
.colorset-a .content-container h2,
.colorset-a .content-container h3,
.colorset-a .content-container h4 {
  color: #793327;
}

.colorset-b {
  background-color: #547076;
  color: #f2f2f2;
}
.colorset-b .section-header {
  color: #C2AE93;
}
.colorset-b .section-header-color {
  color: #C2AE93;
}
.colorset-b .section-date {
  color: #793327;
}
.colorset-b .content-container h1,
.colorset-b .content-container h2,
.colorset-b .content-container h3,
.colorset-b .content-container h4 {
  color: #C2AE93;
}

@font-face {
  font-family: "futura";
  src: url("/fonts/futura.woff2") format("woff2"), url("/fonts/futura.woff") format("woff"), url("/fonts/fitura.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "futura-light";
  src: url("/fonts/futura-light.woff2") format("woff2"), url("/fonts/futura-light.woff") format("woff"), url("/fonts/fitura-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "iosevka-light";
  src: url("/fonts/iosevka-light.woff2") format("woff2"), url("/fonts/iosevka-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "iosevka-regular";
  src: url("/fonts/iosevka-regular.woff2") format("woff2"), url("/fonts/iosevka-regular.ttf") format("truetype");
}
.justified-gallery-container {
  background-color: #2f2f2f;
  box-shadow: 0px 0px 2px #2f2f2f;
  margin-bottom: 1em;
}
.justified-gallery-container .justified-gallery-header {
  font-size: 1.5em;
  text-align: right;
  margin: 0;
  padding: 0.7em 0.4em;
  color: #793327;
  border-top: solid 1px #793327;
}

/* globals */
body {
  margin: 0px;
  background-color: #D6B43E;
  font-family: futura-light;
  overflow-x: hidden;
}

#root-container {
  display: flex;
  color: #f2f2f2;
}

.section-header {
  font-family: futura;
  font-weight: 100;
  letter-spacing: 1px;
  margin-top: calc(1.75rem - 0.3em);
  margin-bottom: calc(1.75rem - 0.3em);
}

.section-date {
  position: relative;
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 1.3em;
  text-align: right;
  height: 1em;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

.left-section {
  min-height: 100vh;
  position: relative;
  padding-top: 100px;
  padding-right: 1.75rem;
}
.left-section .section-header {
  text-align: right;
}

.right-section {
  padding: 100px 1.75rem;
}
.right-section hr {
  margin-left: -1.75rem;
}
.right-section {
  min-height: 100vh;
  height: fit-content;
}
.right-section .section-header.right {
  text-align: right;
}

.content-container {
  margin: 1.75rem 0;
  height: fit-content;
}
.content-container h1,
.content-container h2,
.content-container h3,
.content-container h4 {
  font-family: iosevka-regular;
}
.content-container ul {
  text-transform: lowercase;
  margin: -0.4em 0;
}
.content-container ul li {
  margin: 0.2em 0;
}
.content-container h2,
.content-container h3 {
  margin-top: -0.3em;
  margin-bottom: 0.5em;
}
.content-container * + h2 {
  margin-top: 0.6em;
}
.content-container * + h3 {
  margin-top: 1em;
}
.content-container p {
  font-size: larger;
  max-width: 40em;
}

hr {
  height: 1px;
  border: none;
  background-color: #793327;
}

/* links */
a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3%;
  text-underline-offset: 8%;
  text-decoration-color: inherit;
}

.code {
  font-family: iosevka-light;
  font-size: 0.8em;
}

a.code {
  font-size: 0.9em;
  color: #793327;
  background-color: antiquewhite;
  border-radius: 4px;
  padding: 0em 0.2em 0.1em 0.2em;
  border: 1px solid #793327;
}

.pdfobject-container {
  height: 120vh;
}

/* hacks */
/* Safari only */
@supports (background: -webkit-named-image(i)) {
  .content-container h1,
  .content-container h2,
  .content-container h3,
  .content-container h4 {
    letter-spacing: -1px;
  }
}
.right-section > hr {
  margin-left: -1.75rem;
  width: calc(100% + 1.75rem + 1.75rem);
}

.left-section > hr {
  margin-left: calc((max(35vw, 450px) - 500px) * -1);
  width: calc(100% - (max(35vw, 450px) - 500px) * -1 + 1.75rem);
}

.left-section hr.left-overflow {
  width: 100vw;
}

.right-section hr.left-overflow {
  width: calc(100vw - max(35vw, 450px) + 0.5833333333rem);
}

body {
  font-size: 1.1em;
}

#root-container {
  height: fit-content;
  max-width: 100vw;
  overflow-x: hidden;
}

.section-header {
  font-size: 3em;
}

.left-section {
  width: 450px;
  min-width: 500px;
  flex-shrink: 0;
  margin-left: calc(max(35vw, 450px) - 500px);
  border-right: #793327 1px solid;
  border-left: #793327 1px solid;
  box-shadow: 0px 3px 12px #793327;
}

.right-section {
  flex: 1;
  max-width: min(100%, 1400px);
  min-width: 0;
  overflow: hidden;
}

.content-container h2 {
  font-size: 1.4em;
}
.content-container h3 {
  font-size: 1.5em;
}
.content-container p {
  padding: 0 0.2em 1.75rem 0.2em;
  text-align: justify;
}

.content-container > p:first-child {
  margin-top: -0.25em;
}

a:hover.mobile-only {
  text-decoration: inherit;
  cursor: default;
}