:root {
  --font-primary:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-secondary: Garamond, Georgia, serif;
  --color-text: #000;
  --color-background: #fff;
  --color-inactive: #ddd;
  --border-radius: 20px;
  --transition-default: all 100ms ease-in-out;
}

* {
  box-sizing: border-box;
}

a,
.Header,
.Help,
canvas {
  cursor:
    url("/img/cursor.svg") 10 10,
    pointer;
  cursor:
    -webkit-image-set(url("/img/cursor.svg") 1x, url("/img/cursor@2x.svg") 2x)
      10 10,
    pointer;
}

body {
  font-family: var(--font-primary);
  font-size: 1.2em;
  line-height: 135%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  background: var(--color-background);
  color: var(--color-text);
}

body.is-ready .Footer,
body.is-ready .Header,
body.is-ready canvas {
  opacity: 1;
  visibility: visible;
}

.Header,
.Footer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease-in-out;
}

/* Typography */
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

strong span {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 1.3em;
  font-weight: normal;
  margin-right: 1px;
}

a {
  color: var(--color-text);
}

a:hover {
  font-weight: bold;
}

/* Layout Components */
.Header {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Header__right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.Header__right > * {
  margin-left: 16px;
}

.Footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Footer__controllers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Logo */
.Logo {
  position: relative;
  top: 12px;
  width: 205px;
  height: 61px;
  background: url("/img/logo.svg") no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Buttons */
.Button {
  outline: none;
  border: none;
  font-size: 1em;
  padding: 0;
  margin: 0;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.Button:hover {
  background: #fff;
  color: #000;
}

.Button.is-link {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 1.1em;
  background: transparent;
}

.Button.is-font {
  border-radius: var(--border-radius);
  padding: 4px 16px;
  border: 1px solid transparent;
}

.Button.is-font:hover {
  border: 1px solid #000;
}

.Button.has-border {
  padding: 4px 16px;
  background: transparent;
  border-radius: 90px;
  border: 1px solid transparent;
}

.Button.has-border:hover {
  border: 1px solid #000;
}

.Button.Button--primary {
  color: #fff;
  background: #000;
  font-size: 1.1em;
  border-radius: var(--border-radius);
  padding: 8px 16px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid #000;
}

.Button.Button--primary:active {
  background: #000;
  color: #fff;
}

.Button.Button--hollow {
  color: #000;
  background: #fff;
  border: 1px solid #000;
  font-size: 1.1em;
  border-radius: var(--border-radius);
  padding: 8px 16px;
  text-transform: uppercase;
  font-weight: 600;
}

.Button.Button--hollow:hover {
  background: #000;
  color: #fff;
}

/* Checkbox Button */
.Button.is-checkbox {
  position: relative;
}

.Button.is-checkbox:before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid #000;
  position: absolute;
  top: 7px;
  left: 13px;
}

.Button.is-checkbox.is-selected:after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 15px;
  background: url("/img/cross.svg") no-repeat;
  background-size: cover;
  background-position: center center;
}

.Button.is-checkbox.has-border {
  padding: 4px 16px 4px 38px;
  background: transparent;
  border-radius: 90px;
  border: 1px solid transparent;
}

.Button.is-checkbox.has-border:hover {
  border: 1px solid #000;
}

.Rect,
.Error {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: #fff;
  border-right: 1px solid #000;
  transform: translate(-100%, 0);
  transition:
    background 50ms,
    transform 800ms;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.Rect__text {
  text-align: center;
  font-size: 11vw;
  line-height: normal;
}

.Close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 100px;
  height: 100px;
  background: url("/img/cross_white.svg") no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 1000;
}

.Button.Close:hover {
  background: url("/img/cross_white.svg") no-repeat;
}

/* Placeholder */
.Placeholder {
  display: none;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: transparent;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: none;
  transition: opacity 520ms ease-in-out;
  opacity: 0;
}

.Placeholder__text {
  color: var(--color-inactive);
  line-height: normal;
  text-align: center;
  font-size: 11vw;
}

/* Help Component */
.Help {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.Help.is-visible {
  display: flex;
}

.Help__inner {
  width: 900px;
  background: #fff;
  border: 1px solid #000;
  position: relative;
}

.Help__content {
  column-count: 2;
  column-rule: 1px solid #000;
  column-gap: 48px;
  padding: 38px 32px;
}

.Help__footer {
  bottom: 0;
  margin: 16px 0 0 0;
  border-top: 1px solid #000;
  padding: 16px 32px;
  width: 100%;
  background: #fff;
  text-align: right;
  font-size: 0.8em;
}

.Help a {
  font-weight: bold;
}

.Help a:hover {
  text-decoration: none;
}

.Help__section {
  break-inside: avoid;
  margin: 0 0 16px;
}

.Help__title {
  font-weight: bold;
  margin: 0 0 16px;
}

.Help__text {
  margin: 0 0 16px;
}

ul.Help__text {
  list-style: disc;
  padding-left: 16px;
}

.Help__text--small {
  font-size: 0.8em;
  line-height: 145%;
}

.Help__text:last-child {
  margin-bottom: 0;
}

/* Hint Component */
.Hint__text {
  position: relative;
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 1em;
  user-select: none;
}

.Hint__text:before {
  content: "";
  position: absolute;
  top: 14px;
  left: -27px;
  width: 22px;
  height: 20px;
  background: url("/img/arrow.svg") no-repeat;
  background-size: cover;
  background-position: center center;
}

.Hint__text .Button.is-link {
  font-size: 1em;
  text-decoration: underline;
}

/* Controller Components */
.Controller__random {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Controller__title {
  font-family: var(--font-secondary);
  font-style: italic;
  font-size: 1.1em;
  margin: 0 4px 0;
  user-select: none;
}

.Controller__tooltip {
  position: absolute;
  font-style: italic;
  top: -0.5em;
  font-size: 0.8em;

  background: #fff;
  border: 1px solid #000;
  padding: 2px 8px;
  border-radius: var(--border-radius);

  opacity: 0;
  visibility: hidden;
}

.Controller__selector {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 4px;
}

.Controller__selectorItem {
  width: 12px;
  height: 12px;
  background: #ddd;
  border-radius: 100%;
  margin: 0 6px 0 0;
  cursor: pointer;
  border: 1px solid #ddd;
}

.Controller__selectorItem:hover {
  background: #000;
  border: 1px solid #fff;
}

.Controller__selectorItem.is-active {
  background: #000;
  border: 1px solid #fff;
}

.Controller__selectorItem:last-child {
  margin: 0;
}

/* State Classes */
body.show-placeholder .Placeholder {
  opacity: 1;
  display: flex;
}

body canvas {
  transition: all 100ms ease-in-out;
  opacity: 0;
  visibility: hidden;
}

body.is-zoommed canvas {
  transform: scale(1.2);
}

body.allows-dropping.is-leaving .Rect {
  background: #000;
  color: #fff;
}

body.has-error .Error {
  transform: translate(0%, 0);
  background: #000;
  color: #fff;
}

body.allows-dropping .Rect {
  pointer-events: none;
  transform: translate(0%, 0);
}

/* Utility Classes */
#p5_loading {
  display: none;
}

/* Media Queries */
@media (max-width: 1050px) {
  .Controller__title {
    display: none;
  }

  .Button.Button--primary {
    font-size: 0.8em;
    border-radius: var(--border-radius);
    padding: 4px 12px;
  }

  .Button.is-checkbox {
    font-size: 0.9em;
  }

  .Button.is-checkbox.is-selected:after {
    top: 7px;
  }

  .Button.is-checkbox:before {
    top: 5px;
  }
}

@media (max-width: 800px) {
  .Controller__marks {
    display: none;
  }
}