@charset "utf-8";

/* Webfonts */
@font-face {
  font-family: "Unistra A";
  src: url("../fonts/UnistraA-Regular.woff2") format("woff2"),
    url("../fonts/UnistraA-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unistra A";
  src: url("../fonts/UnistraA-Bold.woff2") format("woff2"),
    url("../fonts/UnistraA-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unistra A";
  src: url("../fonts/UnistraA-Italic.woff2") format("woff2"),
    url("../fonts/UnistraA-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --padding: 1.875rem;
  --block-padding: calc(var(--padding) / 2);
  --color-black: #030303;
  --color-near-black: #363636;
  --color-gray-dark: #515151;
  --color-gray: #767676;
  --color-gray-light: #e9e9e9;
  --color-white: #fff;
  --color-yellow-dark: #6c5a32;
  --color-yellow: #8c7132;
  --color-yellow-light: #feffd8;
  --color-green-dark: #2d5a3c;
  --color-green: #387446;
  --color-green-light: #bcf5d0;
  --color-blue-dark: #1b476e;
  --color-blue: #175f9f;
  --color-blue-light: #b7d8f7;
  --color-red-dark: #723750;
  --color-red: #a63f45;
  --color-red-light: #f3d6d8;
  --color-text: var(--color-near-black);
  --color-text-gray: var(--color-gray-dark);
  --color-background: var(--color-gray-light);
  --font-family-serif: "Newsreader", Georgia, serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-sans: "Unistra A", Trebuchet, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

/* BROWSERS */

/* Works on Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Works on Chrome, Edge, and Safari */

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  border: none;
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  color: var(--text);
  background: var(--color-background);
  background: var(--background);
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  font-size: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  object-fit: contain;
}
body {
  padding: var(--padding);
  margin: 0 auto;
  font-size: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: var(--padding);
}
li:not(.block li) {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
a.link-full:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
a[href^="http://"]:not(.block--image__link, [href*="localhost"], [href*="culturesvisuelles.org"]):after,
a[href^="https://"]:not(.block--image__link, [href*="localhost"], [href*="culturesvisuelles.org"]):after
{
  content: "↗︎";
  font-family: var(--font-family-sans);
  font-size: smaller;
}
strong,
b {
  font-weight: 600; /* Semi-bold */
}
em,
i {
  font-style: italic;
}
textarea {
  position: absolute;
  width: auto;
  height: auto;
  max-height: 75vh;
  appearance: none;
  border: none;
  outline: none;
  resize: none;
  padding: var(--block-padding);
  outline: 1px solid var(--color-black);
}
blockquote {
  font-weight: 200; /* Extra-light */
  padding-left: 1rem;
}
pre,
code {
  font-family: monospace;
  white-space: pre;
  font-size: 80%;
}
small,
.small {
  font-size: 12px; /* 0.75rem */
  line-height: 1.333;
}
hr {
  border: none;
  border-top: 1px solid var(--color);
  margin: 0.45em 0 0.55em;
  opacity: 0.5;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden {
  display: none !important;
}

[disabled],
.disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-col {
  flex-direction: column;
}

.fixed {
  position: fixed;
}
.top {
  top: var(--padding);
}
.left {
  left: var(--padding);
}
.right {
  right: var(--padding);
}
.bottom {
  bottom: var(--padding);
}

.z-max {
  z-index: 999 !important;
}

.space-x-1 > * + * {
  margin-left: 1px;
}
.rotate-180 {
  -webkit-transform-origin: center;
  -webkit-transform-origin: center;
  transform: rotate(180deg);
  transform: rotate(180deg);
}

.grid {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.4' width='1' height='1' fill='black'/%3E%3C/svg%3E");
}

/* Icons */
.icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Buttons */
button,
.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  background: var(--color-white);
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem 1rem;
  height: 2.8125rem;
}
.btn--icon {
  width: 2.8125rem;
  padding: 0.65625rem;
}
.btn--radio {
  position: relative;
  width: 2.8125rem;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:not(.flex-col) .icon + * {
  margin-left: 0.5em;
}
.btn.flex-col .icon + * {
  margin-top: 0.5em;
}
.btn--radio input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  outline: 0;
  color: var(--color-text);
  background: var(--color-bg);
}
.btn--radio input[type="radio"]:before {
  content: "█";
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: inherit;
  font-family: monospace;
  font-size: 32px;
  line-height: 44px;
  text-align: left;
  padding-left: 23px;
  box-sizing: border-box;
  clip-path: circle(10.5px);
}
.btn--radio input[type="radio"]:checked:after {
  content: "";
  display: block;
  width: 0.625rem; /* 10px */
  height: 0.625rem; /* 10px */
  background: var(--color-black);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.btn--radio input[type="radio"] ~ label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

/* Backlink */
.backlink {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform-origin: top left;
  transform: scale(0.75) translateX(-100%);
}
.backlink:target {
  display: flex;
}

/* Colors */
.text-black {
  color: var(--color-black);
}
.text-near-black {
  color: var(--color-near-black);
}
.text-gray-dark,
.gray {
  color: var(--color-gray-dark);
}
.text-gray {
  color: var(--color-gray);
}
.text-white {
  color: var(--color-white);
}
.text-yellow-dark,
.yellow {
  color: var(--color-yellow-dark);
}
.text-yellow {
  color: var(--color-yellow);
}
.text-green-dark,
.green {
  color: var(--color-green-dark);
}
.text-green {
  color: var(--color-green);
}
.text-blue-dark,
.blue {
  color: var(--color-blue-dark);
}
.text-blue {
  color: var(--color-blue);
}
.text-red-dark,
.red {
  color: var(--color-red-dark);
}
.text-red {
  color: var(--color-red);
}

.bg-white,
.white {
  background-color: var(--color-white);
}
.bg-gray-light,
.gray {
  background-color: var(--color-gray-light);
}
.bg-yellow-light,
.yellow {
  background-color: var(--color-yellow-light);
}
.bg-green-light,
.green {
  background-color: var(--color-green-light);
}
.bg-blue-light,
.blue {
  background-color: var(--color-blue-light);
}
.bg-red-light,
.red {
  background-color: var(--color-red-light);
}

/* Header */
#header {
  height: 2.8125rem; /* 45px */
  margin-bottom: 3rem;
  z-index: 900;
  color: var(--color-text);
  font-size: 22px; /* 1.375rem */
}
#nav > a {
  position: relative;
  margin-right: 5px;
}
#nav .btn {
  font-weight: bold;
  padding: 0.4rem 0.75rem;
  width: 10.3125rem;
}
#nav-btn {
  flex: 0;
  position: relative;
}
#nav-btn .icon {
  margin: 0;
}
#nav-btn .icon-close {
  position: absolute;
  top: 0.65625rem;
  left: 0.65625rem;
  background-color: var(--color-white);
}
#menu {
  font-size: 22px; /* 1.375rem */
  flex-direction: row;
  align-items: flex-start;
  position: fixed;
  top: calc(var(--padding) + 2.8125rem);
  left: var(--padding);
  right: 0;
  margin-top: 5px;
  overflow-x: auto;
}
#menu li {
  position: relative;
  display: inherit;
  background: var(--color-white);
  height: 100%;
  max-height: 2.8125rem;
  margin-right: 1px;
  margin-bottom: 1px;
  white-space: pre;
}
#menu li:nth-child(1) {
  z-index: 10;
}
#menu li:nth-child(2) {
  z-index: 9;
}
#menu li:nth-child(3) {
  z-index: 8;
}
#menu li:nth-child(4) {
  z-index: 7;
}
#menu li:nth-child(5) {
  z-index: 6;
}
#menu li:nth-child(6) {
  z-index: 5;
}
#menu li > a {
  padding: 0.5rem 1rem;
}
#menu li:not(.active),
.breadcrumb a[aria-current] {
  color: var(--color-gray);
}
#preview {
  opacity: 1;
  transform: translateY(0);
  position: absolute;
  z-index: 999;
  width: 25rem;
  background-color: #fff;
  border: 1px solid #000;
}
#preview > div {
  margin: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#preview > div * {
  color: #000;
  font-family: var(--font-family-serif);
  font-size: 16px;
  line-height: 1.5;
}
@media (hover: hover) {
  .btn:not([disabled]):hover,
  #header a:hover {
    background: var(--color-text);
    color: var(--color-white);
  }
}
@media (max-width: 63.9375rem) {
  .btn[aria-expanded="true"] {
    background: var(--color-text);
    color: var(--color-white);
  }
  #nav-btn[aria-expanded="true"] .icon-close {
    background-color: transparent;
  }
  #nav-btn[aria-expanded="true"] .icon-menu {
    visibility: hidden;
  }
}
.btn:not([disabled]):active,
#header a:active {
  background: var(--color-black);
  color: var(--color-white);
}
#menu-login {
  position: absolute;
  top: 2.8125rem;
  right: 0;
  margin-top: 5px;
  margin-right: 1px;
  display: none;
}
#menu-login li {
  white-space: nowrap;
}
#login {
  padding: 0.5rem;
}
#toggle-history[aria-expanded="true"] .rotate-180,
#login[aria-expanded="true"] .rotate-180 {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
#login[aria-expanded="true"] + #menu-login {
  display: initial;
}
a:focus,
button:focus {
  outline: 1px solid var(--color-text);
  z-index: 999;
}

@media (max-width: 21.5625rem) {
  /* < 345px */
  #nav {
    transform-origin: top left;
  }
  #header > div {
    transform-origin: top right;
  }
  #nav,
  #header > div {
    transform: scale(0.889); /* 40/45 */
  }
  #menu {
    top: calc(var(--padding) + 1rem);
    left: calc(var(--padding) - 1.875rem);
  }
}

/* Breadcrumb */
.breadcrumb {
  position: fixed;
  z-index: 999;
  top: calc(var(--padding) + 3.125rem - 1px);
  left: 0;
  right: 0;
  padding-right: var(--padding);
  padding-left: var(--padding);
  padding-top: 1px;
  padding-bottom: 0.875rem;
  overflow-x: auto;
  display: none;
}
.breadcrumb ol {
  display: flex;
  width: max-content;
}
.breadcrumb ol > li:nth-child(1),
.breadcrumb ol > li:nth-child(2) {
  display: none;
}
.breadcrumb ol > li {
  margin-right: 1px;
  margin-bottom: 1px;
  line-height: 1.25;
}
.breadcrumb ol > li > a {
  display: inline-block;
  background: var(--color-white, #fff);
  padding: 0.05em 0.5em;
  min-height: 1.875rem; /* 30px */
}

/* Headings */
h1,
.h1 {
  font-family: var(--font-family-serif);
  font-size: calc(2.5rem + (80 - 40) * ((100vw - 20rem) / 1440));
  font-size: clamp(
    2.5rem,
    calc(2.5rem + (80 - 40) * ((100vw - 20rem) / 1440)),
    5rem
  ); /* 40px -> 80px */
  font-weight: normal;
  line-height: 1.125;
  color: inherit;
  margin-bottom: 0.5em;
  max-width: 10em;
  letter-spacing: -0.01em;
}
.h1 {
  font-size: 4.5rem;
}

h2,
.h2 {
  font-size: 22px; /* 1.375em */
  font-weight: 600; /* Semi-bold */
  line-height: 1.25; /* 20px */
  margin-bottom: 0.5em;
}
h3,
.h3 {
  /* font-size: .75rem; /* 12px */
  font-size: 16px; /* 1rem */
  line-height: 1.5; /* 18px */
  margin-bottom: 0.5em;
}

/* Date */
.date {
  margin-top: -2rem;
  margin-bottom: 3rem;
  font-size: 16px; /* 1rem */
}

/* Blocks */
.blocks {
  position: absolute;
}
.block--options {
  position: relative;
  justify-content: center;
  z-index: 999 !important;
}
.block--options > div {
  position: relative;
  justify-content: center;
  width: 100%;
  font-size: 25.6px; /* 1.333rem */
}
.block--options .btn {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: none;
  outline: 1px solid var(--color-black);
}
.block--options .btn + .btn {
  margin-left: 1px;
}
.block {
  color: var(--color, inherit);
  background-color: var(--background-color, inherit);
  position: absolute;
  font-family: var(--font-family-serif);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 1rem 1rem 0;
}
.block li {
  list-style-position: inside;
}
.block::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--padding));
  right: calc(-1 * var(--padding));
  visibility: hidden;
  z-index: -1;
}
.block--text,
.block--page {
  width: 16em;
  padding: var(--block-padding);
}
.block--text p + *,
.block--text blockquote + *,
.block--text ul + *,
.block--text ol + * {
  margin-top: 1em;
}
.block--text p a[href^="#"] {
  background-color: var(--background);
}
.block--text p a[href^="#"]:hover {
  border-bottom: 1px solid currentColor;
}
.note {
  cursor: pointer;
  font-weight: 600; /* Semi-bold */
}
.block .block__category {
  display: inline;
  font-weight: 600; /* Semi-bold */
  font-size: inherit;
}
.block .block__category::after {
  content: " |";
  white-space: pre;
  display: inline-block;
  font-weight: normal;
}
.block .block__title {
  display: inline;
  font-weight: normal;
  font-size: inherit;
}
.block--image {
  position: absolute;
  display: flex;
  height: auto !important;
}
.block--image figure {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease-in-out;
}
.block--image figure img {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.block--image__link-input {
  padding: 0.5rem;
  border-radius: 0;
  border: none;
  width: 100%;
}
.block--subpage-cover {
  height: auto !important;
}
@media (hover: hover) {
  .block--subpage:hover {
    color: var(--background-color);
    background-color: var(--color);
  }
}
.block--subpage a:focus {
  outline: 0;
}
.block--subpage a:focus::before {
  outline: 1px solid var(--color);
}
input[type="file"] {
  font-family: var(--font-family-sans);
  font-size: 20px;
  width: 100%;
  margin: calc((12rem - 45px) / 2) var(--padding);
}
::-webkit-file-upload-button {
  display: inline-block;
  font: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-text);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  height: 2.8125rem;
  margin-right: 1em;
}
::file-selector-button {
  display: inline-block;
  font: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-text);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  height: 2.8125rem;
  margin-right: 1em;
}

.block--image button#cover {
  position: absolute;
  top: -50px;
  left: 0;
  transform-origin: bottom left;
  transform: scale(0.666);
}
.block iframe {
  display: block;
  margin: calc(-1 * var(--block-padding));
  width: calc(100% + var(--block-padding) * 2) !important;
  border: none;
}
/* Hack to fix vimeo player size inside block */
/* .block [style*="padding:56.25%"] {
  padding-top: calc(
    56.25% + (var(--block-padding) * 2) * 56.25 / 100
  ) !important;
}
.block [style*="padding:78.6%"] {
  padding-top: calc(
    78.6% + (var(--block-padding) * 2) * 78.6 / 1 00
  ) !important;
}
.block [style*="padding:78.69%"] {
  padding-top: calc(
    78.69% + (var(--block-padding) * 2) * 78.69 / 100
  ) !important;
} */

.grid .block:hover {
  outline: 1px solid var(--color-black);
  cursor: pointer;
}
.grid .breadcrumb {
  display: none;
}
.grid .block iframe {
  padding: var(--block-padding);
}
.block iframe + * {
  margin-top: var(--padding);
}

.selected {
  outline: 1px solid var(--color-black);
}
/* 4 handles (old) */
/*
.selected::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 7px solid;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAQAAAADHm0dAAAAMklEQVR42mMw+48MGVAAqhyQiwCYSuGAEqUYEA5o5wDiQwAuyIAJ0ORGlTKMpiziQwAASwBc9L8IEqMAAAAASUVORK5CYII=")
    7;
  border-image-outset: 4px;
}
*/
.selected::before {
  content: "";
  display: block;
  position: absolute;
  top: 33%;
  bottom: 33%;
  right: -3px;
  width: 5px;
  background: var(--color-black);
  outline: 1px solid white;
  cursor: col-resize;
  border-radius: 1.5px;
  transition: background 0.2s ease-out;
}

/* Edit */
.edit {
  outline: 1px solid var(--color-black);
}
.edit::before {
  border-image: none;
  border-color: transparent;
}

#z-index {
  top: 8rem;
  bottom: 8rem;
}
#z-index,
#colors {
  z-index: 800;
  justify-content: center;
}
#colors {
  left: var(--padding);
  right: var(--padding);
  bottom: var(--padding);
}
#header #colors {
  position: initial;
  margin-left: 5px;
}

#md-buttons {
  position: absolute;
  top: -50px;
  left: 0;
  transform-origin: bottom left;
  transform: scale(0.666);
}
#md-buttons > * + * {
  margin-left: 1.5px;
}

/* Media queries */
@media (max-width: 29.9375rem) {
  /* < 480px */
  #edit {
    display: none;
  }
}
@media (max-width: 74.938rem) {
  /* < 1199px */
  #menu:not(.expanded) {
    display: none;
  }

  #menu {
    right: 0;
    overflow-x: auto;
  }
}
@media (min-width: 75rem) {
  /* >= 1200px */
  #nav-btn {
    position: fixed;
    left: 200px;
    max-width: 2.8125rem;
    z-index: -1;
  }
  #nav-btn:active,
  #nav-btn:focus {
    outline-offset: -1px;
  }
  #header .icon-close {
    display: none;
  }
  #menu {
    position: initial;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 0;
    margin-bottom: 0;
    align-items: flex-start;
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.25, 0, 0, 1);
    max-height: 2.8125rem;
    clip-path: polygon(
      -1px -1px,
      calc(100% + 1px) -1px,
      calc(100% + 1px) calc(100% + 1px),
      -1px calc(100% + 1px)
    );
    overflow-x: initial;
  }
  #menu li {
    will-change: margin;
    transition: margin 0.6s cubic-bezier(0.25, 0, 0, 1);
  }
  #menu li a {
    will-change: padding;
    transition: padding 0.9s cubic-bezier(0.25, 0, 0, 1);
  }
  .breadcrumb {
    display: block;
  }
  .breadcrumb ol {
    will-change: clip-path;
    clip-path: polygon(
      -1px -1px,
      calc(100% + 1px) -1px,
      calc(100% + 1px) 2rem,
      -1px 2rem
    );
    transition: clip-path 0.6s cubic-bezier(0.25, 0, 0, 1) 0.3s;
  }
  .breadcrumb li a {
    will-change: padding;
    transition: padding 0.9s cubic-bezier(0.25, 0, 0, 1) 0.3s;
  }
  #header.collapsed .breadcrumb ol {
    clip-path: polygon(-1px -1px, -1px -1px, -1px 2rem, -1px 2rem);
  }
  #header.collapsed .breadcrumb li a {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  #header.collapsed #menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  #header.collapsed #menu:not(.expanded) li {
    margin-right: -8rem;
    border-right: 1px solid var(--background);
  }
  #header.collapsed #menu:not(.expanded) li a {
    padding-left: 0;
    padding-right: 0.5rem;
  }
  .block--text:not(textarea),
  .block--page {
    height: auto !important;
  }
}

/* ================= ADRIEN ================= */

.highlight {
  outline: 1px solid #000;
}

.note {
  scroll-margin-top: 50vh;
  scroll-margin-right: 40vw;
  scroll-margin-left: 40vw;
}

#colors {
  pointer-events: none;
  z-index: 999;
}
#colors .btn {
  pointer-events: all;
}

#selection {
  top: 0;
  left: 0;
  position: absolute;
  width: 1000vw;
  height: 1000vh;
}
#selection .block {
  pointer-events: none;
}
#selection .block {
  z-index: 990 !important;
}

/* HISTORY */

#history {
  position: fixed;
  z-index: 990;
  top: 8rem;
  right: 6rem;
  border: 1px solid #000;
}
#history__header {
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 16px;
  padding: 0.5rem 0;
}
#history__actions {
  display: flex;
}
#history__actions button {
  height: 2rem;
}
#history__actions button:not(:last-child) {
  border-right: 1px solid #000;
}
#history__actions button img {
  height: 0.8rem;
}
#history li {
  text-align: center;
  background-color: #fff;
}
#history button {
  width: 100%;
}
#history button.active {
  background-color: #eee;
}
#history button.after {
  opacity: 0.5;
}
#history button:hover {
  background-color: #eee;
}
#history li:not(:last-child) {
  border-bottom: 1px solid #000;
}
.history__version {
  font-size: 16px;
  line-height: 1rem;
  display: block;
  height: auto;
  font-weight: bold;
}
.history__date {
  color: var(--color-gray-dark);
  font-weight: normal;
}

/* ANIMATIONS */
@keyframes flash {
  0% {
    outline: 0px solid #000;
  }
  50% {
    outline: 2px solid #000;
  }
  100% {
    outline: 0px solid #000;
  }
}
.block--flashing {
  animation: flash 0.3s infinite;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.transition-fast {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.hidden-below {
  opacity: 0 !important;
  transform: translateY(1rem) !important;
}

/* ================= ZOOM ================= */
footer {
  position: fixed;
  z-index: 999;
  bottom: var(--padding);
  width: calc(100% - (var(--padding) * 2));
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.zoom__btn {
  pointer-events: all;
}

.zoom__btn:not(:last-child) {
  margin-bottom: 1px;
}