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

@screen md {
  .md\:rtl {
    direction: rtl;
  }
  .md\:ltr {
    direction: ltr;
  }
}

@screen lg {
  .server-bg {
    background: url(/assets/servers-febeb77e4540715de7320af93e2113c098b629e267c748a36e105793ef462aeb.svg);
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 25%;
  }

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

@layer components {
  html {
    scroll-behavior: smooth;
  }

  .container {
    @apply max-w-5xl mx-auto px-5 lg:px-10;
  }

  strong {
    @apply font-bold;
  }

  .input {
    @apply w-full px-4 py-3 border-2 rounded-lg focus:border-blue outline-none border-gray;
  }
  .input-error {
    @apply bg-red-light border-red text-red focus:ring-red focus:border-red;
  }
  .input-error-hint {
    @apply mt-1 text-sm text-red;
  }

  .button {
    @apply w-full px-4 py-3 border-2 rounded-lg border-none outline-none bg-blue text-white font-medium;
  }

  .tag {
    @apply inline-block bg-gray text-blue-dark bg-opacity-70 px-2 rounded-md mr-1 mt-1;
  }

  .tag-dark {
    @apply inline-block bg-blue text-white px-2 rounded-md mr-1 mt-1;
  }

  .reference-link-enabled {
    @apply !text-blue hover:!text-blue-dark;
  }

  .divider {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .divider-curve-white-light-blue {
    background-color: theme(colors.blue.light);
    background-image: url(/assets/divider-curve-white-light-blue-4f2d8b1973ce08599cecb4d2eff20c26bc60721b814e84f116e37ce0da2220c4.svg);
  }
  .divider-rcurve-light-blue-white {
    background-color: theme(colors.white.DEFAULT);
    background-image: url(/assets/divider-rcurve-light-blue-white-23d158d5f597ebf11071931ab4da8b4f9899bd22a5f39d7d821b822741c515ce.svg);
  }
  .divider-curve-blue-white {
    background-color: theme(colors.white.DEFAULT);
    background-image: url(/assets/divider-curve-blue-white-75aaf24398c3243cd19dc7c577264efdbc595437729440f023912c6af3e8489d.svg);
  }
  .divider-mountains {
    background-color: theme(colors.blue.DEFAULT);
    background-image: url(/assets/divider-mountains-d3df64872fb79d31fb08418b12cb2d764d7f1ecb9b99c8740d82393fd1cfb824.svg);
  }

  .spotty-bg {
    background: #fff;
    background:
      radial-gradient(circle closest-side at 25% 35%, theme(colors.blue.light), transparent),
      radial-gradient(circle closest-side at 80% 60%, theme(colors.blue.light), transparent),
      radial-gradient(circle closest-side at 40% 70%, theme(colors.blue.light), transparent),
      radial-gradient(circle closest-side at 20% 80%, theme(colors.blue.light), transparent);
  }
}

@layer markdown {
  .post-body h1, .post-body h2, .post-body h3 {
    @apply !font-medium !my-4;
  }

  .post-body h1 { @apply !text-4xl; }
  .post-body h2 { @apply !text-2xl; }
  .post-body h3 { @apply !text-xl; }

  .post-body p {
    @apply pb-3;
  }

  .post-body a {
    @apply !text-blue;
  }

  .post-body ul {
    @apply !list-disc !list-outside !mb-4 !ps-4;
  }
  .post-body ol {
    @apply !list-decimal !list-outside !mb-4 !ps-4;
  }

  .post-body code {
    @apply bg-gray !text-sm !font-mono !font-bold;
  }
  .post-body div.highlighter-rouge {
    @apply relative;
  }
  .post-body div.highlight {
    @apply bg-blue-light py-2 px-3 overflow-auto !mt-3 !mb-5 rounded-md;
  }
  .post-body .highlight code {
    background: inherit !important;
  }
}
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #756D88 } /* Comment */
.highlight .err { border: 1px solid #D83148 } /* Error */
.highlight .k { color: #0080B9 } /* Keyword */
.highlight .ch { color: #756D88 } /* Comment.Hashbang */
.highlight .cm { color: #756D88 } /* Comment.Multiline */
.highlight .cp { color: #0080B9 } /* Comment.Preproc */
.highlight .cpf { color: #756D88 } /* Comment.PreprocFile */
.highlight .c1 { color: #756D88 } /* Comment.Single */
.highlight .cs { color: #756D88 } /* Comment.Special */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gh { font-weight: bold } /* Generic.Heading */
.highlight .gp { font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { font-weight: bold } /* Generic.Subheading */
.highlight .kc { color: #0080B9 } /* Keyword.Constant */
.highlight .kd { color: #0080B9 } /* Keyword.Declaration */
.highlight .kn { color: #0080B9 } /* Keyword.Namespace */
.highlight .kp { color: #0080B9 } /* Keyword.Pseudo */
.highlight .kr { color: #0080B9 } /* Keyword.Reserved */
.highlight .kt { color: #2b91af } /* Keyword.Type */
.highlight .s { color: #BC2438 } /* Literal.String */
.highlight .nc { color: #00567A; } /* Name.Class */
.highlight .ow { color: #0080B9 } /* Operator.Word */
.highlight .sa { color: #BC2438 } /* Literal.String.Affix */
.highlight .sb { color: #BC2438 } /* Literal.String.Backtick */
.highlight .sc { color: #BC2438 } /* Literal.String.Char */
.highlight .dl { color: #BC2438 } /* Literal.String.Delimiter */
.highlight .sd { color: #BC2438 } /* Literal.String.Doc */
.highlight .s2 { color: #BC2438 } /* Literal.String.Double */
.highlight .se { color: #BC2438 } /* Literal.String.Escape */
.highlight .sh { color: #BC2438 } /* Literal.String.Heredoc */
.highlight .si { color: #BC2438 } /* Literal.String.Interpol */
.highlight .sx { color: #BC2438 } /* Literal.String.Other */
.highlight .sr { color: #BC2438 } /* Literal.String.Regex */
.highlight .s1 { color: #BC2438 } /* Literal.String.Single */
.highlight .ss { color: #00567A } /* Literal.String.Symbol */
/*
 * 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.
 *



 */