:root {
  --textcolor: #353849;
  --grey: #333;

  --maxwidth: 880px;
  --maxwidthl: 1080px;
  --textcolor-light: #7E808B;
  --mainpadding: 40px;
  font-size: 62.5%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@view-transition {
  navigation: auto;
}

html, body { color: var(--textcolor); font-size: 2.4rem; line-height: 1.4; font-family: "Libertinus", "Times New Roman", Times, serif; }

body {       
  display: grid;
  position: relative;
  left: -60px;
  grid-template-rows: auto;
  grid-template-columns: 60px auto;
  grid-template-areas: "nav main";
  gap: 0;
  width: calc(100% + 60px);
}
body.menu { left: 0; grid-template-columns: 60px calc(100% - 60px); width: 100%; }
body.menu--animated { transition: width 0.3s, left 0.3s; }

.page { grid-area: main; }
main { position: relative; margin: 160px auto 120px; width: 100%; }
body.coverimage main { margin: 0 auto 120px; }

img { display: block; max-width: 100%; height: auto; }
figcaption { background-color: #EEE; padding: 16px 24px; }
figcaption *:last-child { margin-bottom: 0; }

p, ul, ol { margin-bottom: 1rem; }
h1, h2, h3 { margin-bottom: 1.5rem; }
pre { margin-block: 3rem; white-space: pre-wrap;
  word-wrap: break-word; }
pre + pre { margin-top: -2.6rem; }
code { white-space: pre-wrap; word-wrap: break-word; }
a { color: Crimson; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

hr { display: block; margin: 48px 0; border: none; background-color: #333;   height: 1px; color: #333; }

table { margin-bottom: 1rem; border-collapse: collapse; width: 100%;
  max-width: none; /* Prevents shrinking on smaller screens */ }
td, th { border: 1px solid #333; padding: 8px 12px; }
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

article details {
  margin-block: 3rem;
  border: 1px solid black;
  padding: 2rem;
}

article summary {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0;
  font-weight: bold;
  list-style: none;
}

article summary::-webkit-details-marker {
  display: none;
}

article details[open] summary {
  padding: 0 0 3rem 0;
}

article summary::after {
  display: inline-block;
  transform: rotate(45deg);
  transition: 0.3s;
  border: solid;
  border-width: 0 3px 3px 0;
  padding: 4px;
  content: '';
}

article details[open] > summary::after {
  transform: rotate(-135deg);
}

article details ul { margin-left: 2rem; }