@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

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

/*### CUSTOM CSS ###################*/

@layer utilities {
    #section_boundary{
        overflow-x: hidden;
    }
    #section_boundary.hidden{
        display:none
    }
}

/*--- font-face --------------------*/

@font-face {
    font-family: "verb-black";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/yellow_design_studio_-_verbblack-webfont-e7ebed718429d46a9ffbb0a38075e991f831bc4e01eadc787ed70bde20f343dd.woff2) format('woff2'), url(/assets/yellow_design_studio_-_verbblack-webfont-11cf54c4320f772155d8000fa84650a02d2fe040b4777bfd488096863934fbbe.woff) format('woff')
}

@font-face {
    font-family: "moranga";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/latinotype_-_moranga_medium-webfont-68e95e7d58b561bc3876084251005527c25755c156b863e38ec34da020e99e94.woff2) format('woff2')
}

@font-face {
    font-family: "jbm-regular";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/JetBrainsMono-Regular-a55cbf8d4a7841f46240a337cf6e2993922f0476909f78a0b8a78ec667050ba6.woff2) format('woff2')
}

@font-face {
    font-family: "kiro";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/Kiro-W03-Bold-Italic-15b4e5e238d63cfc8780a4fb9a0f983d5733bc0d86a16406a57df2581a34bcf8.woff2) format('woff2')
}

/*--- infinite scroll -----------------------*/


.infinite-scroll{
    animation: scroll-horizontal 50s linear infinite;
}

.infinite-wrapper:hover > .infinite-scroll{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes scroll-horizontal {
    from { transform: translateX(0);}
    to { transform: translateX(-100%);}
}

.container-hero{
    position: relative;
    @apply flex-none;
    @apply ml-4;
    @apply border;
    @apply border-gray-800;
    @apply rounded-lg;
    @apply w-64;
}

.image-hero{
    @apply rounded-lg;
    @apply w-64;
    @apply max-w-none;
}

.hero-content {
    @apply p-0;
}

.hero-status {
    position: absolute;
    left: 0;
    @apply border;
    @apply border-gray-800;
    @apply rounded-r-lg;
    @apply w-56;
    @apply bottom-4;
    @apply h-20;
}

/*--- custom -----------------------*/

.disclaim-h1{
    @apply text-orange-600;
    @apply font-['verb-black'];
    @apply text-5xl;
    @apply text-black;
    @apply pb-4;
}

.disclaim-h2{
    @apply pb-4;
    @apply pt-4;
    @apply font-['moranga'];
    @apply text-4xl;
    @apply capitalize;
}

.disclaim-h3{
    @apply py-2;
    @apply uppercase;
    @apply font-bold;
    @apply text-xl;
}

.disclaim-bold span{
    @apply font-sans;
    @apply text-base;
    @apply font-semibold;
    @apply uppercase;
}

li.disclaim-bold span{
    @apply text-base;
}

.disclaim-italic span{
    @apply italic;
}

.disclaim-underline span{
    @apply underline;
}

.disclaim-list{
    @apply list-disc;
    @apply list-outside;
    @apply pl-8;
    @apply font-sans;
}

.disclaim-list li{
    @apply pb-2;
}


.field_with_errors input{
    @apply input-warning;
}

.btn-normalize{
    @apply normal-case;
    @apply text-base;
    @apply p-2;
}

.btn-retro{
    @apply rounded-3xl;
    @apply border;
    @apply border-gray-800;
    @apply hover:border;
    @apply hover:border-gray-800;
    @apply hover:-translate-y-1;
    @apply hover:-translate-x-1;
    @apply hover:shadow-xl;
}

.btn-sub-current{
    @apply rounded-3xl;
    @apply bg-neutral-content;
    @apply border;
    @apply border-gray-800;
    @apply hover:bg-neutral-content;
    @apply hover:border-gray-800;
    @apply hover:-translate-y-1
}

.btn-sub{
    @apply rounded hover:-translate-y-1;
}

.flex-fix-50{
    @apply basis-1/2;
}

.input:disabled{
    @apply bg-neutral-content;
    @apply font-['jbm-regular'];
    @apply text-sm;
    cursor: default;
}

.select:disabled{
    @apply bg-neutral-content;
    @apply font-['jbm-regular'];
    @apply text-sm;
    background-image: none;
    cursor: default;
}

.btn:disabled {
    @apply bg-neutral-content;
    @apply border;
    @apply border-gray-800;
    @apply text-primary-content;
}
/*
 * 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.
 *


 */