/* Fonts */
@font-face {
  font-family: "Kruda";
  src: url("../fonts/kruda-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kruda Wide";
  src: url("../fonts/kruda-wide-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kruda Wide";
  src: url("../fonts/kruda-wide-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kruda Wide";
  src: url("../fonts/kruda-wide-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kruda Wide";
  src: url("../fonts/kruda-wide-bold-slanted.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Layout */
  --layout-width: 1280px;
  --header-height: 80px;
  --content-width: 1280px;

  /* Header / Navigation */
  --nav-width: 381px;
  --nav-height: 29px;
  --nav-gap: 50px;

  /* Section Spacing */
  --projects-top-padding: 35px;
  --projects-side-padding: 70px;
  --projects-column-gap: 90px;
  --projects-window-width: 1140px;
  --projects-window-height: 560px;
  --projects-nav-top: 245px;
  --projects-nav-prev-left: 340px;
  --projects-nav-next-left: 750px;
  --about-top-padding: 40px;
  --about-column-gap: 40px;
  --about-side-gap: 40px;
  --donate-top-padding: 100px;
  --donate-cards-gap: 100px;

  /* Block Sizes */
  --project-card-width: 320px;
  --project-card-height: 540px;
  --project-card-text-width: 280px;
  --project-card-meme-max-width: 280px;
  --project-cta-width: 200px;
  --project-cta-height: 60px;
  --about-section-width: 964px;
  --about-section-height: 527px;
  --about-bio-width: 554px;
  --about-side-width: 370px;
  --about-profile-height: 400px;
  --about-socials-height: 80px;
  --donate-section-width: 800px;
  --donate-card-width: 350px;
  --donate-card-height: 400px;
  --donate-cta-width: 300px;
  --donate-cta-height: 80px;

  /* Radius */
  --radius-card: 20px;
  --radius-pill: 30px;
  --radius-badge: 12px;

  /* Elevation */
  --shadow-elevation-5:
    0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 5px 8px 0 rgba(0, 0, 0, 0.14),
    0 1px 14px 0 rgba(0, 0, 0, 0.12);
  --shadow-elevation-5-hover:
    0 3px 5px -1px rgba(0, 0, 0, 0.26),
    0 6px 10px 0 rgba(0, 0, 0, 0.18),
    0 2px 16px 0 rgba(0, 0, 0, 0.14);

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 260ms;
  --motion-duration-press: 100ms;
  --motion-ease-out: ease-out;
  --motion-ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Colors */
  --color-page-bg: #0e0d73;
  --color-text-default: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.5);

  --color-header-border: #a9e3ff;
  --color-nav-active: #ff0000;

  --color-card-bg: #1f1f5c;
  --color-card-title: #ffba08;

  --color-scrim-inactive: rgba(0, 0, 0, 0.5);
  --color-scrim-locked: rgba(0, 0, 0, 0.6);
  --color-project-locked-card: var(--color-card-bg);

  --color-cta-tiktok: #000000;
  --color-cta-telegram: #30a6de;
  --color-cta-youtube: #ff0000;

  --color-donate-bank-card: #ffdd2d;
  --color-donate-crypto-card: #53647b;
  --color-donate-nowpayments-btn: #2f60a3;
  --color-donate-donationalerts-btn: #f57d07;

  --active-card-stroke: inset 0 0 0 1px #000000;
  --focus-ring: 2px solid var(--color-header-border);
}