@layer page {
  /* Ported from the old Craft/SCSS fit-hebrew page. Variables resolved:
   * gray #222, red #cc0000, white #fff, black #000. The #end section uses #d81e00. */

  @font-face {
    font-family: FitHebrew;
    src: url("FitHebrew-Variable.woff2") format("woff2"),
         url("FitHebrew-Variable.woff") format("woff");
    font-display: swap;
  }

  @font-face {
    font-family: "OEDoo";
    src: url("OEDooPro-Regular.woff2") format("woff2"),
         url("OEDooPro-Regular.woff") format("woff");
    font-weight: normal;
    font-display: swap;
  }

  /* ---- canvas ---- */
  main section {
    border: none;
    padding: 4em 0;
  }

  .wrapper {
    max-width: 64em;
    margin: 0 auto;
    padding: 0 1em;
    overflow: hidden;
  }

  .hebrew {
    direction: rtl;
  }

  /* ---- the big fit figures ---- */
  figure {
    position: relative;
    display: block;
    font-size: 2.5in;
    width: 100%;
    font-family: FitHebrew;
    margin: 1.2rem 0;
    padding: 0;
    line-height: 0.75em;
    text-align: center;
  }

  .hebrew figure {
    direction: rtl;
  }

  .big {
    font-size: 5in;
  }

  p, h3 {
    font-feature-settings: "ss04";
  }

  /* ---- section color schemes ---- */
  main section.gray {
    background: linear-gradient(to bottom, #222, #090909);
    color: #fff;
  }
  main section.gray a {
    color: #ffcccc;
  }
  main section.gray a:hover {
    color: #fff;
  }
  main section.gray figure {
    color: #fff;
  }

  main section.white {
    background: #fff;
    color: #000;
  }
  main section.white a {
    color: #cc0000;
  }
  main section.white a:hover {
    color: #e60000;
  }

  main section.red {
    background: linear-gradient(to bottom, #cc0000, #990000);
  }
  main section.red div,
  main section.red span,
  main section.red figure {
    color: #fff;
  }
  main section.red a {
    color: #ff6666;
  }
  main section.red a:hover {
    color: #fff;
  }

  main .red-hilite {
    color: #cc0000;
  }

  #charset figure {
    margin: 1.75rem 0;
  }
  #charset figure:nth-of-type(even) {
    color: #e6e6e6;
  }
  #charset figure:nth-of-type(odd) {
    color: #fff;
  }

  /* ---- columns + big buttons ---- */
  .fit-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .fit-columns > div {
    width: 50%;
    padding: 1em;
    box-sizing: border-box;
  }

  .big-button {
    display: block;
    font-weight: normal;
    padding: 1rem;
    letter-spacing: 0;
    background: #cc0000;
    margin: 0.25em 0;
    border: 1px;
    text-decoration: none;
  }
  .big-button:hover {
    background: #444;
  }
  .big-button figure {
    font-size: 6em;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #call-to-action .big-button {
    background: #cc0000;
    color: #fff;
    border-color: #ff1a1a;
  }
  #call-to-action .big-button:hover {
    background: #ff1a1a;
  }

  /* ---- styles section descriptions ---- */
  #styles .wrapper {
    position: relative;
  }
  #styles .font-desc {
    position: absolute;
    color: #fff;
    top: 1em;
    max-width: 27em;
    left: 4em;
  }
  #styles .font-desc2 {
    max-width: 38em;
    padding: 0.2rem;
    margin-right: auto;
  }

  #styles img.fill {
    width: 100%;
    height: auto;
    display: block;
  }

  #fit-title .wrapper {
    padding: 0.2em;
  }

  #end img,
  #animation img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* ---- resize box decoration ---- */
  .resize-box {
    position: relative;
    padding: 0 0.5em;
    border: 1px solid rgba(204, 0, 0, 1);
  }
  .resize-box .handle {
    font-size: 0.5rem;
    position: absolute;
    background: transparent;
    border: none;
    z-index: 5;
    box-sizing: border-box;
  }
  .resize-box .handle::after {
    display: block;
    position: absolute;
    content: "";
    background: #fff;
    border: 1px solid rgba(204, 0, 0, 1);
    box-sizing: border-box;
    width: 0.5rem;
    height: 0.5rem;
  }
  .resize-box .handle-n {
    display: none !important;
  }
  .resize-box .handle-s {
    bottom: -0.5em;
    left: 0;
    right: 0;
    height: 0.5rem;
    cursor: ns-resize;
  }
  .resize-box .handle-s::after {
    left: calc(50% - 0.5em);
  }
  .resize-box .handle-e {
    width: 0.5rem;
    right: -0.5em;
    top: 0;
    bottom: 0;
    cursor: ew-resize;
  }
  .hebrew .resize-box .handle-e {
    display: none !important;
  }
  .resize-box .handle-e::after {
    top: calc(50% - 0.5em);
  }
  .resize-box .handle-w {
    width: 0.5rem;
    display: none !important;
    left: -0.5em;
    top: 0;
    bottom: 0;
    cursor: ew-resize;
  }
  .hebrew .resize-box .handle-w {
    display: block !important;
  }
  .resize-box .handle-w::after {
    top: calc(50% - 0.5em);
  }
  .red .resize-box,
  .red .handle::after {
    border: 1px solid rgba(255, 255, 255, 0.7);
  }
  .red .handle::after {
    background: #c40000;
  }

  /* ---- tester input ---- */
  input.tester {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30em;
    padding: 0.4em 0.6em;
    font-size: 1.25rem;
  }
  input[type=text] {
    font-family: ui-sans-serif, system-ui, sans-serif;
  }

  @media screen and (max-width: 40rem) {
    .fit-columns {
      display: block;
    }
    .fit-columns > div {
      width: 100%;
    }
    main section {
      padding: 2em 0;
    }
    figure {
      font-size: 1.375in;
      margin: 0.8rem 0;
    }
    .big {
      font-size: 2.75in;
    }
    #styles .font-desc {
      position: relative;
      padding: 2em 0 0 0;
      margin-left: 0;
      margin-right: 0;
      max-width: 30em;
      top: inherit;
      left: 0;
      color: #fff;
    }
  }
}