/* FONTS */
@font-face {
  font-family: "PensumSans-Book";
  src: url('/assets/fonts/Pensum-Sans-Book.eot');
  src: url('/assets/fonts/Pensum-Sans-Book.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/Pensum-Sans-Book.woff2') format('woff2'),
    url('/assets/fonts/Pensum-Sans-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PensumSans-Bold";
  src: url('/assets/fonts/Pensum-Sans-Bold.eot');
  src: url('/assets/fonts/Pensum-Sans-Bold.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/Pensum-Sans-Bold.woff2') format('woff2'),
    url('/assets/fonts/Pensum-Sans-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PensumDisplay-Black";
  src: url('/assets/fonts/Pensum-Display-Black.eot');
  src: url('/assets/fonts/Pensum-Display-Black.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/Pensum-Display-Black.woff2') format('woff2'),
    url('/assets/fonts/Pensum-Display-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PensumSans-Black";
  src: url('/assets/fonts/Pensum-Sans-Black.eot');
  src: url('/assets/fonts/Pensum-Sans-Black.eot?#iefix') format('embedded-opentype'),
    url('/assets/fonts/Pensum-Sans-Black.woff2') format('woff2'),
    url('/assets/fonts/Pensum-Sans-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* RESET */

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
dl,dd,ol,ul,
form,fieldset,legend,
table,th,td,caption,
hr,
button{
  margin:0;
  padding:0;
}

button,
select,
option{
  cursor:pointer;
  font-size: inherit;
}
input,
input:focus,
textarea,
.text-input:active,
.text-input:focus,
textarea:active,
textarea:focus{
  cursor:text;
  outline: 0;
  font-size: inherit;
}
input[type='range']{
  cursor:ew-resize;
}

ul li,
ol li {
  list-style: none;
}

/* VARS */
:root {
  
  /* Theme exempt colors */
  --c-white-text:         #E4E4E7;   /* 90% */
  
  /* Transitions */
  --transition-duration: 0.5s;
  --transition-durationLong: 2s;
  --transition-delay: 0s;
  --transition-function: cubic-bezier(0.25, 1, 0.25, 1);
  --transition-props: var(--transition-duration) var(--transition-function) var(--transition-delay);
  
  /* Fonts */
  --PensumSans: "PensumSans-Book", "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  --PensumSans-Bold: "PensumSans-Bold", "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  --PensumSans-Black: "PensumSans-Black", "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  --PensumDisplay: "PensumDisplay-Black", "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  --Lucida: "LucidaGrande", "Lucida Grande", Tahoma, sans-serif;
  --Helvetica: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  
  --box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.175);
  --border-radius: 0.6rem;
}

.light_theme {
  --c-accent:              hsl(260deg, 80%, 45%);
  --c-accent-fill:         hsl(260deg, 70%, 55%);
  --c-accent-orange:       hsl(20deg, 90%, 60%);
  --c-accent-orange-hover: hsl(20deg, 95%, 65%);
  --c-accent-orange-text:  hsl(260deg, 5%, 5%);
  --c-accent-orange-text-hover:  hsl(260deg, 0%, 0%);
  --c-accent-teal:         hsl(180deg, 50%, 60%);
  --c-danger:              #DD0000;

  --c-content-bg:          hsl(260deg, 0%, 97%);
  --c-nav-bg:              hsl(260deg, 10%, 92%);
  --c-bg:                  hsl(260deg, 6%, 88%);
  
  --c-button-bg:           hsl(260deg, 0%, 10%);
  --c-button-accent-bg:    var(--c-accent);
  
  --c-pill-bg:             hsl(260deg, 10%, 85%);
  --c-pill-bg-hover:       hsl(260deg, 35%, 70%);
  --c-pill-bg-active:      var(--c-accent-fill);

  --c-button-ol:           #BFBFBF;
  --c-text-faded:          hsl(260deg, 10%, 60%);
  --c-text-faded-big:      hsl(260deg, 10%, 75%);
  --c-text:                hsl(260deg, 45%, 24%);
  --c-textfield-bg:        hsl(26deg, 20%, 94%);
  --c-text-hover:          hsl(260deg, 30%, 30%);
  --c-text-on-fill:        hsl(26deg, 20%, 92%);
  --c-text-on-fill-hover:  hsl(26deg, 20%, 100%);
  --c-textfield-text:      var(--c-text);
  --c-textfield-button-bg: var(--c-bg);

  --box-shadow: 0 0.75rem 1.5rem 0 rgba(0,0,0,0.2);
  --c-flash-bg:            hsla(260deg, 20%, 20%, 0.35);
  --c-flash-onboarding-bg: hsla(260deg, 70%, 55%, 0.8);
}

.dark_theme {
  --c-accent:              hsl(250deg, 100%, 70%);
  --c-accent-fill:         hsl(250deg, 45%, 20%);
  --c-accent-orange:       hsl(20deg, 60%, 50%);
  --c-accent-orange-hover: hsl(20deg, 65%, 55%);
  --c-accent-orange-text:  hsl(260deg, 5%, 5%);
  --c-accent-orange-text-hover:  hsl(260deg, 0%, 0%);
  --c-danger:              hsl(344deg, 80%, 50%);

  --c-content-bg:          hsl(250deg, 30%, 3%);
  --c-nav-bg:              hsl(250deg, 25%, 8%);
  --c-bg:                  hsl(250deg, 20%, 10%);
  
  --c-button-bg:           hsl(250deg, 65%, 45%);
  --c-button-accent-bg:    var(--c-button-bg);
  
  --c-pill-bg:             hsl(250deg, 15%, 15%);
  --c-pill-bg-hover:       hsl(250deg, 35%, 30%);
  --c-pill-bg-active:      var(--c-button-bg);

  --c-button-ol:           hsl(324deg, 5%, 45%);
  --c-text-faded:          hsl(324deg, 5%, 55%);
  --c-text-faded-big:      hsl(324deg, 5%, 25%);
  --c-text:                hsl(324deg, 5%, 70%);
  --c-textfield-bg:        hsl(324deg, 5%, 80%);
  --c-text-hover:          hsl(324deg, 5%, 90%);
  --c-text-on-fill:        hsl(324deg, 5%, 75%);
  --c-text-on-fill-hover: var(--c-text-hover);
  --c-textfield-text:      var(--c-accent-fill);
  --c-textfield-button-bg: var(--c-text);

  --box-shadow: 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.25);
  --c-flash-bg:            hsla(250deg, 20%, 20%, 0.75);
  --c-flash-onboarding-bg: hsla(250deg, 45%, 20%, 0.8);
}

/* BASE */

html {
  font-size: 62.5%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  font-size: 1.6em;
  line-height: 2rem;
  font-weight: 400;
  font-family: var(--PensumSans);
  color: var(--c-text);
  background-color: var(--c-accent-fill);
  height: 100%;
  overscroll-behavior-y: none;
}

a {
  color: var(--c-text);
}
a:hover {
  color: var(--c-accent);
}

b {
  font-family: var(--PensumSans-Bold);
}

.big {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.2em;
}

small {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--c-text-faded);
  letter-spacing: 0.2px;
  line-height: 1.75rem;
}

h1,
h2 {
  font-family: var(--PensumSans);
}

h2 {
  font-size: 2.7rem;
  line-height: 3rem;
  font-weight: 500;
  color: var(--c-accent);
}

h3 {
  font-size: 1.6rem;
  font-family: var(--PensumSans-Bold);
  color: var(--c-text-accent);
}

h4 {
  font-size: 1.4rem;
  font-family: var(--PensumSans-Bold);
  color: var(--c-text-faded);
}

hr {
  border: none;
  padding: 0;
  border-top: 1px solid var(--c-bg);
}

/* PRO ONLY BADGE */
.pro_only_no_demo:not(.demoing):hover::after,
.pro_only:not(.demoing):hover::after {
  content: "TRY";
  position: absolute;
  right: -1rem;
  top: -0.5em;
  font-size: 1.05rem;
  letter-spacing: 0.01rem;
  font-family: var(--PensumSans-Bold);
  background-color: var(--c-accent);
  border: 2px solid var(--c-bg);
  line-height: 1.4rem;
  padding: 0 0.5rem;
  color: var(--c-bg);
  border-radius: 1rem;
}
.pro_only_no_demo:not(.demoing):hover::after {
  content: "PRO";
}

.pro_only.demoing::after {
  content: "DEMO";
  position: absolute;
  right: -1rem;
  top: -0.5em;
  font-size: 1.05rem;
  letter-spacing: 0.01rem;
  font-family: var(--PensumSans-Bold);
  background-color: var(--c-nav-bg);
  border: 2px solid var(--c-bg);
  line-height: 1.4rem;
  padding: 0 0.5rem;
  color: var(--c-text-faded);
  border-radius: 1rem;
}

/* UTILITIES */

.u-hidden {
  display: none;
}


/* PRINTING CLASSES */
.print_clone {
  display: none;
}

.hero_expanded #_hj_feedback_container {
  display: none;
}
._hj-3ZiaL__MinimizedWidgetBottom__container,
._hj-XVgG4__ExpandedWidget__outerContainer {
  margin-right: -12px !important;
}

@media print {
  .locale-selector,
  .hero,
  .fontsNav,
  .viewOptions,
  .tagsContainer,
  .stickyWrapper,
  .flash,
  .modal,
  .scrollToTopButton,
  .autoScrollController,
  .floatingCloseButton,
  .Bannergroup,
  .previews > .outer,
  #_hj_feedback_container,
  .previewsContainer,
  footer
  {
    display: none !important;
  }
  .printProMessage {
    display: block !important;
  }
  .printable .printProMessage {
    display: none !important;
  }

  .printable .previewsContainer {
    display: block !important;
  }
  .printable .previewsContainer :is(.fontsNav, .viewOptions) {
    display: none !important;
  }
  .printable .previews {
    display: block !important;
    padding: 0 !important;
  }
  .printable .preview:not(.zoomed) {
    display: inline-block !important;
    margin-left: 0.6rem !important;
    margin-right: 0.6rem !important;
    outline: 2px solid hsl(260deg, 6%, 88%);
  }
  .printable .preview.zoomed {
    top: 0 !important;
    border-width: 0 !important;
  }
  .printable .preview.dense {
    margin-left: 0.2rem !important;
    margin-right: 0.2rem !important;
  }
  .printable .fontname {
    opacity: 1 !important;
    left: 0;
    width: 100%;
    max-width: none;
  }
  .printable .preview * {
    color: black !important;
  }
}