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

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url('/static/fonts/NotoSans.ttf') format('truetype');
}

@layer components {
    .link-a a {
        @apply text-indigo-200 hover:underline underline-offset-4 hover:text-slate-50;
    }

    .link-underline a:hover {
        text-decoration-color: #34324f;
    }

    .link-hover-underline a:hover {
        text-decoration: underline;
        text-decoration-color: #34324f;
    }
    .daily-container {
        @apply max-w-4xl mb-16 flex-col pl-6 lg:pl-16 pr-6;
    }

    .daily-container .d-content {
        @apply text-gray-200;
        line-height: 1.5;
    }

    .daily-container a {
        @apply underline underline-offset-4;
        text-decoration-color: #605e86;
        text-decoration-thickness: 2px;
    }

    .daily-container a:hover {
        @apply underline underline-offset-4 text-blue-200;
    }

    .daily-container .d-content ul {
        @apply list-disc mb-4 pl-4;
    }
    .daily-container .d-content ul li {
        @apply mb-2;
    }
    .daily-container .d-links {
        @apply font-semibold text-blue-300;
    }

    .daily-container .d-pubdate {
        @apply text-xs xl:text-sm font-semibold text-gray-600 uppercase;
    }

    #feed-container {
        @apply mt-10 md:mt-0;
    }
    .feed-item {
        @apply flex z-10 flex-col max-w-4xl mb-8 pb-8 xl:mb-16;
        @apply md:relative;
    }
    .item-title {
        @apply ml-6 xl:ml-16 mr-6 xl:mr-16 text-2xl xl:text-4xl  font-extrabold text-slate-300;
    }

    .feed-content h1 {
        @apply ml-0 mr-0 text-2xl xl:text-4xl mt-2 mb-2 font-bold text-gray-300;
    }
    .feed-content h2 {
        @apply text-2xl xl:text-3xl mt-2 mb-2 font-bold text-gray-300;
    }

    .feed-content h3 {
        @apply text-xl xl:text-2xl mt-2  mb-2 font-bold text-gray-300;
    }

    .feed-content {
        @apply ml-6 xl:ml-16 mr-6 xl:mr-16 text-lg text-gray-200;
        line-height: 1.7;
    }

    .feed-content a {
        @apply underline underline-offset-4;
        text-decoration-color: #605e86;
        text-decoration-thickness: 2px;
    }

    .feed-content a:hover {
        @apply underline underline-offset-4 text-blue-200;
    }

    .feed-content p {
        @apply mb-4;
    }

    .feed-content blockquote {
        @apply border-l-2 border-stone-200 pl-4 my-4 text-stone-200;
    }

    .feed-content figcaption {
        @apply mt-2 text-sm mb-3 text-slate-500;
    }

    .feed-content figure {
        @apply mt-2 text-sm mb-3 text-slate-500;
    }
    .feed-content ul {
        @apply list-disc ml-8 mb-4;
    }

    .feed-content ol {
        @apply list-decimal ml-8 mb-4;
    }

    .feed-content ul ul,
    .feed-content ol ol {
        @apply ml-4;
    }

    .feed-content table {
        @apply w-full border-collapse text-base mb-4;
    }

    .feed-content th,
    .feed-content td {
        @apply border border-stone-800  py-2 px-4;
    }

    .feed-content th {
        @apply bg-stone-800 font-semibold;
    }

    .feed-content tbody tr:nth-child(even) {
        @apply bg-stone-900;
    }

    .feed-content iframe {
        @apply mt-4 mb-4 rounded-xl h-[230px] sm:h-[330px] md:h-[430px] w-full;
    }

    .feed-content img {
        @apply mt-2 md:mt-4 mb-2 md:mb-4 rounded-xl;
    }

    .feed-content pre {
        @apply bg-slate-950 text-white text-base p-10 rounded-lg overflow-x-auto my-6;
        scrollbar-color: #4a5568 #1f2937;
        scrollbar-width: thin;
    }

    .feed-content code {
        @apply bg-slate-950 text-gray-300 px-1 py-1;
    }

    .feed-content audio {
        @apply mt-4 mb-4 bg-gray-800 bg-opacity-95 rounded-full border border-gray-900;
    }

    .tb-feed-date {
        @apply ml-6 xl:ml-16 mt-3 mb-2 xl:mb-5 text-xs xl:text-sm font-semibold text-gray-600 uppercase;
    }

    .tb-feed-author {
        @apply ml-6 xl:ml-6 mt-0 md:mt-3 mb-2 xl:mb-5 text-xs xl:text-sm font-semibold text-gray-600 uppercase;
    }

    .tb-feed-name {
        @apply ml-6 xl:ml-16 mb-1 text-sm font-bold text-gray-600 uppercase;
    }

    .active-all {
        @apply flex  px-8 pb-3 pt-3.5 rounded-r-lg font-semibold text-white bg-orange-700 hover:bg-orange-800 hover:text-white active:bg-stone-900 focus:border-0 focus:outline-none;
    }

    .not-active-unread {
        @apply flex bg-stone-800 px-4 pb-3 pt-3.5 border-r border-stone-600 rounded-l-lg font-semibold hover:bg-orange-800 hover:text-white active:bg-stone-900 focus:border-0 focus:outline-none;
    }

    .active-unread {
        @apply flex px-4 pb-3 pt-3.5  rounded-l-lg font-semibold text-white bg-orange-700 hover:bg-orange-800 hover:text-white active:bg-stone-900 focus:border-0 focus:outline-none;
    }

    .not-active-all {
        @apply flex bg-stone-800 px-8 pb-3 pt-3.5 border-l border-stone-600 rounded-r-lg font-semibold hover:bg-orange-800 hover:text-white active:bg-stone-900 focus:border-0 focus:outline-none;
    }

    .active-feed {
        @apply block w-full pl-2 pr-1 pb-1.5 pt-1.5 mt-1 -mb-0 -ml-2 mr-1 text-sm rounded-lg text-white bg-gray-900 bg-opacity-70 hover:text-white active:bg-stone-900 focus:border-0 focus:outline-none;
    }

    .empty-message {
        @apply max-w-4xl mb-20;
    }

    #category-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #ns-select,
    .selects {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    @keyframes pulsing {
        0%,
        100% {
            background-color: #000000;
        }
        50% {
            background-color: #292929;
        }
    }

    .line {
        height: 15px;
        background-color: #000000;
        animation: pulsing 1.5s infinite;
        margin-top: 10px;
        border-radius: 4px;
    }

    .line.short {
        width: 60%;
    }
}

@keyframes gradient-flow {
    0% {
        fill: #ca8a14;
    }
    50% {
        fill: #ffffff;
    }
    100% {
        fill: #f08306;
    }
}

.gradient-arrow {
    animation: gradient-flow 3s infinite;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

.spinner_8XMC {
    animation: spinner_0zVw 2s infinite;
    fill: #ffffff;
}
.spinner_WWWR {
    animation: spinner_Aojx 2s infinite;
    fill: #ffffff;
}
.spinner_LvYV {
    transform-origin: center;
    animation: spinner_xygp 0.75s linear infinite;
}
@keyframes spinner_0zVw {
    0% {
        animation-timing-function: cubic-bezier(0.36, 0.62, 0.43, 0.99);
        cx: 5px;
    }
    50% {
        animation-timing-function: cubic-bezier(0.79, 0, 0.58, 0.57);
        cx: 8px;
    }
}
@keyframes spinner_Aojx {
    0% {
        animation-timing-function: cubic-bezier(0.36, 0.62, 0.43, 0.99);
        cx: 19px;
    }
    50% {
        animation-timing-function: cubic-bezier(0.79, 0, 0.58, 0.57);
        cx: 16px;
    }
}
@keyframes spinner_xygp {
    100% {
        transform: rotate(360deg);
    }
}

.animate-itemShow {
    animation: itemShow 0.5s ease-in-out forwards;
}

@keyframes itemShow {
    from {
        opacity: 0;
        transform: translateY(15%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
