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

:root {
  --color-background: #fbe5eb;
  --color-text: #0432ff;
  --canvas-width: 1100px;
  --canvas-mobile-width: 390px;
  --breakpoint-mobile: 768px;
  --canvas-scale: 1;
  --grid-size: 8px;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size: 16px;
  --font-weight: 400;
  --line-height: 1.50;
}

@font-face {
  font-family: 'Director Regular';
  src: url('/assets/fonts/1771945637785-Latitude-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Latitude Regular';
  src: url('/assets/fonts/1772125392711-Latitude-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Enby Gertrude roman';
  src: url('/assets/fonts/1772200416760-Enby_Gertrude_roman.ttf');
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family, sans-serif);
  font-size: var(--font-size, 16px);
  font-weight: var(--font-weight, 400);
  line-height: var(--line-height, 1.5);
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a:hover {
  cursor: pointer;
}

.canvas-outer {
  position: relative;
  width: calc(var(--canvas-width) * var(--canvas-scale));
  min-height: calc(var(--canvas-min-height, 0px) * var(--canvas-scale));
  margin: 0 auto;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas-width);
  min-height: var(--canvas-min-height, 0px);
  transform: scale(var(--canvas-scale));
  transform-origin: top left;
}

.item {
  position: absolute;
}

.item-image {
  position: absolute;
}

.item-image img {
  width: 100%;
  height: auto;
  display: block;
}

.item-image .image-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (hover: hover) {
  .item-image:hover .image-hover {
    opacity: 1;
  }
}

.item-image.touching .image-hover {
  opacity: 1;
}

.item-video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.item-audio {
  width: 100%;
}

.item-audio audio {
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  :root {
    --canvas-scale: 1;
  }
  .canvas-outer {
    width: min(100%, var(--canvas-mobile-width));
    min-height: auto;
  }
  .canvas {
    position: static;
    width: 100%;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    transform: none;
  }

  .item {
    position: static;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
  }

  .item-image {
    position: relative;
    width: 100%;
  }
}