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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --theme-color: #001a66;
  --primary-color: #3498ff;
}

/* @media (color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

  }
} */

body {
  color: rgb(var(--foreground-rgb));
  background: #f4f4f4;
  /* background: linear-gradient(to right,
      transparent,
      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); */
}

/* Typography css */

@layer utilities {
  .brightness-100 {
    filter: brightness(1) !important;
  }
}

.container {
  @apply max-w-screen-xl 3xl:max-w-[85%] px-4 py-8 mx-auto lg:py-10 lg:px-6;
}

.download-container {
  @apply max-w-screen-xl 3xl:max-w-[85%] px-4 py-52 mx-auto lg:py-64 lg:px-6;
}

.col-6 {
  @apply flex flex-col max-w-md 3xl:max-w-2xl p-3 mx-auto;
}

.nav-item {
  @apply lg:block 3xl:text-xl p-0 bg-transparent;
}

.nav-font {
  @apply text-sm lg:text-md 2xl:text-base 3xl:text-lg 4xl:text-xl;
}

.custom-font {
  @apply text-xs lg:text-sm 2xl:text-base 3xl:text-md 4xl:text-xl;
}

.custom-font-color {
  @apply text-white;
}

.no-theme-font-color {
  @apply text-gray-900;
}

.custom-h2-font {
  @apply font-bold text-xl 2xl:text-2xl py-2;
}

.custom-h3-font {
  @apply font-bold text-md xl:text-lg;
}

.nav-font-color {
  @apply text-gray-900 dark:text-white;
}
.nav-font-color-black {
  @apply text-gray-900;
}

.footer-menu .nav-font-color {
  @apply text-gray-900;
}

.bordered-dashed {
  @apply border border-brand-1/[.20] border-dashed;
}

.bordered-solid {
  @apply border border-home-gr-light;
}

.spin {
  /* margin-top: 15%;
  margin-bottom: 10%;
  display: inline-block;
  align-self: center;
  width: 100px;
  height: 100px;
  border: 5px solid rgba(75 215 20 / 30%);
  border-radius: 50%;
  border-top-color: var(--theme-color);
  animation: spin 2s ease-in-out infinite;
  -webkit-animation: spin 2s ease-in-out infinite; */
  /* margin-top: 15%;
  margin-bottom: 10%; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  position: relative;
  border: transparent; /* Replace with your desired border */
  border-radius: 50%;
}
.custom-box-shadow {
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1),
    -4px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.custom-box-shadow-inner {
  box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.1),
    -2px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--theme-color); /* Replace with your desired color */
  position: absolute;
  animation: moveAround 4s linear infinite;
}
@keyframes moveAround {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(40px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(40px)
      rotate(-360deg);
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.more-tools-section::before {
  content: "";
  position: absolute;
  width: 200px;
  /* Adjust the size of the circles as needed */
  height: 200px;
  /* Adjust the size of the circles as needed */
  background-image: linear-gradient(circle, "#0041ff" 0%, transparent 70%);
  top: 50%;
  /* Adjust the vertical positioning as needed */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  left: 20%;
}

.draggable-container {
  height: 100vh;
}

.tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgb(37 99 235 / var(--tw-bg-opacity)) transparent transparent
    transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

[data-popper-arrow] {
  /* Add your styles for data-popper-arrow here */
  visibility: visible;
}

input[type="range"]::-webkit-slider-thumb {
  /* -webkit-appearance: none; */
  background: blue /* ...change color with background property... */;
  /* ...my custom edits... */
}

.canva-page {
  width: 100%;
  height: 100%;
  display: block;
  justify-content: center;
  align-items: center;
}

.fixed-page-height {
  height: 222px; /* fixed height */
  width: 170.5px; /* fixed width */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fixed-page-height-large-view {
  height: 517px; /* fixed height */
  width: 365px; /* fixed width */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
}

.fixed-page-height canvas {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
}

.tools-area {
  z-index: 22;
  width: 90%;
  position: absolute;
  text-align: end;
}

.rotate-page:hover .tools-area {
  display: block;
}

.add-blank {
  position: absolute;
  z-index: 9;
  width: 25px;
}

.organize-page:hover .add-blank {
  display: block;
}

.organize-page .page-block {
  min-height: 240px;
  display: flex;
  align-items: center;
}

/* .add-blank.left {
  margin-right: -20px !important;
} */

.add-blank.right {
  margin-left: 166px !important;
}

.org-p:hover .add-blank,
.org-p:hover .tools-area {
  display: block;
}

.time-content {
  padding: 20px 40px;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  font-size: 50px;
}