@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
  overflow: hidden;
  overflow-x: hidden;
}

.logo {
  background-image: url("/phaero_maskable_icon.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-custom {
  background-image: url("/background_ui.webp");
  background-size: cover;
}

.docs {
  @apply space-y-4 mx-auto max-w-6xl pb-20;
}

.docs h1 {
  @apply text-3xl;
}

.docs h2 {
  @apply text-2xl;
}

.docs h3 {
  @apply text-xl;
}

.bg-primary {
  @apply bg-[#f8f8f8];
}

.bg-secondary {
  @apply bg-[#f2f2f2];
}

.gradient-text {
  @apply text-transparent bg-clip-text bg-gradient-to-r w-fit from-[#22c55e] to-sky-400;
}

.min-page-height {
  min-height: calc(100dvh - 1px);
}

.page-height {
  height: calc(100dvh - 60px);
}

.page-heigth-edit-entry {
  height: calc(100dvh - 52px - 52px);
}

.page-width {
  width: calc(100vw - 4rem);
}

#myChart .recharts-surface {
  cursor: pointer;
}

.toggle_data {
  @apply flex justify-center whitespace-nowrap max-w-[200px] flex-grow py-2 rounded-md bg-secondary;
}

/* For Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.textareaCustom {
  box-sizing: border-box;
  width: 100%;
  /* font-weight: 400;
  line-height: 1.5; */
  resize: none; /* Disables resizing */
  padding: 8px;

  background-color: var(--backGroundColor);
  border: 1px solid #ccc; /* Adds a thin gray border */

  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1);
}

.textareaCustom:hover {
  border-color: var(--color);
}

.textareaCustom:focus {
  outline: none;
  border-color: var(--color);
  box-shadow: 0 0 0 0.1px var(--color);
}

.custom-scrollbar {
  padding-right: calc(100vw - 100%);
}

.edit_entry_textarea {
  @apply resize-none py-3 px-2 overflow-hidden break-words focus:outline-1 border border-sky-300 focus:outline-sky-300 rounded-md;
}

.edit_entry_number_input {
  @apply mr-1 px-1 focus:outline-none rounded-md bg-transparent border border-gray-300;
}

.edit_entry_title {
  @apply flex items-center whitespace-nowrap text-xl xsm:text-2xl py-1 px-4 xsm:px-6 lg:px-12 w-full rounded-t-md;
}

#overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(7px); /* Apply blur effect */
  z-index: 31; /* Keep this below the popup */
}

#tutorial-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 31; /* Keep this below the popup */
}

#blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
}

/* Ensure your popup has a higher z-index */
.bright-div {
  z-index: 32; /* Or any value higher than the overlay */
}

.navbar-shadow {
  box-shadow: 2px 0px 6px 0 rgba(0, 0, 0, 0.15);
}

.docs {
  @apply space-y-4 mx-auto max-w-6xl pb-20;
}

.docs h1 {
  @apply text-3xl;
}

.docs h2 {
  @apply text-2xl;
}

.docs h3 {
  @apply text-xl;
}

.ribbon {
  width: 130px;
  height: 130px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  border: 5px solid #38bdf8;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 10px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  font: 700 14px/1 "Lato", sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}

/* top right*/
.ribbon-top-right {
  top: -5px;
  right: -5px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -20px;
  top: 25px;
  transform: rotate(45deg);
}

.characters {
  list-style: none;
  padding-left: 0;
}

.characters li {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  border: solid 2px #d0d0d0;
  border-radius: 0.2em;
  padding: 0.5em 0.8em 0.5em 0.5em;
  font-size: large;
}

.characters p {
  max-width: none;
  margin: 0;
}

.embla__container {
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  touch-action: pan-y;
}

.embla__slide {
  flex: 0 0 100%; /* Make each slide take up 100% of the .embla__viewport width */
  padding-left: 20px; /* Adjust based on your layout needs */
  padding-right: 20px;
}

.embla_slide_content {
  @apply flex flex-col-reverse w-full mx-auto max-w-5xl items-center relative min-w-0;
}

.embla__controls {
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 1.8rem;
}
.embla__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  align-items: center;
}
.embla__button {
  -webkit-tap-highlight-color: rgba(49, 49, 49, 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 0.2rem rgb(234, 234, 234);
  width: 2.8rem;
  height: 2.8rem;
  z-index: 1;
  border-radius: 50%;
  color: rgb(54, 49, 61);
  display: flex;
  align-items: center;
  justify-content: center;
}
.embla__button:disabled {
  color: rgb(192, 192, 192);
}
.embla__button__svg {
  width: 35%;
  height: 35%;
}
.embla__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
}
.embla__dot {
  -webkit-tap-highlight-color: rgba(49, 49, 49, 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.embla__dot:after {
  box-shadow: inset 0 0 0 0.2rem rgb(234, 234, 234);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  content: "";
}
.embla__dot--selected:after {
  box-shadow: inset 0 0 0 0.2rem rgb(54, 49, 61);
}

/* fonts */

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("/fonts/RobotoSlab-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("/fonts/RobotoSlab-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("/fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("/fonts/Spectral-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Protest Riot";
  src: url("/fonts/ProtestRiot-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/fonts/Kalam-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/fonts/Kalam-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/fonts/Kalam-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.branching-line {
  position: relative;
  width: 20px; /* Adjust the width based on your design */
}

.vertical-line {
  width: 2px; /* Width of the line */
  height: 100%; /* Full height of the container */
  background-color: green; /* Line color */
  position: absolute; /* Positioned absolutely within the branching line container */
}

.horizontal-line {
  width: 100%; /* Full width of the branching line container */
  height: 2px; /* Height of the line */
  background-color: green; /* Line color */
  position: absolute;
  bottom: 0; /* Position it at the bottom */
  left: 0; /* Align to the left */
}
