@tailwind utilities;

body {
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 300px
    ),
    fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}

/* Overriding the default colour schemas for light mode*/
.light [data-language], .light .nextra-code-block>pre {
  background-color: #0a4b6c !important;
}
.light .nextra-code-block>div {
  background-color: #0a4b6c !important;
  color: aliceblue !important;
}
.light button[title="Copy code"], button[title="Toggle word wrap"] {
  color: aliceblue !important;
}
.light button[title="Copy code"]:hover, button[title="Toggle word wrap"]:hover  {
  color: #00fd48dc !important;
}



.dark body {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 300px),
    fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0);
}


@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.wrapper {
  position: relative;
  white-space: nowrap;
  animation: slidein 60s linear infinite;
}

.tables-search li:hover {
  text-decoration: underline;
}