/*general styling*/
html {
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
body, button.styled-button {
  font-family: "Inter", sans-serif;
}
body, input {
  line-height: 1.3;
}
div {
  box-sizing: border-box;
}
a, label, input, button, select { /*resetting some styles on focus*/
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: 1px dotted rgba(0, 0, 0, 0);
  outline-offset: -2px;
  transition: 0.25s ease;
}
a:focus, label:focus, input:focus, button:focus, select:focus {
  outline: 1px dotted rgba(0, 0, 0, 0.3);
  outline-offset: 2px;
}
::-moz-selection { /*selection styles*/
  color: white;
  background: #a05cf8;
}
::selection {
  color: white;
  background: #a05cf8;
}

/*navigation bar styling*/
nav {
  width: 100%;
  padding: 1em 2.5em;
  box-sizing: border-box;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  transition: 0.25s ease;
  color: #7c6887;
}
nav #nav-collapse {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 3em 2.5em;
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0;
  background: white;
  transition: 0.5s ease;
}
input.nav-checkbox-hidden { /*hide checkboxes necessary for dropdowns*/
  display: none;
}

/*scrolled down nav styling*/
nav.scrolledDown, nav.scrolledDown.light, body.no-js nav {
  background: white;
  box-shadow: 0 0.25em 1em rgba(83, 2, 122, 0.1);
  padding: 0.5rem 2.5em;
  color: #7c6887;
}
nav.scrolledDown.light .nav-name {
  color: #7c6887;
}

/*links styling*/
nav li {
  list-style: none;
  padding: 0;
  display: block;
  position: relative;
}
nav li > a, nav a {
  position: relative;
  display: block;
  padding: 0.5rem 1.25em;
  text-decoration: none;
  color: #7c6887;
}
nav #nav-collapse > li > a, nav li label.dropdown-title {
  padding: 1rem 0.05em;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  border-bottom: 2px solid rgba(83, 2, 122, 0.1);
}
nav li.curPage {
  pointer-events: none;
}

/*dropdown styling*/
nav li label.dropdown-title { /*styling dropdown title*/
  position: relative;
  display: block;
  transition: 0.25s ease;
}
nav li label.dropdown-title::after { /*v shape at the end of the dropdown*/
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  padding: 4px;
  border: solid #7c6887;
  border-width: 0 0 2px 2px;
  transform: translate(0%, -7px) rotate(-45deg);
  transition: inherit;
}
nav li label.dropdown-title + div { /*containing div for dropdown (there for gap hover on larger screens; overflow on smaller)*/
  overflow: hidden;
  transition: 0.25s ease;
  backface-visibility: hidden; /*safari fix*/
  transform: translate3d(0, 0, 0);
}
nav li ul.dropdown { /*styling actual dropdown*/
  position: relative;
  display: block;
  box-sizing: border-box;
  opacity: 1;
  padding-inline-start: 0;
  padding: 0;
  border-left: 1px solid #c162f0;
  margin: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}
nav li ul.dropdown a {
  display: block;
}

/*styling the nav name*/
a.nav-name {
  display: inline-block;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1.25em;
  font-weight: bold;
}
#nav-collapse .nav-name {
  display: block;
  text-align: center;
  margin-top: 0.5em;
  letter-spacing: 1.5px;
}

/*styling icons*/
#nav-close, #nav-menu {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 2em;
  z-index: 20;
  cursor: pointer;
  transition: 0.25s ease;
}
#nav-menu {
  top: 50%;
  transform: translateY(-50%);
}
#nav-close:hover, #nav-menu:hover,
nav.scrolledDown.light #nav-menu:hover {
  color: #c162f0;
}

/*log in button styling*/
nav #nav-collapse li.account-link.notLoggedIn::after, nav #nav-collapse li.account-link.notLoggedIn a::before { /*removing underline if a button, else keep it*/
  display: none;
}
nav #nav-collapse li.account-link.loggedIn::after { 
  display: block;
}
nav #nav-collapse li.account-link.notLoggedIn { /*centering it on mobile nav*/
  display: block;
  margin: 1.5em auto;
  text-align: center;
}
nav #nav-collapse li.account-link > a { /*creating a button effect on log in button*/
  display: inline-block;
  border-radius: 3em;
  padding: 0.5rem 1.6em;
  border: 1px solid #7c6887;
  transition: 0.25s ease;
}
nav #nav-collapse li.account-link > a::after, nav #nav-collapse li.account-link > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0.25em 1em rgba(83, 2, 122, 0.15);
  opacity: 0;
  transition: inherit;
}
nav #nav-collapse li.account-link > a:hover {
  border-color: #c162f0;
  background: #c162f0;
  color: white;
}
nav #nav-collapse li.account-link > a:hover::after, nav #nav-collapse li.account-link > a:hover::before {
  opacity: 1;
}
nav #nav-collapse li.account-link.notLoggedIn > a::before { /*gradient overlay on hover*/
  display: block;
  max-width: none;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  padding: calc(0.5rem + 1px) 1.6em;
  box-sizing: border-box;
  background: linear-gradient(135deg, #a05cf8, #c162f0);
  text-align: center;
  content: "Log in";
  color: white;
  box-shadow: none;
  transform: none;
}
nav #nav-collapse #nav-profile-img { /*styling nav profile image*/
  width: 1.75em;
  height: 1.75em;
  display: inline;
  vertical-align: middle;
  margin-right: 0.5em;
}
nav #nav-collapse .loggedIn #nav-profile-name {
  text-transform: none;
  position: relative;
  display: inline-block;
  transition: 0.25s ease;
}

/*navbar light styling*/
nav.light {
  color: white;
  background: transparent;
}
nav.light .nav-name, nav.light #nav-menu:hover {
  color: white;
  opacity: 1;
}
nav.light #nav-menu {
  opacity: 0.8;
}
nav.light #nav-collapse { /*making sure mobile nav is still white themed*/
  background: white;
  color: #7c6887;
}
nav.light #nav-collapse .nav-name {
  color: #7c6887;
}

/*opening/closing menu and dropdown styling on mobile*/
nav input#nav-checkbox-open:checked ~ div#nav-collapse { /*move mobile navigation on screen*/
  transform: translateY(0);
  opacity: 1;
}
nav input#nav-checkbox-open:checked ~ #nav-menu { /*updating menu icon when navigation is open*/
  transform: translateY(-50%) rotate(90deg) scale(0);
}
body.no-js nav input.nav-checkbox-dropdown ~ div { /*close dropdown if not checked - only without js since we want to transition with js*/
  display: none;
}
body.no-js nav input.nav-checkbox-dropdown:checked ~ div { /*display dropdown if checked*/
  display: block;
}

/*mobile only styling that can't be easily undone later on*/
@media (max-width: 51.99em){
  /*links hover effect (active styling)*/
  nav #nav-collapse > li > a::before, nav li label.dropdown-title::before,
  nav ul.dropdown::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #c162f0;
    transform: scale(0, 1);
    transform-origin: left 50%;
    transition: 0.25s ease;
  }
  nav #nav-collapse > li:hover > a::before, nav #nav-collapse > li:focus > a::before,
  nav li:hover label.dropdown-title::before, nav li:focus label.dropdown-title::before,
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title::before,
  nav li.active label.dropdown-title::before,
  nav #nav-collapse > li.curPage > a::before { /*underlining effect*/
    transform: scale(1, 1);
  }
  nav ul.dropdown::after { /*underline at bottom of dropdown (separation from next one down) */
    content: "";
    bottom: -1em;
    transform: scale(1, 1);
    background-color: rgba(83, 2, 122, 0.1);
  }
  nav li.account-link ul.dropdown::after { /*hiding this underline for last element (account link)*/
    display: none;
  }
  nav #nav-collapse > li:hover > a, nav #nav-collapse > li:focus > a,
  nav li:hover label.dropdown-title, nav li:focus label.dropdown-title,
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title,
  nav li.active label.dropdown-title,
  nav #nav-collapse li.curPage > a { /*color change*/
    color: #c162f0;
  }
  nav li:hover label.dropdown-title::after, 
  nav li:focus label.dropdown-title::after,
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title::after,
  nav li.active label.dropdown-title::after { /*updating dropdown caret styling on hover/focus*/
    border-color: #c162f0;
  }
  nav li:focus label.dropdown-title::after,
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title::after,
  nav li.active label.dropdown-title::after { /*rotating dropdown caret on focus/checked*/
    transform: translate(0%, 0) rotate(135deg);
  }
}

/*wider-screen styling*/
@media (min-width: 52em){
  /*undoing some styling*/
  nav #nav-collapse, nav.light #nav-collapse {
    position: relative;
    overflow-y: visible;
    height: auto;
    padding: 0;
    transform: none;
    opacity: 1;
    transition: inherit;
    background: none;
  }
  nav li > a, nav a, nav #nav-collapse > li > a, nav li label.dropdown-title {
    padding: 0.5rem 0;
    border-bottom: none;
  }
  nav #nav-collapse > li {
    margin: 0.25em 1.25em;
  }
  nav #nav-collapse > li.has-dropdown {
    margin-left: 1.5em;
    margin-right: 1.5em;
  }
  nav li, nav li label.dropdown-title {
    display: inline-block;
  }
  nav li ul.dropdown {
    margin-bottom: 0;
    border-left: none;
  }
  body.no-js nav input.nav-checkbox-dropdown ~ div { /*undoing checked/unchecked stylings*/
    display: block;
  }
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title::after,
  nav li label.dropdown-title.active::after,
  nav li label.dropdown-title::after {
    transform: translate(200%, -7px) rotate(-45deg);
  }
  body.no-js nav input.nav-checkbox-dropdown:checked ~ label.dropdown-title,
  nav li label.dropdown-title.active {
    color: #7c6887;
  }
  nav li ul.dropdown li { /*undoing some of the undoing for the dropdowns*/
    display: block;
  }
  nav li ul.dropdown a {
    padding: 0.5rem 1.0em;
  }

  /*dropdowns stylings*/
  nav li label.dropdown-title { /*updating dropdown title styling*/
    margin-right: 0.5em;
    cursor: default;
  }
  nav li label.dropdown-title + div { /*container div, allows hover over gap*/
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 1rem;
    visibility: hidden;
    opacity: 0;
    min-width: 8em;
    overflow: visible;
    transform: translate(-0.2rem, 0);
  }
  nav li:hover label.dropdown-title + div, 
  nav li:focus label.dropdown-title + div { /*display dropdown on hover*/
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
  }
  nav li ul.dropdown { /*dropdown styling*/
    background: white;
    box-shadow: 0 0.25em 1em rgba(83, 2, 122, 0.1);
    border-radius: 10px;
    margin: 0;
  }
  nav li ul.dropdown li:first-child a { /*rounding corners so background doesn't stick out*/
    border-radius: 10px 10px 0 0;
  }
  nav li ul.dropdown li:last-child a {
    border-radius: 0 0 10px 10px;
  }
  nav li ul.dropdown li > a:hover, nav li ul.dropdown li.active > a { /*styling dropdown links on hover*/
    color: #c162f0;
    background: rgba(83, 2, 122, 0.05);
  }
  nav li ul.dropdown li.curPage > a {
    background-color: #d69df2;
    color: white;
  }
  nav li:hover label.dropdown-title::after { /*updating dropdown styling on hover*/
    border-color: #c162f0;
  }

  /*hover effect for links*/
  nav #nav-collapse > li > a::before, nav li label.dropdown-title::before, nav.light a.nav-name::before,
  nav #nav-collapse .loggedIn #nav-profile-name::before { /*text fill effect*/
    content: attr(data-hover);
    position: absolute;
    color: #c162f0;
    left: 0;
    top: 0;
    padding: inherit;
    max-width: 0;
    overflow: hidden;
    transition: inherit;
    white-space: nowrap;
  }
  nav #nav-collapse > li:hover > a::before,
  nav li:hover label.dropdown-title::before,
  nav #nav-collapse > li.curPage > a::before, nav li.curPage label.dropdown-title::before,
  nav #nav-collapse .loggedIn:hover #nav-profile-name::before {
    max-width: 100%;
  }
  nav #nav-collapse > li::after { /*underline effect*/
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #c162f0;
    transform: scale(0, 1);
    transform-origin: left 50%;
    transition: 0.25s ease;
  }
  nav #nav-collapse > li:hover::after, nav #nav-collapse > li.curPage::after {
    transform: scale(1, 1);
  }

  /*floating login button to the  right*/
  nav #nav-collapse li.account-link {
    float: right;
  }
  nav #nav-collapse::after { /*clearfix*/
    content: "";
    display: block;
    clear: both;
  }
  nav #nav-collapse li.account-link.notLoggedIn {
    margin: 0.25em 1.25em;
    margin-left: 0;
  }
  nav #nav-collapse li.account-link > a {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  nav #nav-collapse li.account-link.notLoggedIn > a::before {
    padding-top: calc(0.4rem + 1px);
    padding-bottom: calc(0.4rem + 1px);
  }
  nav #nav-collapse li.account-link div { /*having this menu be on the right (for fear of it going off-screen)*/
    right: 0;
    left: auto;
  }

  /*navbar light styling*/
  nav.light:not(.scrolledDown) li > a, nav.light:not(.scrolledDown) a,
  nav.light:not(.scrolledDown) #nav-collapse > li > a, nav.light:not(.scrolledDown) li label.dropdown-title,
  nav.light:not(.scrolledDown) #nav-collapse .nav-name { /*changing color*/
    color: white;
    opacity: 0.8;
  }
  nav.light:not(.scrolledDown) li > a:hover, nav.light:not(.scrolledDown) a:hover,
  nav.light:not(.scrolledDown) #nav-collapse > li > a:hover, nav.light:not(.scrolledDown) li:hover label.dropdown-title,
  nav.light:not(.scrolledDown) #nav-collapse .nav-name:hover, nav.light #nav-collapse li.curPage > a {
    opacity: 1;
  }
  nav.light:not(.scrolledDown) #nav-collapse > li > a::before, nav.light:not(.scrolledDown) li label.dropdown-title::before,
  nav.light:not(.scrolledDown) a.nav-name::before { /*not doing the fill-in hover effect but glow (?) instead*/
    display: none;
    /*max-width: 100%;
    color: transparent;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 1);
    overflow: visible;
    opacity: 0;*/
  }
  nav.light:not(.scrolledDown) #nav-collapse > li:hover > a::before, nav.light:not(.scrolledDown) li:hover label.dropdown-title::before,
  nav.light:not(.scrolledDown) a.nav-name:hover::before {
    opacity: 1;
  }
  nav.light ul.dropdown li a {
    color: #7c6887;
  }
  nav.light:not(.scrolledDown) li ul.dropdown {
    background-color: rgba(255, 255, 255, 0.85);
  }
  nav.light:not(.scrolledDown) li label.dropdown-title::after, nav.light:not(.scrolledDown) li:hover label.dropdown-title::after { /*changing dropdown carets + underline colors*/
    border-color: white;
  }
  nav.light:not(.scrolledDown) #nav-collapse > li::after {
    background-color: white;
  }
  nav.light:not(.scrolledDown) #nav-collapse li.account-link > a { /*editing logged in button*/
    border-color: white;
  }
  nav.light:not(.scrolledDown) #nav-collapse li.account-link > a:hover {
    border-color: white;
    background: white;
    color: #c162f0;
  }
  nav.light:not(.scrolledDown) #nav-collapse li.account-link.notLoggedIn > a::before { /*no gradient overlay*/
    display: none;
  }

  /*hiding mobile menu icons + drop-back name and displaying nav name*/
  #nav-collapse .nav-name {
    display: inline-block;
    margin-top: 0;
  }
  #nav-menu, #nav-close, #nav-name-backup {
    display: none;
  }
}

/*content styling*/
div.heading, div.content, footer {
  max-width: 110em;
  margin: 0 auto;
  position: relative;
}

/*heading*/
div.has-top-wave:first-of-type { /*headings will always have top wave (background light purple)*/
  background: #f8f2fc;
  position: relative;
}
div.has-top-wave:first-of-type::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(rgba(238, 209, 255, 0), rgba(238, 209, 255, 0.4));
  z-index: 0;
}
div.heading {
  padding: 6.5em 20%;
  padding-bottom: 1.5em;
  text-align: center;
}
div.heading h1 {
  padding-bottom: 0.5em;
  font-size: 2.5em;
  margin-bottom: 0;
}

/*content styling*/
div.content {
  padding: 2em 20%;
  color: #7c6887;
}
div.heading h1, div.content h2, div.content h3 {
  color: #4d2466;
  margin-bottom: 0.5em;
}
div.content h2 + *, div.content h3 + * {
  margin-top: 0.5em;
}
div.content .center {
  text-align: center;
}
div.content h2 {
  font-size: 1.75em;
}
div.light { /*other color schemes*/
  background: #f8f2fc;
}
div.dark {
  background: #6347ff;
  background: linear-gradient(135deg, #c162f0, #6347ff);
  color: white;
}
div.dark h1, div.dark h2, div.dark h3, div.dark * {
  color: white;
}

/*list styling*/
div.content ul li {
  margin: 0.3em 0;
}
div.content p + ul {
  margin-top: 0.5em;
}

/*side-by-side flex layout (common)*/
div.flex-side {
  width: 100%;
  display: block;
}
div.flex-side .flex-column img {
  max-width: 100%;
}
div.flex-side .flex-column:first-child {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 2em;
}
@media (min-width: 50em) and (max-width: 80em){ /*floating (mid-sized screen)*/
  div.flex-side.floated .flex-column.float{
    float: left;
    width: 45%;
    margin-bottom: 1em;
    margin-right: 2em;
  }
  div.flex-side.floated.right .flex-column.float {
    float: right;
    margin-right: 0;
    margin-left: 2em;
  }
  div.flex-side.floated::after {
    content: "";
    display: block;
    clear: both;
  }
}
@media (min-width: 80em){ /*flex layout on larger screens*/
  div.flex-side {
    display: flex;
    align-items: flex-start;
  }
  div.flex-side.floated.right {
    flex-direction: row-reverse;
  }
  div.flex-side.middle {
    align-items: center;
  }
  div.flex-side .flex-column.float {
    margin-right: 2.5em;
    margin-bottom: 0;
    float: none;
  }
  div.flex-side.floated.right .flex-column.float {
    margin-right: 0;
    margin-left: 2.5em;
  }
}

/*image container styling*/
.img-container {
  position: relative;
  overflow: hidden;
  transition: inherit;
  background-size: cover; /*for js fallback*/
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: inherit;
}
.img-container.center img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img-container img.vertical { /*help with IE? not perfect though*/
  width: 100%;
}
.img-container img.horizontal {
  height: 100%;
}
.img-container.circle {
  border-radius: 50%;
}

/*link styling*/
div.content a:not(.styled-button), footer a, a.styled-link, span.styled-link {
  border-bottom: 2px solid rgba(193, 98, 240, 0.3);
  color: rgba(193, 98, 240, 0.7);
  transition: 0.2s ease;
  text-decoration: none;
  background: linear-gradient(rgba(193, 98, 240, 0.1), rgba(193, 98, 240, 0.1));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
}
div.content a:not(.styled-button):hover, footer a:hover, a.styled-link:hover, span.styled-link:hover {
  border-bottom-color: rgba(193, 98, 240, 0.6);
  color: rgba(193, 98, 240, 1);
  background-size: 100% 100%;
  cursor: pointer;
}

/*button styling*/
/*primary button styling*/
.styled-button {
  display: inline-block;
  position: relative;
  margin: 1em 0;
  padding: 0.55em 2em;
  border-radius: 9em;
  min-width: 4em;
  text-align: center;
  color: white;
  background-color: #c162f0;
  background: linear-gradient(135deg, #c162f0, #6347ff);
  text-decoration: none;
  border: none;
  box-shadow: 0 0.25em 1em rgba(99, 71, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.9em;
}
.styled-button::before, .styled-button.gray-out::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(99, 71, 255, 0.7), rgba(193, 98, 240, 0.7));
  opacity: 0;
  transition: inherit;
  z-index: 0;
}
.styled-button:hover::before {
  opacity: 1;
}
.styled-button:hover, .styled-button.outline:hover {
  box-shadow: 0 0.5em 1em rgba(99, 71, 255, 0.4);
  cursor: pointer;
}
.styled-button span { /*making sure text shows up over overlay*/
  position: relative;
  z-index: 1;
}
/*secondary button styling*/
.styled-button.outline {
  background: transparent;
  color: #c162f0;
  border: 2px solid #c162f0;
  box-shadow: 0 0.25em 1em rgba(99, 71, 255, 0);
}
.styled-button.outline:hover {
  background: #6347ff;
  border-color: transparent;
  color: white;
}
.styled-button.outline::before, nav .account-link::before, .styled-button.outline.gray-out::after {
  background: linear-gradient(135deg, #a05cf8, #c162f0);
  border-radius: inherit;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  top: -2px;
  left: -2px;
}
/*disabled styling*/
.styled-button.gray-out {
  pointer-events: none;
  color: rgba(255, 255, 255, 0.65);
  box-shadow: none;
}
.styled-button.gray-out::before, .styled-button.gray-out::after {
  opacity: 1;
}
.styled-button.gray-out::after, .styled-button.outline.gray-out::after {
  background: rgba(150, 150, 150, 0.4);
}
/*loading styling*/
.styled-button.loading {
  pointer-events: none;
}
@keyframes buttonLoad { /*loading animation*/
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.styled-button span::after { /*loading sign*/
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  border: 2px solid white;
  border-right-color: transparent;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
  transition: 0.2s ease;
  z-index: 2;
}
.styled-button.loading span::after {
  opacity: 1;
  animation: buttonLoad 1s linear infinite;
}
.styled-button.loading span {
  color: rgba(255, 255, 255, 0.2);
}

/*styled form stuff*/
label.required::after { /*required form asterisk*/
  content: "*";
  color: #c162f0;
  font-weight: bold;
  margin-left: 0.25em;
}
input.rounded { /*rounded input styling*/
  border: none;
  padding: 0.75em 1.75em;
  border-radius: 9em;
  min-width: 12em;
  color: #7c6887;
  background: white;
  box-shadow: 0 0.25em 0.5em rgba(83, 2, 122, 0.15);
  font-size: 1em;
  transition: 0.2s ease;
}
input.rounded:hover:not(:focus), input.rounded:focus {
  box-shadow: 0 0.5em 1em rgba(83, 2, 122, 0.15);
  transition: 0.2s ease;
}
input, textarea { /*general, boxed input styling*/
  border: 1px solid rgba(130, 83, 153, 0.6);
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.95em;
  box-shadow: 0 0 0 0 rgba(160, 92, 248, 0.15);
  outline: none;
  box-sizing: border-box;
  color: #7c6887;
  transition: 0.2s ease;
}
textarea { /*textarea specific styling*/
  font-family: "Inter", sans-serif;
  resize: none;
  display: block;
}
input:hover:not(:focus),
div.custom-dropdown:not(.active) .custom-label:hover, 
select.native-select:hover:not(:focus),
textarea:hover:not(:focus) { /*hover + focus stylings*/
  border-color: rgba(160, 92, 248, 0.5);
  box-shadow: 0 0 0 4px rgba(160, 92, 248, 0.25);
}
div.custom-dropdown:not(.active) .datalist-input:hover {
  border-color: rgba(160, 92, 248, 0.5);
}
input:focus,
div.custom-dropdown.active .custom-label,
div.custom-dropdown:not(.active):focus .custom-label, div.custom-dropdown:not(.active):focus .custom-label:hover,
select.native-select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(193, 98, 240, 0.5);
  box-shadow: 0 0 0 5px rgba(193, 98, 240, 0.25);
  transition: box-shadow 0.45s cubic-bezier(0.33, -6.00, 0.63, 1),
  border-color 0.2s ease;
}
div.custom-dropdown .datalist-input:focus {
  border-color: rgba(193, 98, 240, 0.5);
}
input:disabled, input:disabled:hover, input:disabled:focus { /*disabled styling*/
  pointer-events: none;
  border-color: rgba(83, 2, 122, 0.1);
  background: rgba(83, 2, 122, 0.05);
  box-shadow: none;
}
input::placeholder, div.custom-dropdown .custom-label.placeholder, textarea::placeholder { /*placeholder styling*/
  color: #7c6887;
  opacity: 0.75;
}
div.custom-dropdown { /*styling custom dropdowns*/
  position: relative;
  outline: none;
}
div.custom-dropdown .custom-label { /*styling label*/
  position: relative;
  display: block;
  padding: 0.35rem 0.75rem;
  font-size: 0.95em;
  border: 1px solid rgba(124, 104, 135, 0.6);
  box-shadow: 0 0 0 0px rgba(160, 92, 248, 0.25);
  border-radius: 0.5rem;
  transition: 0.2s ease;
}
div.custom-dropdown .custom-label.placeholder,
div.custom-dropdown.datalist .custom-label.placeholder input { /*counteracting lower opacity on placeholder*/
  border-color: rgba(124, 104, 135, 0.86);
}
div.custom-dropdown:not(.datalist) .custom-label.placeholder:hover,
div.custom-dropdown.datalist .custom-label.placeholder input:hover {
  border-color: rgba(160, 92, 248, 0.71);
}
div.custom-dropdown.active:not(.datalist) .custom-label.placeholder,
div.custom-dropdown.datalist .custom-label.placeholder input:focus {
  border-color: rgba(193, 98, 240, 0.71);
}
div.custom-dropdown .custom-label::after { /*caret at end of label*/
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 0;
  height: 0;
  padding: 4px;
  border: solid #7c6887;
  border-width: 0 0 2px 2px;
  transform: translate(0%, -7px) rotate(-45deg);
  transition: inherit;
}
div.custom-dropdown div.custom-options-cont { /*container div for dropdown*/
  position: absolute;
  bottom: -1em;
  transform: translateY(100%);
  width: 100%;
  overflow: hidden;
  background: white;
  box-shadow: 0 0.25em 1em rgba(83, 2, 122, 0.15);
  border-radius: 0.5em;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  transition: 0.2s ease;
}
div.custom-dropdown.active div.custom-options-cont { /*fade in on active state*/
  visibility: visible;
  opacity: 1;
}
div.custom-dropdown ul.custom-options { /*actual dropdown list*/
  max-height: 10em;
  overflow: auto;
  padding: 0;
  margin: 0;
}
div.custom-dropdown ul.custom-options .option { /*styling options*/
  list-style: none;
  padding: 0.35em 0.75em;
  transition: 0.2s ease;
}
div.custom-dropdown ul.custom-options .option:first-child {
  padding-top: 0.5em;
}
div.custom-dropdown ul.custom-options .option:last-child {
  padding-bottom: 0.5em;
}
div.custom-dropdown ul.custom-options .option:hover {
  color: #654675;
  background: rgba(193, 98, 240, 0.08);
  cursor: pointer;
}
div.custom-dropdown ul.custom-options .option.selected {
  pointer-events: none;
  color: white;
  background: rgba(193, 98, 240, 0.8);
}
div.datalist .custom-label, div.datalist.active .custom-label, 
div.datalist:not(.active):focus .custom-label, div.custom-dropdown.datalist .custom-label:hover:not(:focus) { /*styling datalists*/
  padding: 0;
  box-shadow: 0 0 0 0 rgba(160, 92, 248, 0.25);
  border: none;
}
div.datalist .datalist-input {
  border: 1px solid rgba(124, 104, 135, 0.6);
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 1em;
  margin: 0;
  color: #7c6887;
}
div.datalist .datalist-input::placeholder {
  opacity: 1;
}
select.native-select { /*styling native selects similarly*/
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  color: #7c6887;
  border: 1px solid rgba(124, 104, 135, 0.6);
  font-size: 0.95em;
  box-sizing: border-box;
  box-shadow: 0 0 0 0 rgba(160, 92, 248, 0.15);
  outline: none;
}
body.no-js div.custom-dropdown { /*fallback on native select if there isn't js*/
  display: none;
}
body.has-js select.native-select {
  display: none;
}
form div.has-field-note { /*field notes styling*/
  width: 100%;
}
form div.has-field-note::after {
  content: "";
  display: block;
  clear: both;
}
form span.field-note { 
  font-size: 0.8em;
  width: auto;
  display: block;
  padding: 0.125em 0;
  margin-bottom: 0.5em;
}
@media (min-width: 35em){ /*float to the side on decently sized screens*/
  form div.has-field-note label {
    float: left;
  }
  form span.field-note { 
    text-align: right;
    margin-bottom: 0;
  }
}
input.checkbox-hidden { /*checkbox styling*/
  display: none;
}
div.checkbox {
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-right: 0.5em;
  border-radius: 5px;
  border: 1px solid rgba(124, 104, 135, 0.6);
  box-shadow: 0 0 0 0 rgba(160, 92, 248, 0.15);
  background-color: transparent;
  transition: 0.2s ease;
}
div.checkbox::after { /*check mark*/
  position: absolute;
  content: "";
  display: block;
  width: 0.3em;
  height: 0.5em;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-color: white;
  border-width: 0 0.15em 0.15em 0;
  box-sizing: border-box;
  transform-origin: center;
  transform: translate(-50%, -70%) rotate(45deg) scale(0);
  transition: inherit;
}
label.check-label:hover div.checkbox, div.checkbox:hover {
  border-color: rgba(160, 92, 248, 0.5);
  box-shadow: 0 0 0 3.5px rgba(160, 92, 248, 0.25);
}
input.checkbox-hidden:checked ~ div.checkbox { /*checked styling*/
  background-color: rgba(193, 98, 240, 0.8);
  border-color: rgba(160, 92, 248, 0.7);
}
input.checkbox-hidden:checked ~ div.checkbox::after {
  transform: translate(-50%, -70%) rotate(45deg) scale(1);
}
label.check-label { /*vertically align with text*/
  display: flex;
  align-items: center;
}
label.toggle { /*toggle button styling*/
  position: relative;
  width: 3.5em;
  height: 1.5em;
  border-radius: 10em;
  background: rgb(212, 201, 218);
}
label.toggle:hover {
  cursor: pointer;
}
label.toggle .toggle-slider { /*background for toggle*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(193, 98, 240, 0);
  border-radius: inherit;
  transition: 0.25s ease;
}
label.toggle .toggle-slider::before { /*circle*/
  content: "";
  position: absolute;
  top: 50%;
  left: 0.15em;
  width: 1.2em;
  height: 1.2em;
  border-radius: inherit;
  background: white;
  transform: translate(0, -50%);
  transition: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input.checkbox-hidden:checked ~ .toggle-slider { /*checked styling*/
  background: rgba(193, 98, 240, 0.8);
}
input.checkbox-hidden:checked ~ .toggle-slider::before {
  transform: translate(2em, -50%);
}
input.checkbox-hidden:active ~ .toggle-slider::before { /*make it grow larger when pressed*/
  width: 1.75em;
}
input.checkbox-hidden:checked:active ~ .toggle-slider::before {
  transform: translate(1.45em, -50%);
}
form span.error { /*error message styling*/
  display: block;
  font-size: 0.8em;
  color: rgb(197, 21, 21);
  overflow: hidden;
  max-height: 0;
  transition: 0.2s ease;
}
form span.error .material-icons {
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.25em;
}
div.form-large-error { /*styling large error for forms*/
  padding: 0em 1.25em;
  margin-bottom: 1.5em;
  border-radius: 0.5em;
  background: rgba(197, 21, 21, 0.1);
  box-shadow: 0 0.25em 1em rgba(197, 21, 21, 0.1);
  color: rgb(197, 21, 21);
  overflow: hidden;
  opacity: 1;
  height: 0;
  transition: 0.5s ease;
}
div.form-large-error > div {
  padding: 1em 0;
  display: flex;
  align-items: center;
}
div.form-large-error i.material-icons {
  font-size: 3em;
  margin-right: 0.3em;
}
div.form-large-error + * {
  margin-top: 0;
}
@media (max-width: 25em){ /*vertical styling for small screens*/
  div.form-large-error > div {
    display: block;
  }
  div.form-large-error i.material-icons {
    display: block;
    margin-right: 0;
    margin-bottom: 0.25em;
    text-align: center;
  }
}
form input.error, form input.error:hover:not(:focus),
div.custom-dropdown.error:not(.datalist) .custom-label,
div.custom-dropdown.datalist.error .custom-label .datalist-input, 
div.custom-dropdown.datalist.error .custom-label .datalist-input:hover:not(:focus),
textarea.error, textarea.error:hover:not(:focus) { /*form elements with error styling*/
  border-color: rgba(197, 21, 21, 0.7);
  box-shadow: 0 0 0 4px rgba(197, 21, 21, 0.3);
}
form input.error:focus,
div.custom-dropdown.error.active:not(.datalist) .custom-label,
div.custom-dropdown.datalist.error .custom-label .datalist-input:focus,
textarea.error:focus {
  border-color: rgba(197, 21, 21, 0.5);
  box-shadow: 0 0 0 5px rgba(197, 21, 21, 0.25);
}
div.password-cont { /*password show/hide styling*/
  position: relative;
}
div.password-cont i.material-icons.password-visibility {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  font-size: 1.25em;
  transform: translateY(-50%);
  color: #c162f0;
  opacity: 0.5;
  transition: 0.2s ease;
}
div.password-cont i.material-icons.password-visibility:hover {
  cursor: pointer;
  opacity: 0.8;
}
div.password-cont i.material-icons.password-visibility.grayed-out {
  color: #7c6887;
  pointer-events: none;
}
@media (max-width: 70em){ /*more padding for smaller screens*/
  div.datalist .datalist-input,  div.datalist .datalist-input:hover, div.datalist .datalist-input:focus,
  div.custom-dropdown .custom-label, input, select.native-select, 
  textarea {
    padding: 0.5rem 0.75rem;
  }
  div.datalist .custom-label {
    padding: 0;
  }
}

/*svg stuff*/
#svg-defs {
  display: none;
}
body svg.wave {
  width: 100%;
  display: block;
  max-height: 20vh;
  fill: white;
  position: relative;
  z-index: 5;
  transform: translateY(1px);
}
body svg.wave.light {
  fill: #f8f2fc;
}
.top-wave + div, .has-top-wave + div {
  padding-top: 1em;
}
.top-wave + div > *:first-child, .has-top-wave + div > *:first-child {
  margin-top: 0;
}
body .wave.bottom-wave {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  transform: translateY(100%) scale(1, -1);
}
body .wave.bottom-wave.flipped {
  transform: translateY(100%) scale(-1, -1);
}
.has-bottom-wave + div {
  padding-top: 7.5em;
}
body > div.content:last-of-type,
body > div.log-form-body {
  padding-bottom: 8em;
}
body > div.content:last-of-type::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20em;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(248, 242, 252, 1));
  z-index: -2;
}
body > div.content.dark:last-of-type::after, body > div.content.light:last-of-type::after {
  display: none;
}
@media (max-width: 40em){
  .has-bottom-wave + div {
    padding-top: 5em;
  }
  .has-top-wave + div {
    padding-top: 2em;
  }
}
@media (max-height: 30em), (max-width: 40em) and (min-height: 40em) { /*very small screen padding bottom*/
  body > div.content:last-of-type,
  body > div.log-form-body {
    padding-bottom: 6em;
  }
}
@media (min-height: 50em), (min-width: 100vh) and (min-height: 45em) { /*extending padding for larger screens*/
  .has-bottom-wave + div {
    padding-top: 10em;
  }
  body > div.content:last-of-type,
  body > div.log-form-body {
    padding-bottom: 11em;
  }
}
.background-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/*overlay styling*/
#modal-overlay {
  position: fixed;
  overflow-y: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  padding: 2.5em 2em;
  background: rgba(0, 0, 0, 0.75);
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease;
}
#modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
#modal-overlay #modal, #modal-overlay .modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  border-radius: 1em;
  background: white;
}
#modal-overlay #modal #modal-close,
#modal-overlay .modal .modal-close { /*x-out button for modal*/
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2.5em;
  color: #7c6887;
  padding: 0;
  transform: translate(50%, -50%);
  transition: 0.2s ease;
}
#modal-overlay #modal #modal-close::after,
#modal-overlay .modal .modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1em;
  height: 1.1em;
  background: white;
  box-shadow: 0 0.25em 0.5em rgba(83, 2, 122, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
#modal-overlay #modal #modal-close .material-icons,
#modal-overlay .modal .modal-close .material-icons {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  font-size: 0.65em;
  line-height: 1em;
  transform: translate(-50%, -50%)
}
#modal-overlay #modal #modal-close:hover,
#modal-overlay .modal .modal-close:hover {
  cursor: pointer;
  color: #a05cf8;
  transform: scale(1.08);
}
#modal-overlay #modal > div,
#modal-overlay .modal > div { /*modal content*/
  padding: 2em;
}
#modal-overlay #modal .modal-title,
#modal-overlay .modal .modal-title {
  background: #a05cf8;
  background: linear-gradient(135deg, #a05cf8, #6347ff);
  color: white;
  border-radius: 1em 1em 0 0;
  padding: 0;
}
#modal-overlay #modal .modal-title h2,
#modal-overlay .modal .modal-title h2 {
  color: white;
  margin: 0 1.5em;
  padding-top: 1.5em;
  text-align: center;
}
#modal-overlay #modal .modal-title svg,
#modal-overlay .modal .modal-title svg {
  margin-top: 0;
}
#modal-overlay #modal .modal-title::before,
#modal-overlay .modal .modal-title::before {
  display: none;
}
#modal-overlay #modal .modal-title + div,
#modal-overlay .modal .modal-title + div {
  padding-top: 0.5em;
}
#modal-overlay #modal .modal-title + div *:first-child,
#modal-overlay .modal .modal-title + div *:first-child {
  margin-top: 0;
}
@media (max-width: 35em){ /*small screen sizes*/
  #modal-overlay {
    padding-left: 1.75em;
    padding-right: 1.75em;
  }
  #modal-overlay #modal > div,
  #modal-overlay .modal > div {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
  #modal-overlay #modal .modal-title h2,
  #modal-overlay .modal .modal-title h2 {
    margin-bottom: 0.5em;
  }
}

/*alert styling*/
.alert-container {
  position: fixed;
  bottom: 3em;
  left: 0;
  width: 27em;
  z-index: 10;
}
.alert-container .alert { /*actual alert styling*/
  width: 100%;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  background: #4d2466;
  background: linear-gradient(135deg, #9245F7, #6347ff);
  box-shadow: 0 0.5em 1.5em rgba(160, 92, 248, 0.5);
  color: white;
  display: flex;
  padding: 1.25em 3em 1.5em 1.5em;
  border-radius: 0 1.5em 1.5em 0;
  align-items: center;
  opacity: 0;
  transition: 0.3s ease;
}
.alert-container .alert.error { /*error alert styling*/
  background: linear-gradient(135deg, #cf1b1b, #9B0303);
  box-shadow: 0 0.5em 1.5em rgba(197, 21, 21, 0.3);
}
.alert-container .alert .material-icons.alert-icon { /*styling icon*/
  position: relative;
  margin-left: 0.3em;
  margin-right: 0.75em;
  font-size: 3em;
  text-shadow: 0 2px 7px rgba(255, 255, 255, 0.65);
}
.alert-container .alert .material-icons.alert-icon::after,
.alert-container .alert .material-icons.alert-icon::before { /*circle around the icon*/
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border: 2px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1.4);
}
.alert-container .alert .material-icons.alert-icon::before {
  opacity: 0.6;
  filter: blur(2px);
}
.alert-container .alert-title { /*styling text*/
  font-weight: bold;
  font-size: 1.17em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
.alert-container .alert-title + p {
  margin-top: 0.5em;
}
@keyframes progressBar { /*styling progress bar*/
  from {
    transform: scale(0, 1);
  }
  to {
    transform: scale(1, 1);
  }
}
.alert-container .alert-desc {
  width: 100%;
}
.alert-container .alert-desc .progress-bar,
.alert-container .alert-desc .progress-bar::after {
  position: relative;
  display: block;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.4);
}
.alert-container .alert-desc .progress-bar::after { /*actual progress bar*/
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: white;
  box-shadow: 0 0px 4px rgba(255, 255, 255, 0.6);
  transform-origin: left center;
  animation: progressBar 4s linear forwards;
}
.alert-container .alert .alert-close { /*x-out button*/
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  padding: 0.25em;
  font-size: 1.5em;
  opacity: 0.8;
  transition: 0.2s ease;
}
.alert-container .alert .alert-close:hover {
  cursor: pointer;
  opacity: 1;
}
@media (max-width: 28em){ /*small width styling of alerts*/
  .alert-container {
    width: 100%;
    bottom: 0;
  }
  .alert-container .alert {
    border-top: 3px solid #7a37d1;
    border-radius: 0;
    box-shadow: 0 -0.5em 1.5em rgba(160, 92, 248, 0.25);
  }
  .alert-container .alert.error {
    border-top-color: #9B0303;
    box-shadow: 0 -0.5em 1.5em rgba(197, 21, 21, 0.3);
  }
}
@media (max-width: 22em){ /*very, very small screen - centered layout*/
  .alert-container .alert {
    display: block;
    padding-right: 1.5em;
    text-align: center;
  }
  .alert-container .alert .material-icons.alert-icon {
    display: block;
    text-align: center;
    margin: 0.65em auto;
    margin-top: 0.3em;
  }
  .alert-container .alert-title {
    margin-top: 1em;
  }
}

/*footer styling*/
footer {
  background: white;
  color: #7c6887;
  padding: 1.5em 20%;
  padding-top: 0;
  position: relative;
  z-index: 5;
}
footer svg.wave {
  position: absolute;
  left: 0;
  top: 1px;
  transform: translateY(-100%);
  max-height: 8em;
}
@media (min-height: 50em), (min-width: 100vh) and (min-height: 45em) {
  footer svg.wave {
    max-height: 11em;
  }
}
footer .footer-text { /*text at very bottom*/
  text-align: center;
  display: block;
  font-size: 0.9em;
  clear: both;
}
footer .footer-text i.material-icons {
  font-size: 0.9em;
  margin-left: 0.5em;
  vertical-align: middle;
}
footer .footer-flex .column { /*styling columns*/
  margin: 2em 0;
}
footer .footer-flex .column p {
  margin: 0.75em 0;
}
footer .footer-flex .column .column-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}
footer .footer-link {
  margin: 1em 0;
}
footer .footer-flex .column:nth-child(2) {
  margin-top: 0;
  width: 40%;
  float: left;
  padding-right: 1em;
}
footer .footer-flex .column:last-child {
  margin-top: 0;
  width: 60%;
  word-wrap: break-word;
  display: inline-block;
}
@media (min-width: 60em) { /*multi-column footer layout on larger screens*/
  footer .footer-flex {
    display: flex;
    margin-bottom: 1em;
  }
  footer .footer-flex .column {
    flex: 1 1 25%;
    margin: 0;
    margin-left: 1.5em;
    width: auto;
  }
  footer .footer-flex .column:nth-child(2){
    flex: 1 1 15%;
    float: none;
    width: auto;
  }
  footer .footer-flex .column.larger {
    flex: 1 1 40%;
    margin-left: 0;
  }
}

/*responsive adjustment to larger displays (font size, padding, etc.)*/
@media (max-width: 40em) {
  div.heading {
    padding-top: 5em;
  }
  footer, div.content, div.heading {
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media (min-width: 70em){
  body {
    font-size: 1.1em;
  }
  body, input {
    line-height: 1.45;
  }
}
@media (min-width: 120em){
  body {
    font-size: 1.2em;
  }
  body, input {
    line-height: 1.6;
  }
}
@media (min-width: 160em){
  body {
    font-size: 1.3em;
  }
  body, input {
    line-height: 1.7;
  }
}