@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100vw;
  font-family: 'Futura', 'Helvetica Neue', Helvetica;
  color: #333;
}

marquee {
  font-family: 'Press Start 2P', cursive;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

h1 {
  font-size: var(--step-4);
  color: #fff;
}

.h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: var(--step-1);
  color: #2ed4cb;
}

#canvas {
  position: absolute;
  max-width: 100vw;
  min-height: 100vh;
  top: 0;
  z-index: -1;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#59e1ad),
    to(#ac55f7)
  );
  background: linear-gradient(#59e1ad, #ac55f7);
}

.hero {
  cursor: pointer;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.copy {
  padding: 3rem 1rem 3rem 1rem;
  text-align: center;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.img-cont {
  position: relative;
  width: 22vw;
  min-width: 220px;
  height: 60vh;
  transform: rotate(3deg);
  margin-bottom: 1rem;
}

.img-cont img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
}

.img-cont:after {
  content: '';
  position: absolute;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  left: -22px;
  top: -22px;
  border: solid 10px white;
}

.img-cont:before {
  content: '';
  position: absolute;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  left: 35px;
  top: 35px;
  background-image: url(img/dots.svg);
  background-size: 1rem;
  background-repeat: space;
  z-index: -1;
}
copy > * {
  pointer-events: none;
}

.flow > * + * {
  margin-top: 1.5em;
}

.compliments {
  background-image: url(img/bg.svg);
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  background-color: #fff;
}

.compliments_inner {
  min-width: 200px;
  background-color: white;
  border-radius: 90px;
  padding: 3rem 3rem;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.quote {
  text-align: left;
  max-width: 600px;
  margin: 3rem auto 1rem;
  min-height: 20vh;
}

blockquote {
  line-height: 1.4;
  position: relative;
  margin: 0 0 0 3rem;
  padding: 0.5rem;
  font-size: var(--step-0);
}

blockquote:before {
  position: absolute;
  color: #f189e5;
  font-size: 6rem;
  width: 3rem;
  height: 3rem;
}

blockquote:before {
  content: '“';
  left: -3rem;
  top: -2rem;
}

cite {
  line-height: 3;
  text-align: left;
  margin-left: 3.5rem;
}

.button {
  display: block;
  text-decoration: none;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  outline: none;
  cursor: pointer;
  font-family: 'Press Start 2P', cursive;
  color: #fff;
  border: none;
}

.compliments--music {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#59e1ad),
    to(#ac55f7)
  );
  background: linear-gradient(#59e1ad, #ac55f7);
}

.cat {
  max-height: 40vh;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex > * + * {
  margin: 2rem;
}
/* fluid typography */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1400;
  --fluid-min-size: 16;
  --fluid-max-size: 22;
  --fluid-min-ratio: 1.2;
  --fluid-max-ratio: 1.5;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) /
      ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16))
  );
}

@media screen and (min-width: 1400px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
  --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));

  --fluid-min-scale--2: var(--fluid-min-scale--1) * var(--fluid-min-ratio) *
    var(--fluid-min-negative);
  --fluid-max-scale--2: var(--fluid-max-scale--1) * var(--fluid-max-ratio) *
    var(--fluid-max-negative);
  --fluid-min-size--2: (var(--fluid-min-size) * var(--fluid-min-scale--2)) / 16;
  --fluid-max-size--2: (var(--fluid-max-size) * var(--fluid-max-scale--2)) / 16;
  --step--2: calc(
    (
      (var(--fluid-min-size--2) * 1rem) +
        (var(--fluid-max-size--2) - var(--fluid-min-size--2)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale--1: var(--fluid-min-ratio) * var(--fluid-min-negative);
  --fluid-max-scale--1: var(--fluid-max-ratio) * var(--fluid-max-negative);
  --fluid-min-size--1: (var(--fluid-min-size) * var(--fluid-min-scale--1)) / 16;
  --fluid-max-size--1: (var(--fluid-max-size) * var(--fluid-max-scale--1)) / 16;
  --step--1: calc(
    (
      (var(--fluid-min-size--1) * 1rem) +
        (var(--fluid-max-size--1) - var(--fluid-min-size--1)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-0: var(--fluid-min-ratio);
  --fluid-max-scale-0: var(--fluid-max-ratio);
  --fluid-min-size-0: (var(--fluid-min-size)) / 16;
  --fluid-max-size-0: (var(--fluid-max-size)) / 16;
  --step-0: calc(
    (
      (var(--fluid-min-size-0) * 1rem) +
        (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
  --fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
  --fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0)) / 16;
  --fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0)) / 16;
  --step-1: calc(
    (
      (var(--fluid-min-size-1) * 1rem) +
        (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
  --fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
  --fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1)) / 16;
  --fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1)) / 16;
  --step-2: calc(
    (
      (var(--fluid-min-size-2) * 1rem) +
        (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
  --fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
  --fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2)) / 16;
  --fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2)) / 16;
  --step-3: calc(
    (
      (var(--fluid-min-size-3) * 1rem) +
        (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
  --fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
  --fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3)) / 16;
  --fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3)) / 16;
  --step-4: calc(
    (
      (var(--fluid-min-size-4) * 1rem) +
        (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)
    )
  );

  --fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
  --fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
  --fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4)) / 16;
  --fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4)) / 16;
  --step-5: calc(
    (
      (var(--fluid-min-size-5) * 1rem) +
        (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)
    )
  );
}