:root {
  /* user-color will be manually set */
  --user-color: white;
  --user-color-light: white;
  --theme-orange: #ffbc42;
  --theme-orange-light: #ffbc4233;
  --theme-green: #6eeb83;
  --theme-green-light: #6eeb8333;
  --theme-blue: #30bced;
  --theme-blue-light: #30bced33;
  --theme-yellow: #ecd444;
  --theme-highlight: #ee6352;
  --theme-highlight-light: #f38d80;
  --theme-highlight-dark: #d12915;
  --theme-highlight-complementary: #52ddee;
  --theme-highlight-light-complementary: #80e6f3;
  --golden-ratio: 38.19660vw;
  --golden-ratio-2: 19.0983vw;
  --golden-ratio-4: 9.54915vw;
  --golden-ratio-8: 4.774575vw;
  --background-color: white;
  --navwidth: var(--golden-ratio-2);
  --scrollbar-width: 17px;
  --userlist-width: var(--golden-ratio-4);
  --main-width: calc(100vw - var(--userlist-width) - var(--navwidth) - var(--scrollbar-width));
  --hamburger-height: 6rem;
  --hamburger-transition-time: .6s;
  --drawing-menubar-icon-size: 4rem;
}

body {
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
}

html, body {
  overflow: auto;
  scroll-snap-type: y proximity;
}

body, input, select, textarea{
  font-family: 'Helvetica Neue', arial, sans-serif;
	font-weight: 400;
  color: #444;
}

a {
  text-decoration: none;
  color: var(--theme-highlight);
}

nav a {
  color: inherit;
}

a:hover {
  color: var(--theme-highlight-dark);
}

.highlight, a:active, a.active {
  color: var(--theme-highlight-dark);
  font-weight: bold;
}

h1, h2, h3, h4, h5 {
  color: #313131;
}

main {
  width: var(--main-width);
  margin-right: var(--userlist-width);
  margin-left: var(--navwidth);
}

main > div {
  min-height: 100vh;
  position: relative;
  scroll-snap-align: start;
}

nav {
  width: var(--navwidth);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 2rem;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

#userlist {
  padding-top: 2rem;
  padding-left: 1.6rem;
  padding-right: var(--scrollbar-width);
  padding-bottom: var(--scrollbar-width);
  position: fixed;
  top: 0;
  right: -20px;
  bottom: -20px;
  width: var(--userlist-width);
  overflow-wrap: break-word;
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: visible;
}

#userlist > div {
  padding: .3rem 40px .3rem .3rem;
  border-left-style: solid;
  border-left-width: .2rem;
  margin: .1rem 0;
  width: calc(100% + 40px);
  transition: transform .5s;
  transform: translateX(calc(var(--golden-ratio-4) - .6rem));
  box-sizing: border-box;
}

#userlist > div[y-islocaluser="true"] {
  font-weight: bold;
}

@media (min-aspect-ratio: 1/1) and (orientation: landscape) and (min-width: 1024px) {
  #userlist:hover > div {
    transform: translateX(0);
    transition: scale .5s, transform .5s;
  }

  #userlist:hover > div:nth-child(1) {
    transition-delay: .3s;
  }

  #userlist:hover > div:nth-child(2) {
    transition-delay: .4s;
  }

  #userlist:hover > div:nth-child(3) {
    transition-delay: .5s;
  }

  #userlist:hover > div:nth-child(4) {
    transition-delay: .55s;
  }

  #userlist:hover > div:nth-child(5) {
    transition-delay: .6s;
  }

  #userlist:hover > div:nth-child(6) {
    transition-delay: .65s;
  }

  #userlist:hover > div:nth-child(7) {
    transition-delay: .7s;
  }

  #userlist:hover > div:nth-child(n + 7) {
    transition-delay: .725s;
  }
}

/* show userlist if scrolled up all the way to the top */
#userlist[show] > div {
  transform: translateX(0);
  transition: scale .5s, transform .5s;
}

#userlist[show] > div:nth-child(1) {
  transition-delay: .3s;
}

#userlist[show] > div:nth-child(2) {
  transition-delay: .4s;
}

#userlist[show] > div:nth-child(3) {
  transition-delay: .5s;
}

#userlist[show] > div:nth-child(4) {
  transition-delay: .55s;
}

#userlist[show] > div:nth-child(5) {
  transition-delay: .6s;
}

#userlist[show] > div:nth-child(6) {
  transition-delay: .65s;
}

#userlist[show] > div:nth-child(7) {
  transition-delay: .7s;
}

#userlist[show] > div:nth-child(n + 7) {
  transition-delay: .725s;
}

#hamburger {
  display: none;
}

#hamburger-checkbox {
  display: none;
}

#hamburger-background {
  display: none;
}

@media (max-aspect-ratio: 1/1), (orientation: portrait), (max-width: 1024px) {
  /* Show hamburger menu */

  #hamburger-checkbox {
    display: block;
  }

  #hamburger-background {
    display: block;
    position: fixed;
    top: -6rem;
    left: -6rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background-color: var(--theme-highlight);
    z-index: 2;
    transition: all var(--hamburger-transition-time);
  }

  #hamburger-checkbox:checked ~ #hamburger-background {
    height: 300vh;
    width: 300vw;
    left: -260vw;
    top: -100vh;
    background-color: #DAFFFF;
  }

  #hamburger-checkbox {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    width: 5rem;
    height: 5rem;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 3; /* and place it over the hamburger */
  }

  #hamburger {
    display: block;
    position: fixed;
    top: 1.3rem;
    left: 1rem;
    z-index: 2;
  }

  /*
  * Just a quick hamburger
  */
  #hamburger > span {
    display: block;
    width: 3rem;
    height: .4rem;
    margin-bottom: .4rem;
    position: relative;

    background: var(--background-color);
    border-radius: .3rem;

    z-index: 2;
    overflow: hidden;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }

  #hamburger > span:nth-child(1) {
    transform-origin: top left;
  }

  #hamburger > span:nth-child(3) {
    transform-origin: bottom left;
  }

  /*
  * Transform all the slices of hamburger
  * into a crossmark.
  */
  #hamburger-checkbox:checked ~ #hamburger > span {
    opacity: 1;
    background: #232323;
  }

  /*
  * But let's hide the middle one.
  */
  #hamburger-checkbox:checked ~ #hamburger > span:nth-child(1) {
    transform: rotate(45deg) translate(.4rem, -.3rem)
  }

  /*
  * But let's hide the middle one.
  */
  #hamburger-checkbox:checked ~ #hamburger > span:nth-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
  * Ohyeah and the last one should go the other direction
  */
  #hamburger-checkbox:checked ~ #hamburger > span:nth-child(3) {
    transform: rotate(-45deg) translate(0, .7rem)
  }

  nav {
    width: 12rem;
    transform: translateX(-24rem);
    transition: transform var(--hamburger-transition-time);
    font-size: .8rem;
  }

  #hamburger-checkbox:checked ~ nav {
    transform: translateX(0);
  }

  main {
    transition: filter .5s;
  }

  #hamburger-checkbox:checked ~ main {
    filter: blur(.2em);
    transition: filter 1s;
  }

  /* More space after each section, so you can see the headline */

  main > div {
    padding-top: var(--hamburger-height);
  }

  .ProseMirror-menubar[style*="fixed"] {
    padding-left: var(--hamburger-height);
  }

  main > div {
    min-height: calc(100vh - var(--hamburger-height) - 3rem);
  }

  #userlist {
    font-size: 1.1rem;
    width: 6em;
    transition: right 0s;
  }

  #hamburger-checkbox:not(:checked) ~ #userlist:not([show]) {
    right: -100vw;
    transition-delay: 2s;
  }

  #userlist > div {
    transform: translateX(6em);
  }

  #hamburger-checkbox:checked ~ #userlist > div {
    transform: translateX(0);
    transition: transform .5s;
    transition-delay: .2s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(1) {
    transition-delay: .3s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(2) {
    transition-delay: .4s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(3) {
    transition-delay: .5s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(4) {
    transition-delay: .55s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(5) {
    transition-delay: .6s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(6) {
    transition-delay: .65s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(7) {
    transition-delay: .7s;
  }

  #hamburger-checkbox:checked ~ #userlist > div:nth-child(n + 7) {
    transition-delay: .725s;
  }
}

nav a {
  display: block;
}

nav > div {
  margin-left: var(--golden-ratio-8);
}

nav > div > ul {
  padding: 0;
}

.nav-external {
  list-style-type: none;
  height: 0;
  overflow: visible;
}


@media (max-height: 630px) {
  nav {
    font-size: 0.7rem;
    line-height: 1rem;
  }
}

.nav-external a::after {
  content: ' ';
  display: inline-block;
  width: .8rem;
  height: .8rem;
  background: url('/images/icons/link-external.svg') no-repeat center/.8rem;
  padding-left: .3rem;
}

#intro {
  background: url('/images/logo/yjs.svg') no-repeat center/14rem;
}

#intro-name {
  font-size: 2rem;
  position: absolute;
  top: var(--golden-ratio-4);
  left: 0;
}

@media (max-aspect-ratio: 1/1), (orientation: portrait), (max-width: 1024px) {
  #intro-name {
    top: calc(50% - 15rem);
    left: calc(var(--hamburger-height) - 1rem);
    right: var(--navwidth);
  }
}

@media (max-width: 440px) and (min-height: 600px) {
  #intro-name {
    top: calc(50% - 18rem);
    left: 1rem;
  }
}

@media (min-aspect-ratio: 1/1) and (orientation: landscape) and (max-width: 1024px) {
  #intro {
    background: url('/images/logo/yjs.svg') no-repeat center/8rem;
  }

  #intro-name {
    top: 50%;
    left: 1rem;
    background-color: #ffffff33;
  }
}

#intro-name input {
  background-color: #fff0;
  font-size: 2rem;
  padding-left: .2rem;
  border: none;
  border-bottom: .1rem solid var(--user-color);
  outline: none;
  width: 11.7rem;
}

#intro-cursors {
  position: relative;
}

#intro-cursors > div {
  position: absolute;
  top: 0;
  left: 0;
  margin: -.4rem;
  padding: .4rem;
  border-radius: 50%;
  border: .05rem solid var(--background-color);
  /* transition: transform 60ms; */
}

/*
#demo-content .ProseMirror-example-setup-style {
  max-height: 70vh;
  overflow-y: auto;
}*/

#features {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#features > p {
  margin-top: var(--golden-ratio-4);
  padding-bottom: 1.3rem;
  font-size: 1.2rem;
}

#features-typedemo {
  height: 13rem;
  border: none;
  outline: none;
}

#features-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 1rem -1rem var(--golden-ratio-4) -1rem;
}

@media (max-aspect-ratio: 1/1), (orientation: portrait), (max-width: 1024px) {
  #features-items {
    flex: 1;
  }
}

#features-items > * {
  margin: 1rem;
  max-height: 19rem;
}

#editor, #editor .ProseMirror[contenteditable] {
  min-height: 70vh;
}

#community {
  display: flex;
  align-items: center;
  justify-content: center;
}

#community > div {
  text-align: center;
}

.colorpicker {
  width: 1rem;
  height: 1rem;
  background-color: var(--user-color);
  border-radius: 50%;
  display: inline-block;
}

.box-container, .box-container > h5 {
  border-radius: .4rem;
}

#features .box-container:nth-of-type(1) {
  background-color: var(--theme-orange-light);
}

#features .box-container:nth-of-type(1) > h5 {
  background-color: var(--theme-orange);
}

#features .box-container:nth-of-type(2) {
  background-color: var(--theme-blue-light);
}

#features .box-container:nth-of-type(2) > h5 {
  background-color: var(--theme-blue);
}

#features .box-container:nth-of-type(3) {
  background-color: var(--theme-green-light);
}

#features .box-container:nth-of-type(3) > h5 {
  background-color: var(--theme-green);
}

#community img {
  width: 13rem;
}

#community a {
  color: inherit;
}

.box-container {
  font-size: 1rem;
  margin: 1rem 2rem 1rem 0;
  padding: 0;
  min-width: 17rem;
  flex: 1;
}

.box-container > h5 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--theme-blue);
  margin: 0;
  line-height: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 1rem 2rem;
}

.box-container > p {
  padding: 1rem;
  margin: 0;
  height: p
}

html {
  font-size: 1em;
}

@media (max-aspect-ratio: 1/1), (orientation: portrait), (max-width: 1024px) {
  html {
    font-size: 3vw;
  }
  .CodeMirror {
    font-size: .7rem;
  }
  main {
    margin: 0;
    padding: 1rem;
    width: calc(100vw - var(--scrollbar-width) - 2rem);
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 1.3em; /* consider rem size break */
  }
  nav {
    font-size: .8rem;
  }
}

@media (min-width: 1850px) {
  html {
    font-size: 1.5em; /* consider rem size break */
  }
  nav {
    font-size: 1.2rem;
  }
}