@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap");

:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --light-selection-bg: rgba(39, 39, 42, 0.99);
  --light-selection-color: rgb(244, 244, 245);
  --dark-selection-bg: rgba(244, 244, 245, 0.99);
  --dark-selection-color: rgb(39, 39, 42);
  --expo-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge (WebKit) */
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: "Montserrat", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background-color: var(--light-selection-bg);
  color: var(--light-selection-color);
}

[data-theme="dark"] ::selection {
  background-color: var(--dark-selection-bg);
  color: var(--dark-selection-color);
}

/* View Transition Styles */
::view-transition-group(root) {
  animation-duration: 0.7s;
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  animation-name: reveal-light;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  z-index: -1;
}

.dark::view-transition-new(root) {
  animation-name: reveal-dark;
}

@keyframes reveal-dark {
  from {
    clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
  }

  to {
    clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
  }
}

@keyframes reveal-light {
  from {
    clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
  }

  to {
    clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
  }
}

/* Add this to your CSS or global stylesheet */
.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-arrows {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield; /* Standard */
}
