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

@layer components {
  #grid-editor {

    td,
    th {
      @apply text-nowrap;
    }
  }

  .btn {
    @apply py-2 px-4 rounded-md;
  }

  .btn-blue {
    @apply btn bg-blue-500 text-white hover:bg-blue-400;
  }

  .btn-slate {
    @apply btn bg-slate-500 text-white hover:bg-slate-400;
  }

  .btn-gray {
    @apply btn bg-gray-200 hover:bg-gray-300 text-gray-800
  }

  .icon {
    width: 20px;
    height: 20px;
  }

  .badge {
    @apply inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10;
  }
}
body {
  height: 100vh;
}

.hero-image {
  height: 50%;
  background-image: url(/assets/construction-worker@2x-fab794017668c733568b1961740a6ef38d8bbdbf1651d26d3ba42cb6052d170e.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-attachment: scroll;
  background-color: #555
}

.hero-gradient {
  background-image: linear-gradient(90deg, black, transparent)
}

.signature-fencing-logo {
  height: 200px;
}

@media (max-width: 500px) {
  .hero-image {
    background-image: url(/assets/construction-worker-mobile-549ab231eb34421d0b563c1c3bf7574f18c6437d8c6a9ea2bc1551e324b92811.png);
    background-size: 100% auto;
  }

  .signature-fencing-logo {
    height: 100px;
  }
}
/*
 * 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.
 *


 */