@charset "UTF-8";
:root {
  /* General */
  --color-hugs-blue: #1c4254;
  --color-hugs-red: #bd1f2e;
  --color-hugs-green: #32a432;
  --color-hugs-yellow: #deb03d;
  --color-hugs-white: #f7f7fc;
  --color-hugs-gray: #999999;
  --color-hugs-light-gray: #eeeeee;
  --color-hugs-black: #000000;
  --color-hugs-amber: #995500;
  --color-hugs-dark-red: #770000;
  --color-danger-zone: #fee;
  --gutter: min(5vw, 40px);
  --highlight-color: var(--color-hugs-yellow);
  --color: var(--color-hugs-blue);
  --cta-color: var(--color-hugs-blue);
  --link-color: var(--color-hugs-blue);
  --link-hover-color: var(--color-hugs-red);
  --button-background-color: var(--color-hugs-blue);
  --button-color: var(--color-hugs-black);
  --cta-button-color: var(--color-hugs-white);
  --cta-button-background-color: var(--cta-color);
  --background-color: var(--color-hugs-blue);
  --font: "Erode-Regular";
  --title-font: "Tanker-Regular";
  --title-color: var(--color-hugs-blue);
  --font-size: 18px;
  --box-shadow-width: 1px;
  --box-shadow: 0 var(--box-shadow-width) var(--box-shadow-width) 0 rgba(0, 0, 0, 0.15);
  /* Container stuff */
  --site-width: 90vw;
  --max-site-width: 1140px;
  /* Header */
  --header-background-color: var(--color-hugs-blue);
  --header-nav-color: var(--color-hugs-white);
  --header-nav-hover-color: var(--color-hugs-red);
  --toolbar-color: var(--color-hugs-blue);
  --toolbar-background-color: var(--color-hugs-white);
  /* Footer */
  --footer-color: var(--color-hugs-white);
  --footer-copyright-color: var(--color-hugs-gray);
  --footer-copyright-border-color: var(--color-hugs-gray);
  /* Hero */
  --hero-color: var(--color-hugs-blue);
  --hero-background-color: var(--color-hugs-yellow);
  --hero-height: min(10vh, 144px);
  /* Content */
  --content-background-color: var(--color-hugs-white);
  --content-gutter: var(--gutter);
  /* Island */
  --island-color: #fff;
  --island-border-radius: 14px;
  --island-shadow-width: var(--box-shadow-width);
  --island-padding-y: min(4vh, 35px);
  --island-padding-x: min(4vh, 70px);
  --island-padding: var(--island-padding-y) var(--island-padding-x);
  /* Forms */
  --form-gutter: min(4vh, 32px);
  --form-input-gutter: min(var(--form-gutter), 0.5em);
  --form-input-border-color: var(--color-hugs-blue);
  --form-error-color: var(--color-hugs-red);
  /* Branding */
  --discord-background-color: #5865f2;
  --discord-color: #f8f5f2;
}

input[type=submit] {
  border-radius: 8px;
  background-color: var(--cta-button-background-color);
  color: var(--cta-button-color);
  box-shadow: var(--box-shadow);
  text-decoration: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding: 0.4em 0.7em;
  font-size: 1rem;
  border: 1px solid transparent;
}

a.button,
button {
  border-radius: 8px;
  background-color: var(--button-background-color);
  font-family: var(--title-font), serif;
  color: var(--button-color);
  box-shadow: var(--box-shadow);
  text-decoration: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding: 0.4em 0.7em;
  font-size: 1rem;
  border: 1px solid transparent;
}
a.button.cta, a.button[type=submit],
button.cta,
button[type=submit] {
  background-color: var(--cta-button-background-color);
  color: var(--cta-button-color);
}

a.discord {
  display: inline-block;
  background: var(--discord-background-color) url("../images/logos/discord-THl4jDS.svg") no-repeat 0.5em 0.5em;
  background-size: 1.5em;
  color: var(--discord-color);
  text-decoration: none;
  padding: 0.5em 0.5em 0.5em 2.5em;
  box-sizing: content-box;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
}
a.discord:hover {
  color: var(--color-hugs-light-gray);
}

header {
  background-color: var(--header-background-color);
}
header .container:has(.logo) {
  padding: max(18px, 2vh) max(15px, 2vw) max(20px, 2vh) 0;
}
header .container:has(.toolbar) {
  padding: max(18px, 2vh) max(15px, 2vw) max(20px, 2vh) 0;
}
header .header .inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
header .header .inner a:has(.logo) {
  display: inline-block;
}
header .header .inner .logo {
  width: min(70%, 275px);
  max-width: 275px;
}
header .header .inner .burger {
  color: transparent;
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: transparent url("../images/icons/menu-white-IIjH_lT.svg") no-repeat center;
  background-size: 100%;
  opacity: 0.6;
}
header .header .inner nav {
  align-self: center;
}
header .header .inner nav ul {
  list-style: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: right;
  font-weight: 600;
  gap: max(15px, 2vw);
  font-size: 1.8em;
  font-family: var(--title-font), serif;
}
header .header .inner nav ul li {
  padding: 0;
}
header .header .inner nav a {
  color: var(--header-nav-color);
  text-decoration: none;
}
header .header .inner nav a:hover {
  color: var(--header-nav-hover-color);
  transition: color 200ms;
}

.container.content {
  background-color: var(--content-background-color);
  padding: var(--content-gutter) 0;
}
.container.content .inner {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  box-sizing: border-box;
  align-content: space-between;
  gap: var(--content-gutter);
}

footer {
  color: var(--footer-color);
}
footer h4 {
  color: inherit;
  font-size: 1.4rem;
  margin: 0 0 var(--content-gutter) 0;
}
footer h5 {
  color: inherit;
  font-size: 1rem;
  margin: 0 0 1em 0;
}
footer .social a {
  width: 50px;
  display: inline-block;
  margin-right: 0.5em;
}
footer .social a::before {
  display: none;
}
footer .social a img {
  width: 50px;
}
footer .footer-content .inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: var(--content-gutter) 0;
  gap: var(--content-gutter);
}
footer .footer-content .inner > div {
  flex-basis: 25%;
}
footer .footer-content .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .footer-content .inner li {
  list-style: none;
  line-height: 2em;
}
footer .footer-content .inner a {
  color: var(--color-hugs-white);
  text-decoration: none;
  position: relative;
}
footer .footer-content .inner a:hover {
  color: var(--link-hover-color);
}
footer .footer-content .inner .newsletter p {
  font-size: 0.8em;
}
footer .footer-content .inner .newsletter p a::before {
  display: none;
}
footer .footer-content .inner .newsletter input[type=email] {
  line-height: 1.2em;
  border: 0;
  margin-top: 1em;
}
footer .copyright .inner {
  font-size: 0.8rem;
  text-align: right;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--footer-copyright-border-color);
  color: var(--footer-copyright-color);
}
footer .copyright .inner a {
  color: var(--footer-copyright-color);
}

.container:has(.toolbar) {
  background-color: var(--toolbar-background-color);
  padding: 8px 8px;
}

.toolbar {
  background-color: var(--toolbar-background-color);
  color: var(--toolbar-color);
  font-family: var(--font), sans-serif;
  font-size: var(--font-size);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: right;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: right;
}
.toolbar a {
  text-decoration: none;
  display: inline-block;
  color: inherit;
}
.toolbar a.login {
  margin-left: 50px;
}
.toolbar a:hover {
  text-decoration: underline;
  color: inherit;
}
.toolbar .profile-slug {
  display: flex;
  justify-content: right;
  gap: 0.5em;
  width: min(20%, 200px);
}
.toolbar .profile-slug span {
  align-self: center;
}
.toolbar .profile-slug img.avatar {
  width: 30px;
  height: 30px;
  align-self: center;
}
.toolbar #toolbar-menu {
  width: max(20%, 200px);
  position: absolute;
  right: 0;
  top: 50px;
  background-color: var(--color-hugs-white);
  box-shadow: var(--box-shadow);
  display: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 9;
}
.toolbar #toolbar-menu li {
  padding: 0;
  margin: 0;
  background-color: var(--color-hugs-white);
}
.toolbar #toolbar-menu a {
  color: var(--background-color);
  display: inline-block;
  padding: 0.4em 0.6em;
  width: 100%;
  background-color: var(--color-hugs-white);
}
.toolbar #toolbar-menu a:hover {
  background-color: var(--background-color);
  color: var(--color-hugs-white);
  text-decoration: none;
}
@media only screen and (max-width: 600px) {
  .toolbar .preamble {
    display: none;
  }
}

.container.hero {
  color: var(--hero-color);
  background-color: var(--hero-background-color);
  height: var(--hero-height);
}
.container.hero .inner h1 {
  font-size: min(2.22rem, var(--hero-height));
  margin: 0;
  padding: 0;
  line-height: var(--hero-height);
  vertical-align: middle;
}
.container.hero .inner .burger {
  color: transparent;
  display: none;
  width: 2em;
  height: 2em;
  overflow: hidden;
  background: transparent url("../images/icons/menu-white-IIjH_lT.svg") no-repeat center;
  background-size: 100%;
  opacity: 0.6;
  align-self: center;
}

form,
.form-like {
  display: flex;
  flex-flow: row wrap;
  gap: var(--form-gutter);
  align-content: space-around;
  font-size: 1em;
}
form label,
.form-like label {
  text-align: right;
  flex-basis: 30%;
  line-height: 1.2em;
}
form label.required::after,
.form-like label.required::after {
  content: "*";
  color: var(--color-hugs-red);
  display: inline-block;
  margin-left: 0.2em;
  position: relative;
  top: -0.2em;
}
form input[type=text], form input[type=email], form input[type=password],
.form-like input[type=text],
.form-like input[type=email],
.form-like input[type=password] {
  flex-basis: 100%;
  padding: 0 0.3em;
  line-height: 1.2em;
}
form input[type=text], form input[type=email], form input[type=password], form input[type=checkbox],
.form-like input[type=text],
.form-like input[type=email],
.form-like input[type=password],
.form-like input[type=checkbox] {
  font-size: inherit;
  border-radius: 4px;
  border: 1px solid var(--form-input-border-color);
  box-shadow: var(--box-shadow);
}
form input[type=checkbox],
.form-like input[type=checkbox] {
  height: 1.2em;
  width: 1.2em;
}
form .form-row,
.form-like .form-row {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  gap: var(--form-input-gutter);
}
form .form-row.has-errors label,
.form-like .form-row.has-errors label {
  color: var(--form-error-color);
  font-weight: bold;
}
form .form-row.has-errors input,
.form-like .form-row.has-errors input {
  border-color: var(--form-error-color) !important;
  border-width: 2px;
}
form .form-row .form-input,
.form-like .form-row .form-input {
  display: flex;
  flex-flow: column;
  flex-basis: 60%;
  gap: var(--form-gutter);
}
form .form-row .form-input .help-text,
.form-like .form-row .form-input .help-text {
  font-size: 0.8em;
}
form .form-row .form-input .form-errors,
.form-like .form-row .form-input .form-errors {
  margin: 0;
  font-size: 0.8em;
  color: var(--form-error-color);
}
form .button-row,
.form-like .button-row {
  padding-top: 0;
  margin-top: 0;
}
form .inset,
.form-like .inset {
  border: 1px solid var(--color-hugs-light-gray);
  padding: var(--form-gutter);
  margin-top: var(--form-gutter);
}
form .inset h3,
.form-like .inset h3 {
  margin-top: 0;
}
form p,
.form-like p {
  margin: 0 5%;
  width: 100%;
  text-align: center;
}

.button-row {
  width: 100%;
  margin-top: var(--form-gutter);
  padding-top: var(--form-gutter);
}
.button-row:has(.cancel) {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.button-row.hasCancel {
  display: flex;
  flex-flow: row nowrap;
  justify-content: right;
}
.button-row.big {
  text-align: center;
}
.button-row.big button,
.button-row.big a {
  width: min(80%, 500px);
}

.profile .top {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--content-gutter);
  align-content: space-between;
}
.profile .top .welcome {
  flex-grow: 1;
}
.profile .top .avatar {
  flex-basis: 30%;
}
.profile .top .avatar img {
  width: 100%;
}
.profile .top .avatar a {
  margin-top: 1em;
  display: block;
  text-align: center;
}

.flashes {
  background-color: var(--content-background-color);
  padding-top: var(--content-gutter);
}
.flashes .inner {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  gap: var(--content-gutter);
}
.flashes .inner .flash {
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  font-size: 1.4em;
  padding: 0.5em 1em;
  color: var(--color-hugs-white);
}
.flashes .inner .flash.notice {
  background-color: var(--hero-background-color);
}
.flashes .inner .flash.success {
  background-color: var(--color-hugs-green);
}
.flashes .inner .flash.warning {
  background-color: var(--color-hugs-amber);
}
.flashes .inner .flash.error {
  background-color: var(--color-hugs-dark-red);
}

.island {
  border-radius: var(--island-border-radius);
  background: var(--island-color);
  box-shadow: var(--box-shadow);
  padding: var(--island-padding);
}
.island h2 {
  margin-top: 0;
  margin-bottom: 1em;
}
.island.danger-zone {
  background-color: var(--color-danger-zone);
  color: var(--color-hugs-red);
}
.island.danger-zone h2, .island.danger-zone a {
  color: inherit;
}
.island.danger-zone button {
  background-color: var(--color-hugs-red) !important;
}
.island.journal {
  x-background-image: url("../images/backgrounds/journal-bg-UcdEksy.png");
  x-background-repeat: no-repeat;
  x-background-position: bottom right;
  x-background-size: contain;
  position: relative;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 0.1em;
  background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 0.1em;
  background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 0.1em;
  background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 0.1em;
  background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 0.1em;
  background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 0.1em;
  background-size: 100% 1.18em;
}
.island.journal p {
  margin: 0 0 1em 20px;
  line-height: 1.2em;
}
.island.journal h2 {
  margin-left: 20px;
}
.island.journal::before {
  content: "";
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
}
.island.two-col {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: var(--content-gutter);
}
.island.two-col .lhs {
  flex-basis: 75%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.island.two-col .lhs .bottom {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.island.two-col .lhs .bottom p {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0;
  width: 100%;
}
.island.two-col .lhs .bottom form {
  justify-content: flex-end;
}
.island.two-col .rhs {
  flex-basis: 25%;
  flex-grow: 0;
  flex-shrink: 1;
}
.island.two-col .rhs img {
  width: 100%;
}

.archipelago {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: var(--content-gutter);
}
.archipelago.one-one .island:first-child {
  max-width: 50%;
  flex-basis: 50%;
}
.archipelago.one-one .island:last-child {
  max-width: 50%;
  flex-basis: 50%;
}
.archipelago.two-one .island:first-child {
  flex-basis: 55%;
  flex-grow: 1;
}
.archipelago.two-one .island:last-child {
  max-width: 45%;
  flex-basis: 45%;
  flex-shrink: 1;
}
.archipelago.one-two .island:first-child {
  max-width: 45%;
  flex-basis: 45%;
  flex-shrink: 1;
}
.archipelago.one-two .island:last-child {
  flex-basis: 55%;
  flex-grow: 1;
}
.archipelago.one-three .island:first-child {
  max-width: 25%;
  flex-basis: 45%;
  flex-shrink: 1;
}
.archipelago.one-three .island:last-child {
  flex-basis: 75%;
  flex-grow: 1;
}

img.avatar {
  border-radius: 50%;
}

.pullquote {
  background-color: var(--color-hugs-blue);
  color: var(--color-hugs-white);
}
.pullquote h1, .pullquote h2, .pullquote h3, .pullquote h4, .pullquote h5 {
  color: var(--color-hugs-yellow);
}
.pullquote div:has(.before) {
  position: relative;
}
.pullquote div:has(.before) .before {
  background: transparent url("../images/hug-top-RfIXNjd.svg") no-repeat top left;
  background-size: contain;
  display: block;
  height: 4em;
  width: 3em;
  position: absolute;
  top: calc(-0.6 * var(--island-padding-y));
  left: calc(-1 * var(--island-padding-x) - 0.65em);
}
.pullquote a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
}
.pullquote a.cta.button {
  background-color: var(--color-hugs-yellow);
  color: var(--color-hugs-blue);
}
.pullquote div:has(.after) {
  position: relative;
}
.pullquote div:has(.after) .after {
  background: transparent url("../images/hug-bottom-PSERFvG.svg") no-repeat top left;
  background-size: contain;
  display: block;
  height: 4em;
  width: 3em;
  position: absolute;
  top: calc(-1.5 * var(--island-padding-y));
  right: calc(-1 * var(--island-padding-x) - 0.95em);
}

blockquote {
  height: 100%;
  display: flex;
  align-items: center;
}
blockquote p {
  font-size: 1.2em;
  font-style: italic;
}
blockquote p .headline {
  font-style: normal;
  display: block;
  color: var(--color-hugs-yellow);
  font-family: var(--title-font), serif;
  font-size: 1.1em;
  margin-bottom: 0.4em;
}
blockquote p .author {
  display: block;
  margin-top: 0.4em;
  text-align: right;
  font-weight: bold;
}
blockquote p .author::before {
  content: "-- ";
}

.splide__track {
  height: 100%;
}

.splide__arrows button {
  opacity: 0.2 !important;
}

.breadcrumb {
  background-color: var(--content-background-color);
}
.breadcrumb img {
  height: 1em;
  position: relative;
  top: 0.15em;
}
.breadcrumb .inner {
  font-size: 0.9em;
  padding: 0.5em 0;
  color: var(--header-background-color);
}
.breadcrumb .inner a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb .inner a:last-child {
  font-weight: bold;
}
.breadcrumb .inner a:hover {
  color: var(--link-hover-color);
  transition: color 200ms;
}

.island:has(.calendar) {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.calendar {
  background-color: var(--color-hugs-blue);
  border-radius: 8px;
  aspect-ratio: 1;
  padding: 20px;
  box-shadow: var(--box-shadow);
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
}
.calendar .page {
  border-radius: 8px;
  aspect-ratio: 1;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
}
.calendar .page .title {
  background-color: var(--color-hugs-red);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px;
  color: var(--color-hugs-white);
  font-family: var(--title-font), serif;
  text-align: center;
  font-size: 1.3em;
}
.calendar .page .day {
  background-color: var(--color-hugs-white);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  flex-grow: 1;
  position: relative;
}
.calendar .page .day .day-inner {
  display: flex;
  flex-flow: column nowrap;
}
.calendar .page .day .day-inner h3 {
  text-align: center;
  font-size: 3em;
  padding: 0.5em 0 0 0;
  margin: 0;
}
.calendar .page .day .day-inner h2 {
  text-align: center;
  flex-grow: 1;
  font-size: 8em;
  margin: 0;
  padding: 0;
}
.calendar .page .previous, .calendar .page .next {
  position: absolute;
  top: 50%;
  overflow: hidden;
  height: 3em;
  width: 2em;
  opacity: 0.3;
}
.calendar .page .previous img, .calendar .page .next img {
  width: 100%;
  height: 100%;
  vertical-align: center;
}
.calendar .page .previous:hover, .calendar .page .next:hover {
  opacity: 0.6;
}
.calendar .page .previous {
  left: 32px;
}
.calendar .page .next {
  right: 32px;
}
.calendar .page .leaf {
  background-color: #000;
  opacity: 0.2;
  clip-path: polygon(100% 0, 0 100%, 0 100%, 100% 100%, 100% 0);
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 8px;
}

div.home .container {
  padding: calc(var(--gutter) / 2);
}
div.home .container:first-child {
  padding-top: var(--gutter);
}
div.home .container:last-child {
  padding-bottom: var(--gutter);
}
div.home .container#welcome {
  background: var(--color-hugs-yellow) url("../images/backgrounds/field1-tXq5sOb.jpg") no-repeat top left;
  background-size: cover;
}
div.home .container#pack {
  background-color: var(--color-hugs-yellow);
}
div.home .container#community {
  background: #041016 url("../images/backgrounds/field2-MURz_yV.jpg") no-repeat top left;
  background-size: cover;
}

.island.discord {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.island.discord h2 {
  flex-basis: 100%;
}
.island.discord > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: var(--content-gutter);
}
.island.discord > div .promo {
  flex-basis: 40%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.island.discord > div .promo p.powered-by {
  font-size: 0.8em;
  text-align: center;
}
.island.discord > div .promo p.powered-by img {
  width: 50%;
}
.island.discord > div .graphic {
  flex-basis: 60%;
  position: relative;
}
.island.discord > div .graphic img {
  width: 100%;
  border-radius: 5px;
}
.island.discord > div .graphic iframe {
  width: 100%;
  height: 300px;
  border-radius: 5px;
}
.island.discord > div .graphic a {
  color: var(--color-hugs-white);
  font-size: 1.4em;
  border: 2px solid var(--color-hugs-white);
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  padding: 0.4em 1em;
  position: absolute;
  left: 10%;
  bottom: 15%;
}

.container.content.settings .inner {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--content-gutter);
  justify-content: space-between;
}
.container.content.settings .inner nav {
  flex-basis: 20%;
}
.container.content.settings .inner nav ul {
  list-style: none;
  padding: 0;
}
.container.content.settings .inner nav ul a {
  text-decoration: none;
  line-height: 2em;
}
.container.content.settings .inner nav ul a.selected {
  font-weight: bold;
}
.container.content.settings .inner nav li.separator {
  border-bottom: 1px solid var(--color-hugs-blue);
  margin: 1em 0;
}
.container.content.settings .inner .settings-content {
  flex-basis: 80%;
}

.settings.avatar .settings-content .island {
  display: flex;
  flex-flow: row wrap;
  gap: var(--content-gutter);
}
.settings.avatar .settings-content .island h2 {
  flex-basis: 100%;
  width: 100%;
}
.settings.avatar .settings-content .island .current {
  flex-basis: 35%;
  text-align: center;
  border-right: 1px solid var(--color-hugs-light-gray);
}
.settings.avatar .settings-content .island .current a {
  display: block;
  text-align: center;
  text-decoration: none;
}
.settings.avatar .settings-content .island form {
  flex-basis: 55%;
}

.settings.connections .connection {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--content-gutter);
}
.settings.connections .connection .detail h3 {
  margin-top: 0;
}
.settings.connections .connection.discord .logo a {
  display: inline-block;
  height: 6em;
  width: 6em;
  background: var(--discord-background-color) url("../images/logos/discord-THl4jDS.svg") no-repeat center;
  background-size: 3em;
  border-radius: 8px;
  color: transparent;
}

body:has(.settings.danger) .hero {
  background-color: var(--color-hugs-red);
}
body:has(.settings.danger) .hero h1 {
  color: var(--color-danger-zone);
}

.container.login-page .or {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}

.learning-pagination {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.learning-pagination a {
  text-decoration: none;
}
.learning-pagination a:hover {
  text-decoration: underline;
}
.learning-pagination a.course {
  font-weight: bold;
}
.learning-pagination a.previous, .learning-pagination a.next {
  display: inline-block;
  width: 10em;
}
.learning-pagination a.next {
  text-align: right;
}

.dadhug video {
  width: 100%;
  aspect-ratio: 0.56;
  background-color: var(--color-hugs-blue);
}
.dadhug audio {
  background-color: var(--color-hugs-blue);
  width: 100%;
}

.island.toolkit {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: var(--gutter);
}
.island.toolkit h2 {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 0;
}
.island.toolkit .toolkit-inner {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: var(--gutter);
  align-items: center;
}
.island.toolkit .toolkit-inner a {
  display: block;
  flex-basis: 60%;
  text-decoration: none;
}
.island.toolkit .toolkit-inner a:has(img) {
  flex-basis: 40%;
}
.island.toolkit .toolkit-inner a:has(img) img {
  width: 100%;
}

.island.uh-oh {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  gap: var(--gutter);
}

div:has(p.feedback) {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
div:has(p.feedback) p.feedback {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9em;
  gap: 1em;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.6em 1.2em;
}
div:has(p.feedback) p.feedback img {
  width: 2em;
  vertical-align: center;
}

.sub-bundle .items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: var(--gutter);
}
.sub-bundle .items .resource {
  flex-basis: 45%;
  flex-shrink: 1;
  flex-grow: 1;
}

.archipelago .sub-bundle .items {
  flex-flow: column nowrap;
}
.archipelago .sub-bundle .items .resource {
  flex-grow: 1;
}

.learningCourse .two-col {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  gap: var(--gutter);
}
.learningCourse .two-col .lhs {
  flex-basis: 70%;
}
.learningCourse .two-col .rhs {
  flex-basis: 30%;
}
.learningCourse .two-col .rhs img {
  width: 100%;
}
.learningCourse .testimonials {
  justify-content: space-between;
  gap: var(--gutter);
  column-count: 2;
}
.learningCourse .testimonials p {
  break-inside: avoid;
  background-color: var(--color-hugs-blue);
  color: var(--color-hugs-white);
  border-radius: 8px;
  padding: 1em 2em 1em 3em;
  margin: 0 0 1em 0;
  position: relative;
}
.learningCourse .testimonials p:before {
  content: "“";
  position: absolute;
  top: 0;
  left: 0.25em;
  font-size: 4em;
}
.learningCourse .testimonials p:nth-child(2n-1) {
  background-color: var(--color-hugs-yellow);
  color: var(--color-hugs-blue);
}

.content.learningModule {
  background: var(--content-background-color) url("../images/backgrounds/30day1-h5ncA-Q.jpg") no-repeat bottom center;
  background-size: cover;
}

#bundle-emdr .sub-bundle .items .resource {
  flex-basis: 100%;
}

@media screen and (max-width: 600px) {
  :root {
    --font-size: 16px;
  }
  header .header .inner {
    flex-flow: row wrap;
    justify-content: space-between;
  }
  header .header .inner .burger {
    display: block;
  }
  header .header .inner nav {
    flex-basis: 100%;
  }
  header .header .inner nav ul {
    display: none;
    padding-top: 1em;
  }
  header .header .inner nav ul li {
    text-align: center;
    font-size: 1.2rem;
    line-height: 2em;
  }
  form label,
  .form-like label {
    text-align: left;
    flex-basis: 100%;
    padding-bottom: 0.5em;
  }
  form .form-row,
  .form-like .form-row {
    gap: 0;
  }
  form .form-input,
  .form-like .form-input {
    flex-basis: 100% !important;
  }
  form .form-row:has(input[type=checkbox]),
  .form-like .form-row:has(input[type=checkbox]) {
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  form .form-row:has(input[type=checkbox]) .form-input,
  .form-like .form-row:has(input[type=checkbox]) .form-input {
    flex-flow: row;
    justify-content: right;
  }
  .profile .top .avatar {
    display: none;
  }
  .island.metactf > div {
    flex-flow: row wrap;
  }
  .island.metactf > div .graphic {
    flex-basis: 100%;
  }
  footer .footer-content .inner {
    flex-flow: column wrap;
    gap: 1rem;
  }
  footer .footer-content .inner h4 {
    font-size: 1.4rem;
  }
  footer .footer-content .inner > div {
    flex-basis: 0;
    width: 100%;
  }
  .container.hero .inner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
  }
  .container.hero .inner .burger {
    display: inline-block;
  }
  .container.hero .inner h1 {
    font-size: 2em;
  }
  .container.content.settings ul#settings-menu {
    display: none;
  }
  .container.content.settings .inner {
    flex-flow: column nowrap;
  }
  .container.content.settings.avatar .settings-content .island form {
    flex-basis: 100%;
  }
  .container.content.settings.avatar .settings-content .island .current {
    flex-basis: 100%;
    border: 0;
  }
  .container.content.settings.avatar .settings-content .island .form-input:has(input[type=file]) {
    padding-top: 1em;
  }
  .archipelago {
    flex-flow: column nowrap;
    margin-top: var(--content-gutter);
  }
  .archipelago.one-one .island:first-child {
    flex-grow: 1;
    flex-shrink: 0;
    max-width: none;
  }
  .archipelago.one-one .island:last-child {
    flex-grow: 1;
    flex-shrink: 0;
    max-width: none;
  }
  .archipelago.two-one .island:first-child {
    flex-grow: 1;
    flex-basis: 100%;
  }
  .archipelago.two-one .island:last-child {
    flex-grow: 1;
    flex-basis: 100%;
    max-width: none;
  }
  .archipelago.one-two .island:first-child {
    flex-grow: 1;
    flex-shrink: 0;
    max-width: none;
  }
  .archipelago.one-two .island:last-child {
    flex-basis: 100%;
  }
  .container.content .inner {
    gap: var(--content-gutter);
  }
  .home .container#pack .archipelago {
    flex-direction: column-reverse;
  }
  .learningCourse .hero .inner h1 {
    font-size: 1.3em;
  }
  .learningCourse .testimonials {
    column-count: 1;
  }
  .island.two-col {
    flex-flow: column-reverse;
  }
  .island.two-col .lhs h2 {
    margin-bottom: 0;
  }
  .island.two-col .lhs .bottom p {
    display: block;
  }
  .island.two-col .lhs .bottom a {
    margin-bottom: 10px;
  }
  .island.discord > div {
    flex-flow: column nowrap;
    gap: var(--gutter);
  }
  .calendar {
    aspect-ratio: auto;
  }
  div:has(p.feedback) p.feedback a {
    display: block;
  }
  .sub-bundle .items {
    flex-flow: column nowrap;
  }
  .sub-bundle .items .resource {
    width: 100%;
  }
  .archipelago .sub-bundle .items {
    flex-flow: column nowrap;
  }
  .archipelago .sub-bundle .items .resource {
    width: 100%;
    flex-grow: 1;
  }
}
* {
  box-sizing: border-box;
}

html {
  font-family: var(--font), sans-serif;
  font-size: var(--font-size);
}

h1, h2, h3, h4, h5 {
  font-family: var(--title-font), serif;
  color: var(--title-color);
}

body {
  color: var(--color);
  background-color: var(--background-color);
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
  font-weight: 400;
  width: 100%;
}
body .container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
body .container > .inner {
  max-width: var(--max-site-width);
  width: var(--site-width);
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
  transition: color 200ms;
}

.container.login-page form,
.forgot-password form {
  font-size: 1.3rem;
}
.container.login-page a, .container.login-page button,
.forgot-password a,
.forgot-password button {
  font-size: 1.5rem;
}

/*# sourceMappingURL=compiled-app.css-3olmjjl.map */