@charset "UTF-8";

@font-face {
  font-family: "Refraktury";
  src: url("/font/Refraktury.woff") format("woff");
  font-weight: 400;
}

:root {
    --spot-color-hue: 20;
    --spot-color-comp-hue: calc(var(--spot-color-hue) - 180);
    --spot-color: hsl(var(--spot-color-hue), 100%, 47.5%);
    --spot-color-light: hsl(var(--spot-color-hue), 100%, 71.25%);
    --spot-color-medium: hsl(var(--spot-color-hue), 50%, 23.75%);
    --spot-color-dark: hsl(var(--spot-color-hue), 100%, 11.875%);
    --spot-color-darkest: hsl(var(--spot-color-hue), 100%, 5.9375%);
    --spot-color-bleached: hsl(var(--spot-color-hue), 12.5%, 95%);
    --spot-color-comp: hsl(var(--spot-color-comp-hue), 100%, 47.5%);
    --spot-color-comp-bleached: hsl(var(--spot-color-comp-hue), 12.5%, 95%);
    --spot-color-comp-muted: hsl(var(--spot-color-comp-hue), 12.5%, 89.0625%);
    --spot-color-comp-light: hsl(var(--spot-color-comp-hue), 25%, 95%);
    --spot-color-comp-medium: hsl(var(--spot-color-comp-hue), 50%, 23.75%);
    --spot-color-comp-dark: hsl(var(--spot-color-comp-hue), 100%, 11.875%);
    --spot-color-comp-darkest: hsl(var(--spot-color-hue), 100%, 5.9375%);
    --fade-time: 0.0s;
  }

::-moz-selection { background: var(--spot-color-light); }
::selection { background: var(--spot-color-light); }

*, *:before, *:after {
  box-sizing: inherit;
  text-rendering: optimizelegibility;
}

*:focus {
  outline-offset: -2px;
  outline-style: dotted;
  outline-width: 2px;
  outline-color: var(--spot-color-comp);
}

.action-button:focus {
  outline-color: var(--spot-color);
}

html {
  font-size: 12px;
  box-sizing: border-box;
  overflow-x: hidden;
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;

  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  -webkit-font-smoothing: auto;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  font-weight: 400;

  line-height: 2rem;
  font-size: 1.4rem;

  --text-color: var(--spot-color-comp-bleached);
  --background-color: var(--spot-color-comp-darkest);
  --link-color: var(--spot-color-comp-bleached);
  --link-hover-color: var(--spot-color);


  color: var(--text-color);
  background-color: var(--background-color);
}

body.newsletter {
  --link-color: var(--spot-color-comp-medium);
  --link-hover-color: var(--spot-color-comp);
  --text-color: var(--spot-color-darkest);
  --background-color: var(--spot-color-bleached);

  -webkit-hyphenate-limit-chars: 5 2 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-before: 2;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphens: auto;
  hyphens: auto;
}

body.success {
  background-color: var(--spot-color);
}

content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  overflow-x: hidden;
  flex: 1;
  width: 600px;
  max-width: 100%;
  padding: 2rem;
  margin: auto;
}

.newsletter content {
  width: 720px;
}

.city-description {
  min-height: calc(18 * 2rem);
}

.success body {
  overflow-y: hidden;
}

.success content {
  width: max(80vw, 600px);
  overflow-y: hidden;
  align-items: center;
  height: 90vh;
  min-height: 90vh;
}

h1 {
  flex-basis: auto;
  font-weight: 200;
  font-family: "Refraktury", serif;
  font-size: 6rem;
  line-height: 6rem;
  text-align: center;
  margin: 6rem 0 2rem 0;

  -webkit-font-smoothing: none;

  color: var(--text-color);

  /* text-shadow: 2px 0px 2px var(--spot-color), -2px 0px 2px var(--spot-color-comp); */
}

h1::before {
  position: absolute;
  content: '';

  top: 2rem;
  left: 6rem;
  width: 12rem;
  height: 12rem;
  border-radius: 6rem;

  z-index: -1;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVQoU2P8////f0ZGRkYGKEDnwyVgCtBpKirA5RYqWoHLFwB+ERAJfTUMZgAAAABJRU5ErkJggg==");
}

h2 {
  flex-basis: auto;
  font-weight: 200;
  font-family: "Refraktury", serif;
  font-size: 6rem;
  line-height: 6rem;
  text-align: left;
  text-align: center;

  margin: 2rem 0 2rem 0;
  -webkit-font-smoothing: none;

  color: var(--spot-color);
  -webkit-hyphens: none;
  hyphens: none;
}

h2::before {
  position: absolute;
  content: '';

  top: -12rem;
  left: 50%;
  transform: translateX(-50%);
  width: 24rem;
  height: 24rem;
  border-radius: 12rem;

  z-index: -1;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVQoU2NkYGD4z8DAwMiAACh8ZAkkNQgmdRVgdQt1rcDqCwDdugQJQ9hEvAAAAABJRU5ErkJggg==");
}

.city h2::before {
  content: none;
  background-image: none;
}

h3 {
  font-size: 1.5rem;
  margin: 0 0 2rem 0;
  color: var(--spot-color-comp);
  -moz-font-feature-settings: "c2sc","smcp";
  -webkit-font-feature-settings: "c2sc","smcp";
  font-feature-settings: "c2sc","smcp";
  letter-spacing: 0.125rem;
}

.success h1 {
  flex: none;
  flex-basis: auto;
  font-size: max(4rem, 10vw);
  line-height: max(4rem, 10vw);
  margin: 2rem 0 2rem 0;
  color: var(--spot-color-comp);
}

.success h1::before {
  display: none;
}

p {
  flex-basis: auto;
  margin: 0 0 2rem 0;
}

p.caption {
  color: var(--spot-color-medium);
  margin: -2rem 0 2rem 0;
  text-align: right;
  font-size: 1.0rem;
}

p.meta {
  font-style: italic;
}

p.caption a, p.caption a:link, p.caption a:visited {
  color: var(--link-color);
  background-image: linear-gradient(transparent 93%, var(--link-color) 93%);
}

p.caption a, p.caption a:hover, p.caption a:active {
  color: var(--link-hover-color);
  background-image: linear-gradient(transparent 93%, var(--link-hover-color) 93%);
}

span.nobr {
  white-space: nowrap;
}

blockquote {
  background-color: var(--spot-color-comp-muted);
  color: var(--spot-color-comp-medium);
  margin: 0 0 2rem 0;
  padding: 2rem;
}

blockquote p:last-child {
  margin: 0 0 0 0;
}

code {
  font-family: "Menlo", monospace;
  color: var(--spot-color-medium);
  font-size: 1.2rem;
}

hr {
  border: none;
  width: 100%;
  height: 2rem;
  margin: 0 0 2rem 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVQoU2NkYGD4z8DAwMiAACh8ZAkkNQgmdRVgdQt1rcDqCwDdugQJQ9hEvAAAAABJRU5ErkJggg==");
}

.success p {
  flex: none;
  flex-basis: auto;
  color: var(--spot-color-comp-darkest);
  text-align: center;
}

img {
  margin: 0 0 0 0;
  width: 100%;
  max-width: 100%;
  border-radius: 1px;
  box-shadow: 0 0 0.5rem 0 rgba(0.0, 0.0, 0.0, 0.25);
}

a, a:link, a:visited {
  text-decoration: none;
  background-image: linear-gradient(transparent 93%, var(--link-color) 93%);
  color: var(--link-color);
}

a:active, a:hover {
  text-decoration: none;
  background-image: linear-gradient(transparent 93%, var(--link-hover-color) 93%);
  color: var(--link-hover-color);
}

.success a, .success a:link, .success a:visited {
  text-decoration: none;
  background-image: linear-gradient(transparent 93%, var(--spot-color-comp-darkest) 93%);
  color: var(--spot-color-comp-darkest);
}

.success a:active, .success a:hover {
  text-decoration: none;
  background-image: linear-gradient(transparent 93%, var(--spot-color-comp) 93%);
  color: var(--spot-color-comp);
}

ol {
  margin: 0 0 2rem 0;
  padding: 0 0 0 2rem;
}

ol li {
  margin: 0 0 0 0;
}

ol li p {
  margin: 0 0 2rem 0;
}

ol li:last-of-type p {
  margin: 0 0 0 0;
}

ul {
  margin: 0 0 2rem 0;
  padding: 0 0 0 2rem;
  list-style-type: square;
}

ul li {
    margin: 0 0 0 0;
}

ul.less-tho {
  margin: 0 0 2rem 0;
}

ul.less-tho li p {
  margin: 0 0 0 0;
}

form {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;

}

small {
  font-size: 1.4rem;
  -moz-font-feature-settings: "c2sc","smcp";
  -webkit-font-feature-settings: "c2sc","smcp";
  font-feature-settings: "c2sc","smcp";
}

.email-signup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 100%;
    max-width: 100%;

    text-align: center;
    align-items: center;
    flex-wrap: wrap;

    margin: 0 0 2rem 0;
}

.email-signup-field {
    width: auto;
    margin: 0 2rem 0 0;

    /*flex-basis: 50%;*/
    flex-grow: 3;

    font-family: "Refraktury", sans-serif;

    line-height: 1.5rem;
    font-size: 1.5rem;
    font-weight: 400;

    overflow: hidden;

    border: none;
    border-radius: 0.125rem 0 0 0.125rem;

    box-sizing: border-box;
    height: 4rem;
    margin: 0 0 0 0;
    padding: 0 0 0 0;

    text-align: center;

    color: #000;
}

.action-button {
    width: auto;
    margin: 0 0 0 0;
    padding: 0 0 0 0;

    flex-grow: 1;

    font-family: "Refraktury", sans-serif;

    line-height: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;

    overflow: hidden;

    box-sizing: border-box;
    height: 4rem;
    margin: 0 0 0 0;

    border: none;
    border-radius: 0 0.125rem 0.125rem 0;

    cursor: pointer;
    text-align: center;
    text-decoration: none;

    color: var(--spot-color);

    background-color: var(--spot-color-comp);

    -webkit-appearance: none;
}

.action-button:hover {
    animation: BackgroundAnimation 4s linear infinite;

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJUlEQVQoU2P8////f0ZGRkYGKEDnwyVgCtBpKirA5RYqWoHLFwB+ERAJfTUMZgAAAABJRU5ErkJggg==");
}

.city-button-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.city-button {
  cursor: pointer;
  flex-grow: 1;
  line-height: 2rem;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  width: calc(600px/4);
  padding: 0.5rem;
  margin: 0 2rem 2rem 0;
  border: none;
}

.city-button:last-child {
  margin: 0 0 2rem 0;
}

.city-button-yep {
  flex-grow: 1;
  background-color: var(--spot-color-bleached);
  border: 1px solid var(--spot-color);
}

.city-button-nope {
  flex-grow: 8;
  background-color: hsl(0.0, 0%, 95%);
  border: 1px solid var(--spot-color-comp-darkest);
}

.city-button-familiar {
  background-color: hsl(0.0, 0%, 95%);
  border: 1px solid var(--spot-color-comp-darkest);
}

.city-button-flag {
  flex-grow: 1;
  background-color: #eee;
  border: 1px solid #e00;
  color: #e00;
}

.city-button-yep:hover {
  color: hsl(0.0, 0%, 95%);
  background-color: var(--spot-color);
}

.city-button-nope:hover {
  color: hsl(0.0, 0%, 95%);
  background-color: var(--spot-color-comp-darkest);
}

.city-button-familiar:hover {
  color: hsl(0.0, 0%, 95%);
  background-color: var(--spot-color-comp-darkest);
}

.city-button-flag:hover {
  color: hsl(0.0, 0%, 95%);
  background-color: #e00;
}

@keyframes BackgroundAnimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% -100%;
    }
}

audio {
  width: 100%;
  margin: 0;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  box-shadow: 0 0 0.5rem 0 rgba(0.0, 0.0, 0.0, 0.25);
}

video {
  width: 100%;
  margin: 0;
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  box-shadow: 0 0 0.5rem 0 rgba(0.0, 0.0, 0.0, 0.25);
}

@media screen and (max-width: 480px) {

  html {
    font-size: 10px;
  }

  .city-button {
    width: 100%;
    margin-right: 0;
  }

  .city-button:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {

    h1, .newsletter h2 {
      margin-top: 4rem;
      font-size: 3rem;
      line-height: 4rem;
    }

    h1::before {
      top: 3rem;
      left: 1rem;
      width: 10rem;
      height: 10rem;
      border-radius: 5rem;
    }

  .newsletter h2::before {
      top: -4rem;
      left: 50%;
      transform: translateX(-50%);
      width: 8rem;
      height: 8rem;
      border-radius: 4rem;
    }

    .success content {
      width: 100%;
      max-width: 100%;
    }

    .success h1 {
      font-size: max(3rem, 5vw);
      line-height: max(3rem, 5vw);
    }

    .email-signup {
        display: block;
    }

    .email-signup-field {
      width: 100%;
      margin: 0 0 0.25rem 0;
      border-radius: 0.125rem;
    }

    .action-button {
      width: 100%;
      margin: 0 0 0 0;
      border-radius: 0.125rem;
    }

}