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

@layer components {
  #__next {
    @apply h-full;
  }
  html,
  body {
    @apply h-full;
  }
}

@font-face {
  font-family: "Overpass Mono";
  font-style: "normal";
  font-weight: 100 200 300 400 500 600 700 800 900;
  font-display: swap;
  display: swap;
  ascent-override: 120%;
  src:
    local("Overpass Mono"),
    url("https://widgets.justin-legal.com/fonts/OverpassMono-VariableFont_wght.ttf")
      format("truetype");
}

@font-face {
  font-family: "Overpass";
  font-style: "normal";
  font-weight: 100 200 300 400 500 600 700 800 900;
  font-display: swap;
  display: swap;
  ascent-override: 120%;
  src:
    local("Overpass"),
    url("https://widgets.justin-legal.com/fonts/Overpass-VariableFont_wght.ttf")
      format("truetype");
}

html,
body {
  background-image: url("/public/flex-ui-assets/elements/pattern-white.svg");
  background-position: center;
  padding: 0;
  margin: 0;
  color: #1f2734;
  scroll-behavior: smooth;
}

nav {
  font-size: 25px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

#video-play-icon {
  @apply animate-pulse;
  animation-duration: 1.6s;
}

.video-preview svg {
  display: none;
}

.bottom-shadow {
  box-shadow: 0 1px 3px -5px rgb(0 0 0 / 0.1);
}

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

:root,
.snippet {
  --color-primary: #0066ff;
  --color-primary-60: #66a3ff;
  --color-primary-40: #99c2ff;
  --color-primary-20: #cce0ff;
  --color-primary-10: #e6f0ff;
  --color-primary-hover: #0005a3;
  --color-primary-active: #000068;
  --color-secondary: #d7dfff;
  --color-secondary-hover: #b4c4fd;
  --color-secondary-active: #99abf8;
  --color-akzent-zwei: #0036a3;
  --color-akzent-eins: #3abedb;

  --border-radius: 0.5rem;

  --font: "Overpass";
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: var(--color-primary) !important;
}

h4,
h3,
h2,
h1 {
  @apply text-justinDark-dunkel;
}

.testimonials video {
  border-radius: 1.5rem;
}

* {
  box-sizing: border-box;
}

.btn {
  @apply inline-flex justify-center py-2 px-2 text-sm font-medium rounded-lg disabled:bg-neutral-light;
}
.btn-secondary {
  @apply text-interactive-primary-default  bg-interactive-secondary-default hover:bg-interactive-secondary-hover active:bg-interactive-secondary-pressed;
}
.btn-primary {
  @apply bg-interactive-primary-default hover:bg-interactive-primary-hover active:bg-interactive-primary-pressed;
}

.input-state-disabled label {
  @apply text-neutral-medium-light;
}
.input-state-disabled svg {
  @apply fill-neutral-medium-light;
}
.input-state-disabled {
  @apply border-neutral-medium-light;
}

.field-array-card {
  @apply p-1;
}

.input-state-default label {
  @apply text-akzent-zwei;
}
.input-state-default svg {
  @apply fill-akzent-zwei;
}
.input-state-default {
  @apply border-akzent-zwei;
}

.input-state-active label {
  @apply text-brand-primary;
}
.input-state-active svg {
  @apply fill-brand-primary;
}
.input-state-active {
  @apply border-brand-primary;
}

.input-state-error label {
  @apply text-semantic-alarm;
}
.input-state-error svg {
  @apply fill-semantic-alarm;
}
.input-state-error {
  @apply border-semantic-alarm;
}
.cols-5 {
  @apply grid-cols-5;
}
.cols-4 {
  @apply grid-cols-4;
}
.cols-3 {
  @apply grid-cols-3;
}
.cols-2 {
  @apply grid-cols-2;
}
.cols-1 {
  @apply grid-cols-1;
}

.text-blue-600 {
  color: #1976d2;
}

#tabbedForm {
  scroll-margin-top: 150px;
}

.bg-blue-600 {
  background-color: #1976d2;
}

.roadmap-font {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.anchor {
  display: block;
  position: relative;
  top: -4rem;
  visibility: hidden;
}

.roadmap-box {
  border-radius: 13px;
  background-color: #f5f5f5;
}

.textlink {
  text-decoration: underline;
  color: #1976d2;
}

.roadmap-badge {
  background-color: #e7f3fe;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  border-radius: 13px;
}

.line {
  width: 1px;
  height: 100vh;
  position: absolute;
  right: 50%;
  background-color: black;
}

.roadmap-container {
  background-image: linear-gradient(rgb(116, 116, 116), rgb(116, 116, 116));
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

.team-item {
  margin-top: 3%;
}

.bullet-list {
  width: 100%;
  text-align: left;
}

.bullet-list li {
  list-style-type: none;
  background-image: url("/public/assets/images/check.webp"); /* resource located at public/assets/images. Workaroud to work with static export */
  background-repeat: no-repeat;
  margin-top: 30px;
  min-height: 46px;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.team-name {
  font-size: 21px;
  font-weight: 900;
  line-height: 30px;
}

.job-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: rgb(163, 162, 162);
}

.team-img {
  width: 100%;
  height: auto;
}