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

@layer components{
  .container {
    @apply max-w-7xl self-center mx-auto;
  }

  .gradient-text {
      @apply bg-gradient-to-r from-white to-gray-600 bg-clip-text text-transparent;
  }

  .yellow-gradient-text {
    @apply bg-gradient-to-r from-white to-[#C5FD34] bg-clip-text text-transparent;
}
}
/*
 * 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.
 *



 */


@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Lato:ital:wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Racing+Sans+One&display=swap');


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Brand palette. Hex vars feed hand-written CSS (.text-primary, etc.);
       the matching *-rgb channels feed the Tailwind color utilities in
       config/tailwind.config.js so bg-primary, border-primary/40, hover:*, work. */
    --color-primary: #C5FD34;             --color-primary-rgb: 197 253 52;
    --color-secondary:#FFFFEF;            --color-secondary-rgb: 255 255 239;
    --color-secondary-dark: #F8FFE5;      --color-secondary-dark-rgb: 248 255 229;
    --color-secondary-darkest: #8a8a8a;   --color-secondary-darkest-rgb: 138 138 138;
    --color-btn: #19181F;                 --color-btn-rgb: 25 24 31;
    --color-shadow: #303030;              --color-shadow-rgb: 48 48 48;
    --font-primary: "Outfit", sans-serif;
    --font-secondary: 'Lato', sans-serif;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
}

p {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
}

h1 {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
}

h2 {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
}

h3 {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
}

.font-lato {
    font-family: var(--font-secondary) !important;
}

.btn {
    font-family: var(--font-secondary);
}

.btn:hover {
    border: 1.5px solid var(--color-primary);
}

.text-primary {
    color: var(--color-primary)
}

.text-secondary {
    color: var(--color-secondary);
}

.text-secondary-dark {
    color: var(--color-secondary-dark)
}

.text-secondary-darkest {
    color: var(--color-secondary-darkest)
}

.bg-shadow {
    background-color: var(--color-shadow);
}

li {
    font-family: var(--font-secondary);
    color: var(--color-secondary-dark)
}

li:hover{
    color: var(--color-primary); 
}

.bg-globe {
    background-image: url(/assets/globe-b7317528f00233f4aad9db8fab3109ea9ca8f91b3d9f99a748b10c2eff9437cc.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.bg-color {
    background-color: var(--color-primary);
}

.banner-top-space {
    margin-top: 9rem !important;
}

.blink-grid {
    background-image: url(/assets/grid/blink-grid-1e18daa2796361fe230822dd398fa30904eb666a1ae11b601aad22045dec8a94.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.small-grid {
    background-image: url(/assets/grid/small-grid-05bb4219f2b4d397c6e90d5e0fdc8f8c4d2a7d69c1271c3b08349f0fec5e4f60.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.xs-grid {
    background-image: url(/assets/grid/xs-grid-6ea36f948d83cb700028440f15d25d9860c070fd60aa3a69bbd2a901e9ba6918.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.footer-grid {
    background-image: url(/assets/grid/footer-grid-4e755dd7c63c2c5c153be1ffdfa69c527ea6b316442eba3ac59f7bfc8a4dfab4.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}