/* ---------- ---------- ---------- ---------- ---------- */
:root {
  --almost-white: #fefefe;
  --almost-black: #0d0d0d;

  --gray-ultradark: dimgray;
}
/* ---------- ---------- ---------- ---------- ---------- */
:root {
  --general-padding: 3rem;
  --content-max-width: 1024px;
}
/* ---------- ---------- ---------- ---------- ---------- */
:root {
  --body-background-color: var(--almost-black);
  --body-color: var(--almost-white);

  --content-border-color: transparent;
}
/* ---------- ---------- ---------- ---------- ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ---------- ---------- ---------- ---------- ---------- */
a {
  text-decoration: none;
  color: inherit;
  /* cursor: default; */
}
/* ---------- ---------- ---------- ---------- ---------- */
body {
  background-color: var(--body-background-color);
  color: var(--body-color);
  width: 100vw;
  height: 100vh;
  font-family: "Open Sans",sans-serif;
}
/* ---------- ---------- ---------- ---------- ---------- */
content {
  max-width: var(--content-max-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding-top: var(--general-padding);
  border-left: 1px solid var(--content-border-color);
  border-right: 1px solid var(--content-border-color);
}
/* ---------- ---------- ---------- ---------- ---------- */
logo {
  flex: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* ---------- */
logo {
  background-image: url('../../resources/ch/charleshenri.svg');
}
/* ---------- ---------- ---------- ---------- ---------- */
theaters {
  flex: 1;
  display: flex;
}
/* ---------- */
theater {
  flex: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: .25rem;
}
/* ---------- */
theater.first {
  background-image: url('../../resources/theaters/a_first_theater.png');
}
theater.second {
  background-image: url('../../resources/theaters/a_second_theater.png');
}
theater.third {
  background-image: url('../../resources/theaters/a_third_theater.png');
}
theater.fourth {
  background-image: url('../../resources/theaters/a_fourth_theater.png');
}
/* ---------- ---------- ---------- ---------- ---------- */
wip {
  flex: 1;
  align-self: center;
}
/* ---------- ---------- ---------- ---------- ---------- */