@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Inter-Regular.woff2') format('woff2'),
        url('/fonts/Inter-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Inter-Medium.woff2') format('woff2'),
        url('/fonts/Inter-Medium.woff') format('woff');
}
@font-face {
  font-family: 'RFDewi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/RFDewiExpanded-Semibold.woff2') format('woff2'),
        url('/fonts/RFDewiExpanded-Semibold.woff') format('woff');
}
@font-face {
  font-family: 'RFDewi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/RFDewiExpanded-Bold.woff2') format('woff2'),
        url('/fonts/RFDewiExpanded-Bold.woff') format('woff');
}

:root {
  --white: rgba(255, 255, 255, 1);
  --white-alpha: rgba(255, 255, 255, 0.5);
  --white-alpha-border: rgba(255, 255, 255, 0.3);
  --white-alpha-bg: rgba(255, 255, 255, 0.1);
  --grey-light: rgba(241, 242, 244, 1);
  --grey-dark: rgba(212, 216, 218, 1);
  --grey-text: #a1a1a1;
  --grey-bg: #c6cacc;
  --orange: rgba(246, 105, 51, 1);
  --orange-sat: rgba(219, 61, 0, 1);
  --orange-dark: rgba(97, 10, 12, 1);
  --danger: #ff0000;
  --graphite: rgba(21, 21, 21, 1);
  --graphite-opac: rgba(21, 21, 21, 0.2);
  --graphite-opac2: rgba(21, 21, 21, 0.08);
  --shadow: rgba(0, 0, 0, 0.08);
  --black: rgba(0, 0, 0, 1);

  --title-font: RFDewi;

  --headline-160: 700 160px/160px RFDewi;
  --headline-120: 700 120px/144px RFDewi;
  --headline-96: 700 96px/116px RFDewi;
  --headline-80: 700 80px/80px RFDewi;
  --headline-64: 700 64px/64px RFDewi;
  --headline-56: 700 56px/56px RFDewi;
  --headline-48: 700 48px/48px RFDewi;
  --headline-40: 700 40px/40px RFDewi;
  --headline-32: 700 32px/32px RFDewi;
  --headline-26: 700 26px/26px RFDewi;
  --headline-24: 700 24px/24px RFDewi;
  --headline-20: 600 20px/24px RFDewi;
  --headline-14: 600 14px/16px RFDewi;
  --subtitle-48: 500 48px/56px Inter;
  --subtitle-28: 500 28px/36px Inter;
  --subtitle-32: 500 32px/36px Inter;
  --text-20: 400 20px/24px Inter;
  --text-16: 400 16px/20px Inter;
  --text-14: 400 14px/16px Inter;
  --text-12: 400 12px/12px Inter;

  --input: 400 16px/24px Inter;

  --text-button: 600 16px/19px RFDewi;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
  color: var(--graphite);
  outline: none;
}

svg,
svg * {
  color: inherit;
}

input:autofill {
  -webkit-transition-delay: 9999s;
  -moz-transition-delay: 9999s;
  transition-delay: 9999s;
}

body * {
  scrollbar-width: thin;
  scrollbar-color: var(--grey-dark) transparent;
}
html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  font: var(--text-20);
  scroll-behavior: smooth;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black);
}

body.overflow {
  overflow: hidden;
}

body:before,
body:after {
  content: "";
  position: fixed;
  left: 0;
  height: 50vh;
  right: 0;
  z-index: -1;
}
body:before {
  top: 0;
}
body:after {
  bottom: 0;
}

body[data-bg="dark"]:before,
body[data-bg="dark"]:after {
  background: var(--black);
}
body[data-bg="light"]:before,
body[data-bg="light"]:after {
  background: var(--white);
}
body[data-bg="orangelight"]:before {
  background: var(--orange-sat);
}
body[data-bg="orangelight"]:after {
  background: var(--white);
}
body[data-bg="orange-gradient"]:before {
  background: rgb(107 19 0);
}
body[data-bg="orange-gradient"]:after {
  background: var(--orange-sat);
}
body[data-bg="darklight"]:before {
  background: var(--black);
}
body[data-bg="darklight"]:after {
  background: var(--white);
}

#app {
  height: 100%;
}

a,
button {
  background: none;
  outline: none;
  text-decoration: none;
  cursor: pointer;
}

summary label {
  pointer-events: none;
}

.hidden-element,
.hidden {
  width: 0;
  height: 0;
  border: none;
  visibility: hidden;
}

.text-blick {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.2 !important;
}

.text-orange-gradient {
  background: linear-gradient(91deg, var(--orange-sat) 30.67%, var(--orange) 75.49%, var(--black) 107.37%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2 !important;
}
.text-orange {
  color: var(--orange);
}
.text-orange-sat {
  color: var(--orange-sat);
}
.text-white {
  color: var(--white);
}
.text-grey {
  color: var(--grey-text);
}
.text-grey-dark {
  color: var(--grey-dark);
}

.scale2 {
  font-size: 1.6em;
  color: inherit;
  line-height: 1.6em;
}