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

@layer components {
  .btn-primary {
    @apply py-6 px-4 !important;
  }

  .container {
    @apply mx-auto px-3;
    margin: 0 auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .flash {
    @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg;
  }

  .flash.notice {
    @apply bg-green-100 border border-green-400 text-green-700;
  }

  .flash.alert {
    @apply bg-red-100 border border-red-400 text-red-700;
  }
}

@layer base {
  h1 {
    @apply text-gray-900 text-3xl md:text-5xl font-extrabold mb-2;
  }
  h2 {
    @apply text-xl;
  }

}

.page-header {
  @apply text-gray-900 text-3xl md:text-5xl font-extrabold mb-2 !important;
}

.button-primary{ 
  @apply w-full rounded-full py-3 px-5 bg-indigo-600 text-white text-center block font-medium mt-4;
}

.button-secondary{
  @apply w-full rounded-full py-3 px-5 text-center block font-medium mt-4 border border-purple-600;
}

#main-container{
  padding-top:3.5rem;
  padding-bottom:6em;
}

#qualifying_predictions,
#qualifying_results,
#sprint_predictions,
#sprint_results,
#race_predictions,
#race_results {
  overflow-x: scroll!important;
}

.track-outline{
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
.track-outline-box{
  background-color: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.global-leaderboard-bg{
  background: rgb(6,182,212);
  background: linear-gradient(90deg, rgba(6,182,212,1) 50%, rgba(59,130,246,1) 100%);
}
/*
 * 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.
 *


 */

 .whatsapp-callout {
    background-color: #25D366;
    color: white;
    padding: 10px;
    text-align: center;
 }

 .custom-background {
   background-image: url('https://images.pexels.com/photos/29817508/pexels-photo-29817508/free-photo-of-thrilling-night-race-at-abu-dhabi-grand-prix.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
   background-size: cover;
   /* filter: blur(4px) brightness(0.5); */
 }