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


@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-tanker;
  }
  label {
    @apply font-tanker uppercase;
  }
}

@layer components {
  [type=checkbox],
  [type=radio] {
    height: 16px;
    width: 16px;
  }
  .title-bg {
    @apply bg-yellow-200 pt-2 pb-1 px-1 box-decoration-clone;
  }

  .input {
    @apply text-base text-black block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full
  }

  .btn {
    @apply rounded py-3 px-5 inline-block font-tanker cursor-pointer text-center
      border border-brand-secondary text-brand-secondary
       hover:bg-brand-secondary-50;
  }

  .btn-primary {
    @apply btn bg-brand-secondary text-white hover:bg-brand-secondary-600;
  }

  .btn-toolbar {
    @apply relative rounded w-10 h-10 flex justify-center items-center bg-brand-primary p-2
    hover:bg-brand-primary-500 hover:text-brand-primary-800;
  }

  .btn-toolbar--inverted {
    @apply btn-toolbar border border-brand-primary-600 bg-white text-brand-primary-700
    hover:bg-brand-primary-200 hover:text-brand-primary-800;
  }

  .text-stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
  }

  .page-modal {
    @apply absolute top-5 left-24 z-20 w-[600px] h-[700px] overflow-x-auto bg-white rounded p-4 border
  }
}
/*
 * 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.
 *


 */

 @font-face {
   font-family: 'Tanker-Regular';
   src: url(/../fonts/Tanker-Regular.woff2) format('woff2'),
        url(/../fonts/Tanker-Regular.woff) format('woff'),
        url(/../fonts/Tanker-Regular.ttf) format('truetype');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
   size-adjust: 120%;
 }

html {
  font-size: min(100vw, 600px);
}

@media screen and (max-width:600px) {
  html {
    font-size: 100vw;
  }
}

.ql-size .ql-picker-label::before,
.ql-size .ql-picker-item::before {
  content: attr(data-value) !important;
}

.ql-container.ql-snow {
  border: none !important;
}

.ql-editor {
  padding: 0 !important;
  line-height: inherit !important;
}

.ql-toolbar.ql-snow {
  border-color: currentColor !important;
  position: absolute;
  top: -50px;
}

.ql-container {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
    Noto Color Emoji !important;
}

.sjx-wrapper {
  position: relative !important;
  width: 100%;
  height: 100%;
}

.giphy-gif {
  cursor: pointer;
}