:root {
  --fs: 28px;
  --orange: rgb(255, 95, 0);
  --green: rgb(0, 140, 65);
  --blue: rgb(100, 165, 225);
  --brown: rgb(150, 120, 80);
}

body {
  font-family: 'scenery-medium';
  font-size: var(--fs);
  line-height: calc(var(--fs) * 1.25);
  margin: var(--fs);
  margin-top: 0;
}

h1,
p {
  margin: 0;
  padding: 0;
}

h1 {
  font-weight: normal;
}

a {
  color: inherit;
  text-decoration: underline 2px;
  text-underline-offset: 4px;
}

a:hover {
  text-decoration: none;
}

.cap {
  font-feature-settings: 'case';
  text-transform: uppercase;
}

header {
  padding-top: var(--fs);
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

header h1 {
  font-family: 'scenery-bold';
  font-size: 1em;
}

header div.l1 {
  display: flex;
}

header nav span {
  text-decoration: underline 1px;
  cursor: pointer;
}

header nav span:hover {
  text-decoration: none;
}

header a {
  text-underline-offset: 3px;
}

main {
  position: relative;
}

main img.logo {
  width: calc(var(--fs) * 6);
  transform: rotate(5deg) scale(1);
  position: fixed;
  z-index: 1;
  bottom: calc(var(--fs) * 1.5);
  right: calc(var(--fs) * 1.5);
}

main img.logo:hover {
  transform: rotate(0deg) scale(1.1) !important;
  cursor: copy;
}

main section.words span {
  cursor: move;
}


main section.words span a {
  cursor: pointer;
}


main section.words .hidden {
  visibility: hidden;
}

main section.words .save {
  font-family: 'scenery-light';
  color: var(--orange);
  letter-spacing: 0.031em;
}
main section.words .save.is-chrome {
  letter-spacing: 0.0335em;
}

main section.words .nav,
main section.words a {
  text-decoration: underline 1px;
  text-underline-offset: 4px;

}

main section.words .nav:hover,
main section.words a:hover {
  text-decoration: none;
  cursor: pointer;
}

main section.words .guest,
main section.words .nav,
main section.words .ponctuation {
  font-family: 'selfmodern-italic';
  color: var(--green);
  line-height: 1em;
  position: relative;
}

main section.words .guest img{
  max-width: 15vw;
  vertical-align: top;
  /* padding: var(--fs); */
  display: none;
}

main section.words .guest img.horiz{
  max-width: 25vw;
}

main section.words .guest:hover img{
  display: inline;
}

main section.words .save.color {
  font-family: 'chantier-bold';
  letter-spacing: -0.0285em;
  color: var(--blue);
  line-height: 0;
}

main section.words .save.color:hover {
  font-family: 'chantier-construct';
  letter-spacing: -0.003em;
}


main section.words .guest.color {
  color: var(--brown);
}

footer {
  font-family: 'scenery-thin';
}

footer a{
  text-decoration: underline 1px;
}


@media screen and (max-width:1400px) {
  
  :root {
  --fs: 24px;
  }

  body {
    font-size: var(--fs);
  }

  main img.logo {
    width: calc(var(--fs) * 4);
    bottom: calc(var(--fs) * 1);
    right: calc(var(--fs) * 1);
  }

  main section.words .guest img {
    max-width: 20vw;
  }

  main section.words .guest img.horiz {
    max-width: 30vw;
  }

}

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

  :root {
  --fs: 22px;
  }

  body {
    font-size: var(--fs);
  }

  main section.words .nav {
    text-decoration: none;
  }

  header div.l1 {
    display: block;
  }

  header div.l1 > * {
    display: inline;
  }

  main section.words .guest img {
    max-width: 35vw;
  }

  main section.words .guest img.horiz {
    max-width: 45vw;
  }
}

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

  :root {
    --fs: 18px;
  }

  body {
    font-size: var(--fs);
  }

  main section.words .guest img,
  main section.words .guest img.horiz {
    max-width: 100%;
  }

}