body {
  padding: 0;
  margin: 0;
  background: url('../home/typing_hands.jpg') fixed right no-repeat;
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-text-size-adjust: 100%;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font-family: var(--sans-text);
  margin: 0;
  padding: 0;
  font-size: inherit;
}

container {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-family: var(--sans-text);
  color: var(--text-dark-light);
  overflow-x: hidden;
  overflow-y: auto;
}

section {
  display: block;
  position: relative;
  width: 80vw;
  padding: 5vw 10vw;
  background: var(--background-light);
  height: auto;
} section.lighter {
  background: url('../home/blur_bg.jpg') fixed right no-repeat;
  background-size: cover;
}

#analyze {
  background: url('../home/analyze_bg.jpg') fixed right no-repeat;
  background-size: cover;
}

#write {
  background: url('../home/write_bg.jpg') fixed right no-repeat;
  background-size: cover;
}

section:first-of-type {
  height: calc(100vh - 15vw);
  background: none;
}

section.flex {
  display: flex;
}

side_box {
  display: inline-block;
  width: 50%;
  height: fit-content;
} side_box:first-of-type {
  width: 40%;
  margin-right: 9%;
} #last side_box {
  width: 40%;
  margin-left: 9%;
} #last side_box:first-of-type {
  width: 50%;
  margin-right: 0;
}

box {
  display: block;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  color: var(--text-light);
  border-radius: .5rem;
}

box button {
  text-decoration: underline;
  transition: .3s;
} box button:hover {
  color: var(--m3-trans);
}

.blue {
  background: var(--m1);
} .red {
  background: var(--m2);
} .green {
  background: var(--m3);
}

img.right, img.left {
  width: 100%;
}

img.leaf {
  border-radius: 5rem 0 5rem 0;
}

img.screenshot {
  position: relative;
  width: 68vw;
  height: auto;
  margin: 0 6vw 6rem 6vw;
  box-shadow: 0 0 1rem .5rem #3335;
} img.subscreen {
  width: 26vw;
  height: auto;
  position: absolute;
  bottom: 5vw;
  right: 8vw;
  box-shadow: 0 0 1rem .5rem #3335;
} img.screenshot.right {
  margin: 0 6vw 6rem 16vw;
} img.screenshot.left {
  margin: 0 16vw 6rem -4vw;
} img.screenshot.overlap {
  margin-top: -12rem;
}

ul {
  display: block;
  position: absolute;
  top: calc(5vw + 7rem);
  width: 17vw;
  font-size: 1rem;
  color: #fff;
  padding: 0;
  list-style-type: none;
  font-family: var(--sans-bold);
  max-height: 75vh;
  overflow: hidden auto;
} ul.left {
  left: 6vw;
} ul.right {
  right: 6vw;
  top: 5vw;
}

ul li {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 1rem 0 1rem 0;
} #learn ul li { background: var(--accent-gold); color: var(--text-dark); }
  #analyze ul li { background: var(--accent); }
  #explore ul li { background: var(--accent-red); }
  #write ul li { background: var(--accent-green); }

halfimg {
  display: inline-block;
  width: 30vw;
  height: 30vw;
  overflow: hidden;
  border-radius: 2rem 2rem 1rem 1rem;
  padding-bottom: 3rem;
  margin: 0 4rem;
  background: white;
} halfimg:last-of-type {
  margin-right: 0;
} halfimg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
} halfimg:after {
  display: block;
  text-align: center;
  padding: .5rem;
  font-size: 1.3rem;
  background: white;
  content: attr(after);
}

.thirds halfimg {
  width: calc(26vw - 2rem);
  height: 15vw;
  margin: 1rem;
  padding-bottom: 5rem;
} .thirds halfimg:after {
  padding: .5rem 1rem;
}

#toplogin {
  display: block;
  position: fixed;
  top: .75rem;
  right: 1rem;
  text-align: center;
  padding: .25rem 1rem;
  border-radius: 1rem;
  background: var(--background-light);
  border: 1px solid var(--text-dark);
  opacity: .8;
  color: var(--text-dark);
  cursor: pointer;
  transition: .3s;
  z-index: 99999;
} #toplogin:hover {
  margin: -.15rem -.25rem;
  padding: .5rem 1.25rem;
  border-radius: 2rem;
  box-shadow: var(--shadow-small-frame);
}

institutional { 
  display: none;
} institutional.active {
  display: block;
  position: fixed;
  top: 3.25rem;
  right: 1rem;
  background: var(--accent);
  color: var(--text-light);
  box-shadow: var(--shadow-small-frame);
  padding: .5rem 0;
  border-radius: 1rem 0 1rem 0;
  z-index: 10000;
  width: auto;
}

institutional button {
  display: block;
  position: relative;
  background: transparent;
  padding: .5rem 1rem;
  color: var(--text-light);
  transition: .3s;
  width: 100%;
  text-align: left;
} institutional button:hover {
  background: var(--lighten);
}

#logo {
  display: block;
  position: absolute;
  top: 10vh;
  left: 5vw;
  width: 50vw;
  height: auto;
}

h1 {
  font-family: var(--sans-bold);
  text-align: left;
  font-size: 3rem;
  margin-block: 0;
  padding: 2rem 0;
  color: var(--text-dark);
} .module h1 {
  text-align: center;
} .blue h1 {
  text-align: center;
  color: var(--text-light);
} #last h1 {
  padding: 0;
}

h2 {
  color: var(--accent);
}

p {
  font-size: 1.3rem;
  line-height: 2rem;
}

p em {
  color: var(--text-dark-em-hover);
}

quote {
  display: block;
  position: relative;
  right: 6vw;
  margin: 0 5rem 4rem 5rem;
  color: var(--text-light);
  font-size: 1.8rem;
  text-align: right;
} quote:after {
  display: block;
  font-size: 1.2rem;
  content: "- " attr(source);
  text-align: right;
} .thirds quote {
  margin: 3rem;
  text-align: center;
  width: inherit;
} 

button.email {
  display: block;
  background: var(--text-dark-light);
  color: var(--text-light);
  padding: 1rem 3rem;
  border-radius: 2rem;
}


bubble {
  display: flex;
  align-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 8rem;
  padding: 2em;
  background: var(--accent);
  color: var(--text-light);
  text-align: center;
  font-size: 1rem;
  font-family: var(--sans-text);
  position: absolute;
  transition: .3s;
  cursor: default;
} bubble.top {
  top: 6rem;
} bubble.bottom {
  bottom: 2rem;
} bubble.middle {
  width: 7rem;
  height: 7rem;
  top: calc(50% - 3.5rem); 
} bubble.left {
  left: 5rem;
} bubble.right {
  right: 5rem;
} bubble.center {
  left: calc(50% - 4rem);
} bubble.big {
  top: 22vw;
  width: 12rem;
  height: 12rem;
  border-radius: 12rem;
} #analyze bubble {
  background: var(--m2);
} #explore bubble {
  background: var(--m3);
} #write bubble {
  background: var(--accent-gold);
} bubble:hover {
  padding: 2.5rem;
  margin: -0.5rem;
}


svg {
  display: block;
  position: absolute;
  top: 6rem;
  width: inherit;
  height: inherit;
}

line {
  stroke: var(--accent-gold);
  stroke-width: .4rem;
} #learna line {
  stroke: var(--m1);
}

#arrowhead {
  fill: var(--accent-gold);
} #learna #arrowhead {
  fill: var(--m1);
}

about {
  display: none;
}

about.active,
.mob.about about {
  display: block;
  position: fixed;
  top: 5rem;
  bottom: 5rem;
  left: 5rem;
  right: 5rem;
  padding: 2rem;
  background: var(--background-lighter);
  color: var(--text-dark);
  overflow: hidden scroll;
  border: 1px solid var(--accent);
}

about label,
about h1 {
  display: block;
  text-align: center;
  color: var(--accent);
  font-family: var(--sans-bold);
  font-size: 1.2rem;
  padding: 0 0 1rem 0;
  text-transform: uppercase;
}

about ref {
  display: block;
  padding: .25rem 1rem;
  text-indent: -1rem;
}

.mob ref {
  padding: 1rem 2rem;
  text-indent: -2rem;
}

table {
  margin: 0 auto;
}

table img {
  height: 4rem;
  width: auto;
}

td.center {
  text-align: center;
}

table .center img {
  height: 3rem;
}

td.spacer {
  width: 5rem;
}

td.info {
  cursor: pointer;
  padding: 0 1rem;
} td.info:hover {
  color: var(--accent);
}



/* MOBILE */

body.mob {
  background: var(--background-light) fixed;
}

.mob container {
  width: calc(100vw - 3rem);
  padding: 1.5rem;
  line-height: 3rem;
  font-size: 1.5rem;
}

.mob note {
  display: block;
  margin: -1.5rem;
  margin-bottom: 2rem;
  font-size: 2.75rem;
  padding: 2rem;
  padding-top: 4rem;
  background: var(--background-dark);
  color: var(--text-light);
  font-family: var(--sans-text);
  border-bottom: 1px solid var(--text-dark);
}

.mob #logo, .mob .wide_img {
  position: relative;
  left: 0;
  top: -.5rem;
  margin: -1.5rem;
  width: calc(100% + 3rem);
  user-select: none;
}

.mob .wide_img {
  top: 0;
  margin-top: -1px;
}

.invert {
  transform: rotate(180deg);
}

.mob tour {
  text-align: center;
  display: block;
  position: relative;
  margin: -1.5rem;
  z-index: 99999;
  background: var(--accent);
  padding: 2rem;
}

.mob tour p {
  text-align: left;
  color: var(--text-light);
}

.mob tour p em {
  color: var(--highlight);
}

.mob p {
  font-size: 3rem;
  line-height: 4rem;
}

.mob label {
  display: block;
  color: var(--text-light);
  font-family: var(--sans-text);
  padding-bottom: 2rem;
  font-size: 3.25rem;
}

.mob h1 {
  font-size: 5rem;
  line-height: 5rem;
  font-family: var(--sans-text);
}

h1.middle.top {
  text-align: center;
  color: var(--m3);
}

.mob quote {
  background: var(--accent);
  margin: 5rem auto;
  left: auto;
  right: auto;
  padding: 2rem;
  font-size: 3rem;
  line-height: 4rem;
  border-radius: 2rem 2rem 0 2rem;
} .mob quote::after {
  position: absolute;
  bottom: -4rem;
  right: 0;
  color: var(--accent);
  font-size: 2.5rem;
}

.mob section {
  display: block;
  width: auto;
  height: auto;
  margin: 0 -1.5rem;
  padding: 2rem 0;
}

.mob ul li, 
.mob #learn ul li,
.mob #analyze ul li,
.mob #explore ul li,
.mob #write ul li {
  background: transparent;
  color: var(--text-dark);
  padding: 0;
  margin: 1rem 3rem;
  font-family: var(--sans-text);
  font-size: 3rem;
  line-height: 4rem;
}

.mob section h1 {
  text-align: center;
  font-size: 4rem;
  font-family: var(--sans-bold);
}


.mob #discover, .mob #write {
  background: var(--accent-green);
}

.mob #analyze {
  background: var(--accent-gold);
}

.mob #discover ul li,
.mob #discover h1,
.mob #write ul li,
.mob #write h1,
.mob #bottom h1 {
  color: var(--text-light);
}

.mob #learn, .mob #explore {
  background: var(--background-lighter);
}

.mob #bottom {
  background: var(--accent);
  text-align: center;
}

.mob info {
  display: block;
  position: relative;
  text-align: center;
  font-size: 2rem;
  background: var(--accent-gold);
  font-family: var(--sans-bold);
  margin: 2rem;
  padding: 1rem 0;
  border-radius: 2rem;
}

.mob nsf, .mob osu {
  display: block;
  text-align: center;
  color: var(--text-light);
  font-size: 2rem;
}

.mob osu img {
  height: 4rem;
}

.mob img.screenshot {
  display: block;
  position: relative;
  width: 95%;
  left: auto;
  right: auto;
  top: auto;
  margin: 0 auto;
}

.mob ul {
  display: block;
  position: relative;
  width: auto;
  top: auto;
  left: auto;
  margin: 0;
  padding: 0 2rem;
  padding-top: 2.5rem;
  list-style-type: square;
  font-size: 1.5rem;
}

.mob.about about {
  position: fixed;
  top: 10rem;
}

.mob about label,
.mob about h1 {
  color: var(--accent-gold);
}

.mob close {
  display: none;
} .mob.about close {
  display: block;
  position: fixed;
  top: 10rem;
  transform: translateY(-100%);
  font-size: 3rem;
  padding: 2rem 0;
  text-align: center;
  left: 5rem;
  right: 5rem;
  background: var(--accent-gold);
  border: 1px dotted var(--accent);
}


.mob.about section,
.mob.about quote,
.mob.about img {
  opacity: .5;
}