@font-face {
  font-family: 'Maison';
  src: url(/fonts/Maison-Light.woff2) format('woff2'),
       url(/fonts/Maison-Light.woff) format('woff');
}

@font-face {
  font-family: 'Maison';
  font-weight: 600;
  src: url(/fonts/Maison-Demi.woff2) format('woff2'),
       url(/fonts/Maison-Demi.woff) format('woff');
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* TODO: Move more to use this method or leave?! */

::selection {
  background: black;
  color: white;
}

::-moz-selection {
  background: black;
  color: white;
}

@layer components {
  .text-defaults {
    @apply font-body
           underline-offset-2
           decoration-2
           text-xl
           leading-8;
  }

  .rendered-markdown {
    @apply prose
           max-w-none
           text-defaults
           prose-a:decoration-1
           break-words
           md:break-normal;
  }

  .chunky-title__outer {
    @apply text-defaults
           mb-2;
  }

  .chunky-title__inner {
    @apply font-semibold
           text-brand-1
           text-5xl
           sm:text-7xl
           md:text-8xl
           lg:text-9xl
           decoration-8
           underline-offset-8;
  }

  .chunky-title__inner--interactive {    
    @apply hover:underline;
  }
}
.turbo-progress-bar {
  height: 5px;
  background-color: #FF4D00;
}
/*
 * 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.
 *


 */