@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
[type=button],[type=reset],[type=submit],button {
  background-color: blue;
}

[type=button],[type=reset],[type=submit],button,
.button,
.button:visited {
  display: inline;
  padding: 0.75em 1.5em;
  margin: 0 0 var(--space-m);
  background: var(--color-tint);
  font-size: var(--type-m);
  text-align: center;
  line-height: 1.25;
  border: 0;
  border-radius: 0.5em;
  text-decoration: none;
}

.button:hover,
.button:active {
  background: var(--color-tint-alt);
}

@media (min-width: 45em) {
  button {
    width: auto;
  }
}
:root {
    --color-white: #fff;
    --color-black: #191919;
    --color-dark-gray: #262626;
    --color-gray: #666;
    --color-beige: #fbf7f0;
    --color-yellow: #ffe801;
    --color-teal: #11b5ff;
    --color-pink: #e9509a;
    --color-blue: #317AF6;
    --color-text: var(--color-black);
    --color-text-subtle: var(--color-gray);
    --color-text-reversed: var(--color-white);
    --color-tint: var(--color-dark-gray);
    --color-tint-alt: var(--color-yellow);
    --color-background-main: var(--color-white);
    --color-background-index: var(--color-beige);
    --color-sheet: var(--color-white);
    --color-neutral: var(--color-beige);
    --color-link: var(--color-tint);
    --color-accent: var(--color-yellow);
    --color-positive: var(--color-teal);
    --color-negative: var(--color-pink);
    --color-border: #DBDBDC;
    --space-xs: 0.25em;
    --space-s: 0.5em;
    --space-m: 1em;
    --space-l: 1.5em;
    --space-xl: 3em;
    --space-xxl: 4em;
    --space-xxxl: 6em;
    --font-main: -apple-system, "Helvetica Neue", helvetica, "Apple Color Emoji", arial, sans-serif;
    --type-base: max(1.7em, min(calc(1em + 0.9vw), 2.4em));
    --type-xxxs: 55%;
    --type-xxs: 65%;
    --type-xs: 75%;
    --type-s: 85%;
    --type-m: 100%;
    --type-l: 120%;
    --type-xl: 150%;
    --type-xxl: 200%;
    --type-xxxl: 300%;
    --type-xxxxl: 600%;
    --leading-s: 1.1;
    --leading-m: 1.4;
    --leading-l:1.7
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --color-pink: #ef7baa;
      --color-text: var(--color-white);
      --color-text-reversed: var(--color-black);
      --color-neutral: var(--color-dark-gray);
      --color-background-main: #000;
      --color-background-index: #000;
      --color-sheet: var(--color-dark-gray);
      --color-border: #555;
    }
  }
  
  @media (min-width: 45em) {
    :root {
        --type-xxxl:390%
    }
  }
  
  *, :after, :before {
    box-sizing:border-box
  }
  
  ::-moz-selection, ::selection {
    color: var(--color-sheet);
    background-color:var(--color-text)
  }
  
  html {
    font-size: 10px;
    background-color: var(--color-background-main);
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 1em 0 0;
    font-family: var(--font-main);
    font-size: var(--type-base);
    /* font-variation-settings: "wdth" 180; */
    color: var(--color-text);
    background-color: transparent;
  }
  
  @media (min-width: 45em) {
    body { padding-top: 2em; }
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height:var(--leading-m)
  }
  
  h1 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--type-xxl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: var(--leading-s);
    transition:font-weight .2s ease
  }
  
  h2 {
    margin: var(--space-l) 0 var(--space-s) 0;
    font-size: var(--type-l);
    font-weight: 600;
    text-transform: uppercase;
    font-style:italic
  }
  
  h3 {
    margin: var(--space-l) 0 var(--space-xs) 0;
    font-size: var(--type-m);
    font-weight:900
  }
  
  h4, h5, h6 {
    margin: var(--space-m) 0 0 0;
    font-weight:600
  }
  
  dl, h4, h5, h6, ol, p, ul {
    font-size:var(--type-m)
  }
  
  dl, ol, p, ul {
    margin: 0 0 var(--space-m);
    line-height: var(--leading-l);
    font-weight:350
  }
  
  code {
    padding: .2em .3em;
    color: var(--color-text);
    background-color: var(--color-neutral);
    border-radius: 0.2em;
    font-size: 0.95em;
  }
  
  blockquote {
    position: relative;
    margin: var(--space-l) 0;
    padding: 0;
    quotes: "\201C""\201D""\2018""\2019";
    text-transform: uppercase;
    font-size: var(--type-m);
    letter-spacing: .1em;
    font-weight: 200;
    font-style:italic
  }
  
  ol, ul {
    padding: 0;
    list-style-position:outside
  }
  
  ul {
    list-style-type:none
  }
  
  ol {
    list-style-type:decimal
  }
  
  ol li, ul li {
    margin-left: 0;
    margin-bottom: var(--space-xs);
    position:relative
  }
  
  ol li ol, ol li ul, ul li ol, ul li ul {
    margin-left: 1.25em;
    margin-bottom: 0;
    font-size:var(--type-m)
  }
  
  b, strong {
    font-weight:600
  }
  
  em, i {
    font-style:italic
  }
  
  small {
    font-size:var(--type-s)
  }
  
  a, a:visited {
    color: var(--color-text);
    text-decoration-thickness: .1em;
    text-decoration-width: .1rem;
    font-weight: 600;
  }
  
  a:hover {
    -webkit-text-decoration-color: var(--color-yellow);
    text-decoration-color: var(--color-yellow);
    text-decoration-thickness: .2em;
    text-decoration-width:.2em
  }
  
  embed, img, object, video {
    max-width: 100%;
    height:auto
  }
  
  hr {
    width: 100%;
    margin: var(--space-xl) 0;
    border: 0;
    border-top:.1rem solid var(--color-text)
  }
  
  input[type=text] {
    display: block;
    width: 100%;
    padding: 0.75em;
    margin: 0 0 var(--space-m);
    font-size: var(--type-m);
    color: var(--color-text);
    background: var(--color-sheet);
    border: 1px solid var(--color-border);
  }
  
  input[type=number] {
    background: var(--color-sheet);
  }
a,
a:visited {
  font-weight: inherit;
}

.page-title:not(.display-native) {
  display: none;
}

input[type=text]:focus {
  outline: 0;
}

.actions__item {
  text-decoration: none;
}

input[type=submit],
button,
button:visited {
  display: inline;
  padding: 0.75em 1.5em;
  margin: 0 0 var(--space-m);
  background: var(--color-tint);
  font-size: var(--type-m);
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  border: 0;
  border-radius: 0.5em;
}
.display.--block {
  display:block
}

.display.--inline {
  display:inline
}

.display.--none {
  display:none
}

@media (max-width: 44.9em) {
  .display.--none-s {
      display:none
  }
}

.display.--sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow:hidden
}

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(80vw, 100%) 1fr;
  align-items: start;
  grid-column-gap: min(5vw, 4rem);
  column-gap:min(5vw, 4rem)
}

.grid > .grid {
  grid-column:1/-1
}

.grid > :not([class*=grid]) {
  grid-column:2
}

.grid.--dense {
  grid-auto-flow:dense
}

@media (min-width: 45em) {
  .grid {
      grid-template-columns: 1fr repeat(12, minmax(2rem, 100%)) 1fr;
      grid-column-gap: min(2.5vw, 4rem);
      column-gap:min(2.5vw, 4rem)
  }

  .grid > :not([class*=grid]) {
      grid-column:4/span 8
  }
}

@media (min-width: 90em) {
  .grid {
      grid-template-columns: 1fr repeat(12, 7.5rem) 1fr;
      grid-column-gap: 4rem;
      column-gap:4rem
  }
}

.grid__item {
  grid-column-start:2
}

.grid__item.--bleed-left {
  grid-column:1/span 2
}

.grid__item.--bleed-right {
  grid-column-end:-1
}

.grid__item.--bleed-full {
  grid-column:1/-1
}

@media (min-width: 45em) {
  .grid__item {
      grid-column:4/span 8
  }

  .grid__item.--span-3 {
      grid-column-end:span 3
  }

  .grid__item.--span-4 {
      grid-column-end:span 4
  }

  .grid__item.--span-5 {
      grid-column-end:span 5
  }

  .grid__item.--span-6 {
      grid-column-end:span 6
  }

  .grid__item.--span-7 {
      grid-column-end:span 7
  }

  .grid__item.--span-8 {
      grid-column-end:span 8
  }

  .grid__item.--span-9 {
      grid-column-end:span 9
  }

  .grid__item.--span-10 {
      grid-column-end:span 10
  }

  .grid__item.--span-11 {
      grid-column-end:span 11
  }

  .grid__item.--span-12 {
      grid-column:2/span 12
  }

  .grid__item.--start-1 {
      grid-column-start:2
  }

  .grid__item.--start-2 {
      grid-column-start:3
  }

  .grid__item.--start-3 {
      grid-column-start:4
  }

  .grid__item.--start-4 {
      grid-column-start:5
  }

  .grid__item.--start-5 {
      grid-column-start:6
  }

  .grid__item.--start-6 {
      grid-column-start:7
  }

  .grid__item.--start-7 {
      grid-column-start:8
  }

  .grid__item.--start-8 {
      grid-column-start:9
  }

  .grid__item.--start-9 {
      grid-column-start:10
  }

  .grid__item.--start-10 {
      grid-column-start:11
  }

  .grid__item.--start-auto {
      grid-column-start:auto
  }

  .grid__item.--place-start {
      align-self: start;
      justify-self: start;
      place-self:start
  }

  .grid__item.--place-center {
      align-self: center;
      justify-self: center;
      place-self:center
  }

  .grid__item.--place-end {
      align-self: end;
      justify-self: end;
      place-self:end
  }
}

.pad.--hard {
  padding:var(--space-m)
}

.pad.--firm {
  padding:var(--space-l)
}

.pad.--soft {
  padding:var(--space-xl)
}

.pad.--top-hard {
  padding-top:var(--space-m)
}

.pad.--top-firm {
  padding-top:var(--space-l)
}

.pad.--top-soft {
  padding-top:var(--space-xl)
}

.pad.--bottom-hard {
  padding-bottom:var(--space-m)
}

.pad.--bottom-firm {
  padding-bottom:var(--space-l)
}

.pad.--bottom-soft {
  padding-bottom:var(--space-xl)
}

.pad.--left-hard {
  padding-left:var(--space-m)
}

.pad.--left-firm {
  padding-left:var(--space-l)
}

.pad.--left-soft {
  padding-left:var(--space-xl)
}

.pad.--right-hard {
  padding-right:var(--space-m)
}

.pad.--right-firm {
  padding-right:var(--space-l)
}

.pad.--right-soft {
  padding-right:var(--space-xl)
}

.space.--top-flush {
  margin-top:0
}

@media (min-width: 45em) {
  .space.--top-flush-soft {
      margin-top:0
  }
}

.space.--top-s {
  margin-top:var(--space-s)
}

.space.--top-m {
  margin-top:var(--space-m)
}

.space.--top-l {
  margin-top:var(--space-l)
}

.space.--top-xl {
  margin-top:var(--space-xl)
}

.space.--top-xxl {
  margin-top:var(--space-xxl)
}

.space.--top-pull-s {
  margin-top:calc(var(--space-s) * -1)
}

.space.--top-pull-m {
  margin-top:calc(var(--space-m) * -1)
}

.space.--top-pull-l {
  margin-top:calc(var(--space-l) * -1)
}

.space.--top-pull-xl {
  margin-top:calc(var(--space-xl) * -1)
}

.space.--top-pull-xxl {
  margin-top:calc(var(--space-xxl) * -1)
}

.space.--bottom-flush {
  margin-bottom:0
}

.space.--ends-flush {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 45em) {
  .space.--bottom-flush-soft {
      margin-bottom:0
  }
}

.space.--bottom-s {
  margin-bottom:var(--space-s)
}

.space.--bottom-m {
  margin-bottom:var(--space-m)
}

.space.--bottom-l {
  margin-bottom:var(--space-l)
}

.space.--bottom-xl {
  margin-bottom:var(--space-xl)
}

.space.--bottom-xxl {
  margin-bottom:var(--space-xxl)
}

.space.--bottom-pull-s {
  margin-bottom:calc(var(--space-s) * -1)
}

.space.--bottom-pull-m {
  margin-bottom:calc(var(--space-m) * -1)
}

.space.--bottom-pull-l {
  margin-bottom:calc(var(--space-l) * -1)
}

.space.--bottom-pull-xl {
  margin-bottom:calc(var(--space-xl) * -1)
}

.space.--bottom-pull-xxl {
  margin-bottom:calc(var(--space-xxl) * -1)
}

.text.--size-xxxs {
  font-size:var(--type-xxxs)
}

.text.--size-xxs {
  font-size:var(--type-xxs)
}

.text.--size-xs {
  font-size:var(--type-xs)
}

.text.--size-s {
  font-size:var(--type-s)
}

.text.--size-m {
  font-size:var(--type-m)
}

.text.--size-l {
  font-size:var(--type-l)
}

.text.--size-xl {
  font-size: var(--type-xl);
  line-height:var(--leading-m)
}

.text.--size-xxl {
  font-size: var(--type-xxl);
  line-height:var(--leading-m)
}

.text.--size-xxxl {
  font-size: var(--type-xxxl);
  line-height:var(--leading-s)
}

.text.--size-xxxxl {
  font-size: var(--type-xxxxl);
  line-height: var(--leading-s);
  letter-spacing:-.02em
}

.text.--weight-200 {
  font-weight:200
}

.text.--weight-300 {
  font-weight:300
}

.text.--weight-400 {
  font-weight:400
}

.text.--weight-500 {
  font-weight:500
}

.text.--weight-600 {
  font-weight:600
}

.text.--weight-700 {
  font-weight:700
}

.text.--weight-800 {
  font-weight:800
}

.text.--align-left {
  text-align:left
}

.text.--align-center {
  text-align:center
}

.text.--align-right {
  text-align:right
}

.text.--leading-s {
  line-height:var(--leading-s)
}

.text.--leading-m {
  line-height:var(--leading-m)
}

.text.--leading-l {
  line-height:var(--leading-l)
}

.text.--color-subtle {
  color: var(--color-text-subtle);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */