@import '@fontsource/kalam/latin-400.css';
@import '@fontsource/kalam/latin-700.css';

:root {
  color-scheme: only light !important;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

html,
body {
  padding: 0;
  margin: 0;
  background: #fff;
}

body {
  overscroll-behavior: contain;
}

canvas {
  display: block;
}

svg.color-icon {
  vertical-align: middle;
}

.ant-tabs-nav .ant-tabs-tab {
  padding: 16px !important;
}

.ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph {
  margin-top: 0;
}

.ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph > li + li {
  margin-block-start: 8px;
}

.watermark {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  padding: 0 4px;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1em;
  letter-spacing: 1px;
}

.transition-animation img {
  animation: scale 1s ease 0s 1 alternate;
}

.drop-shadow {
  filter: drop-shadow(1px 1px 5px var(--shadow-color));
}

.drop-shadow-lg {
  filter: drop-shadow(2px 2px 10px var(--shadow-color));
}

.text-outline {
  --stroke-color: white;
  -webkit-text-stroke: 4px var(--stroke-color);
  paint-order: stroke fill;
}

.text-outline-black {
  --stroke-color: black;
}

@media print {
  html,
  body {
    print-color-adjust: exact;
  }

  .ant-card {
    page-break-inside: avoid;
  }
}

@keyframes scale {
  0%,
  99% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.2);
  }
}
