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

@layer base {

    a.anchor {
        display: block;
        position: relative;
        top: -50px;
        visibility: hidden;
    }

    [x-cloak] {
        display: none !important;
    }

    body {
        @apply text-gray-800 dark:text-white;
        @apply dark:bg-slate-900
    }

    p {
        @apply dark:text-slate-300;
    }

    .markdown {
        @apply text-base;
    }

    .markdown p {
        @apply py-4;
    }

    .markdown h1 {
        @apply text-4xl pt-8 pb-2;
    }

    .markdown h2 {
        @apply text-xl pt-8 pb-2 font-bold;
    }

    .markdown h3 {
        @apply text-base pt-8 pb-1 font-bold;
    }

    .markdown h4 {
        @apply text-sm pt-8 pb-2 font-bold;
    }

    .markdown p code {
        @apply bg-stone-700 text-white px-2;
    }

    .markdown a {
        @apply underline font-bold;
    }

    .markdown button a {
        @apply no-underline font-bold;
    }

    .markdown ul {
        @apply list-disc ml-4 text-base list-none;
    }

    .markdown ul li {
        display: flex;
        align-items: baseline;
    }

    .markdown ul li:before {
        content: '✓ ';
        @apply text-indigo-400 font-bold pr-4;
    }

    .markdown pre{
        @apply p-4 m-4 rounded-lg
    }

    .markdown .highlight table td {
        padding: 5px;
    }

    .markdown .highlight table pre {
        margin: 0;
    }
    .markdown .highlight .c,
    .markdown .highlight .ch,
    .markdown .highlight .cd,
    .markdown .highlight .cpf {
        color: #75715e;
        font-style: italic;
    }

    .markdown .highlight .cm {
        color: #75715e;
        font-style: italic;
    }

    .markdown .highlight .c1 {
        color: #75715e;
        font-style: italic;
    }

    .markdown .highlight .cp {
        color: #75715e;
        font-weight: bold;
    }

    .markdown .highlight .cs {
        color: #75715e;
        font-weight: bold;
        font-style: italic;
    }

    .markdown .highlight .err {
        color: #960050;
        background-color: #1e0010;
    }

    .markdown .highlight .gi {
        color: #ffffff;
        background-color: #324932;
    }

    .markdown .highlight .gd {
        color: #ffffff;
        background-color: #493131;
    }

    .markdown .highlight .ge {
        color: #000000;
        font-style: italic;
    }

    .markdown .highlight .gr {
        color: #aa0000;
    }

    .markdown .highlight .gt {
        color: #aa0000;
    }

    .markdown .highlight .gh {
        color: #999999;
    }

    .markdown .highlight .go {
        color: #888888;
    }

    .markdown .highlight .gp {
        color: #555555;
    }

    .markdown .highlight .gs {
        font-weight: bold;
    }

    .markdown .highlight .gu {
        color: #aaaaaa;
    }

    .markdown .highlight .k,
    .markdown .highlight .kv {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kc {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kd {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kp {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kr {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kt {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .kn {
        color: #f92672;
        font-weight: bold;
    }

    .markdown .highlight .ow {
        color: #f92672;
        font-weight: bold;
    }

    .markdown .highlight .o {
        color: #f92672;
        font-weight: bold;
    }

    .markdown .highlight .mf {
        color: #ae81ff;
    }

    .markdown .highlight .mh {
        color: #ae81ff;
    }

    .markdown .highlight .il {
        color: #ae81ff;
    }

    .markdown .highlight .mi {
        color: #ae81ff;
    }

    .markdown .highlight .mo {
        color: #ae81ff;
    }

    .markdown .highlight .m,
    .markdown .highlight .mb,
    .markdown .highlight .mx {
        color: #ae81ff;
    }

    .markdown .highlight .se {
        color: #ae81ff;
    }

    .markdown .highlight .sa {
        color: #66d9ef;
        font-weight: bold;
    }

    .markdown .highlight .sb {
        color: #e6db74;
    }

    .markdown .highlight .sc {
        color: #e6db74;
    }

    .markdown .highlight .sd {
        color: #e6db74;
    }

    .markdown .highlight .s2 {
        color: #e6db74;
    }

    .markdown .highlight .sh {
        color: #e6db74;
    }

    .markdown .highlight .si {
        color: #e6db74;
    }

    .markdown .highlight .sx {
        color: #e6db74;
    }

    .markdown .highlight .sr {
        color: #e6db74;
    }

    .markdown .highlight .s1 {
        color: #e6db74;
    }

    .markdown .highlight .ss {
        color: #e6db74;
    }

    .markdown .highlight .s,
    .markdown .highlight .dl {
        color: #e6db74;
    }

    .markdown .highlight .na {
        color: #a6e22e;
    }

    .markdown .highlight .nc {
        color: #a6e22e;
        font-weight: bold;
    }

    .markdown .highlight .nd {
        color: #a6e22e;
        font-weight: bold;
    }

    .markdown .highlight .ne {
        color: #a6e22e;
        font-weight: bold;
    }

    .markdown .highlight .nf,
    .markdown .highlight .fm {
        color: #a6e22e;
        font-weight: bold;
    }

    .markdown .highlight .no {
        color: #66d9ef;
    }

    .markdown .highlight .bp {
        color: #f8f8f2;
    }

    .markdown .highlight .nb {
        color: #f8f8f2;
    }

    .markdown .highlight .ni {
        color: #f8f8f2;
    }

    .markdown .highlight .nn {
        color: #f8f8f2;
    }

    .markdown .highlight .vc {
        color: #f8f8f2;
    }

    .markdown .highlight .vg {
        color: #f8f8f2;
    }

    .markdown .highlight .vi {
        color: #f8f8f2;
    }

    .markdown .highlight .nv,
    .markdown .highlight .vm {
        color: #f8f8f2;
    }

    .markdown .highlight .w {
        color: #f8f8f2;
    }

    .markdown .highlight .nl {
        color: #f8f8f2;
        font-weight: bold;
    }

    .markdown .highlight .nt {
        color: #f92672;
    }

    .markdown .highlight {
        @apply rounded-lg bg-stone-700 text-gray-200
    }

}

/* Hide IE/Edge default arrow */
select.custom-select::-ms-expand {
    display: none;
}

/* Hide Firefox arrow */
select.custom-select {
    -moz-appearance: none;
}

/* Hide Safari/Chrome arrow */
select.custom-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
}


hr.hr-horizontal {
    height: 1px;
    border-top: none;
    margin-top: 15px;
    margin-bottom: 10px;
    background-image: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0),
            #ccc,
            hsla(0, 0%, 100%, 0)
    );
    background-color: 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.
 *


 */