/* #region - CSS reset  */

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

button {
  border: none;
  padding: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

/* #endregion */

/* #region - Fonts */

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
       url('/fonts/poppins-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
       url('/fonts/poppins-medium-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
       url('/fonts/poppins-semibold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
       url('/fonts/poppins-bold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Figtree';
  font-weight: 400;
  src: url('/fonts/Figtree-Regular.woff2') format('woff2'),
       url('/fonts/Figtree-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/Figtree-Italic.woff2') format('woff2'),
       url('/fonts/Figtree-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Figtree';
  font-weight: 600;
  src: url('/fonts/Figtree-Bold.woff2') format('woff2'),
       url('/fonts/Figtree-Bold.woff') format('woff');
}

/* #endregion */

/* #region - Variables */

:root {

  /* Border radius values */

  --border-radius-xxs: calc(2px + 0.125rem);
  --border-radius-xs: calc(4px + 0.25rem);
  --border-radius-s: calc(6px + 0.375rem);
  --border-radius-m: calc(8px + 0.5rem);
  --border-radius-l: calc(16px + 0.25rem);
  --border-radius-xl: calc(16px + 0.5rem);

  /* Spacing values - General */

  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-sm: 0.75rem;
  --space-m: 1rem;
  --space-lm: 1.25rem;
  --space-l: 1.5rem;
  --space-ml: 2rem;
  --space-xl: 2.5rem;
  --space-2xl: 3rem;
  --space-2mxl: 3.75rem;
  --space-3xl: 6.25rem;
  --space-4xl: 8.375rem;


  /* Color tokens */

  --main-color: #EFF5FB;
  --secondary-color: #FFFFFF;
  --tertiary-color: #F1F3FF;
  --accent-color: #DD7373;
  --accent-color-2: #E79C9C;
  --accent-color-3: #B15C5C;
  --text-color: #001021;
  --text-white: #FFFFFF;
  --typewriter-color: #DD7373;
  --typewriter-color-alternate: #cd3232;

  --grayscale-100: #000000;
  --grayscale-80: #333333;
  --grayscale-60: #666666;
  --grayscale-40: #999999;
  --grayscale-20: #CCCCCC;
  --grayscale-0: #FFFFFF;

  --nav-footer: #FFFFFF99;
  --skill-card: #FFFFFF80;

  --blob-color-1: #899EE1;
  --blob-color-2: #5772C9;

  --dot-grid-default: #D9D9D9B3;
  --dot-grid-hover: #B3B3B3;

  --theme-control-hover: var(--grayscale-20);
  --mobile-nav-bg: var(--secondary-color);

  --button-text-color: var(--text-white);
  --button-bg-color: var(--accent-color);
  --button-inactive-color: #EBABAB;
  --button-hover-color: var(--accent-color-2);
  --button-active-color: var(--accent-color-3);
  --card-background: var(--secondary-color);
  --card-tags: var(--grayscale-60);

  --skill-svg-color: var(--grayscale-40);
  --skill-container-background: #E6E6E699;
  --skill-conatiner-after: #001021;
  --experience-background: var(--main-color);
  --education-background: var(--secondary-color);
  --company-logo-background: var(--secondary-color);

  --contact-element-bg: var(--tertiary-color);
  --contact-element-shadow: #02041D26;
  --input-bg-color: var(--secondary-color);
  --input-border-color: var(--grayscale-20);
  --contact-method-bg: var(--secondary-color);
  --contact-method-icon: var(--grayscale-40);
  --contact-method-top-row: var(--grayscale-60);
  --contact-separator: var(--accent-color);

  --case-description-bg: var(--secondary-color);
  --case-index-inactive: var(--grayscale-40);
  --ghost-button-text: var(--text-color);
  --ghost-button-hover: var(--grayscale-20);
  --modal-background:	#000000D9;
  --point-number: #476385;

  --transition-delay: 0.5s
}

.dark {
  --main-color: #0B132B;
  --secondary-color: #1C2541;
  --tertiary-color: #353950;
  --accent-color: #3A506B;
  --accent-color-2: #476385;
  --accent-color-3: #29384B;
  --text-color: #FFFFFF;
  --typewriter-color: #30C5FF;
  --typewriter-color-alternate: #30C5FF;

  --nav-footer: #00000099;
  --skill-card: #E6E6E699;

  --blob-color-1: #1F347C;
  --blob-color-2: #6676AC;

  --dot-grid-default: #D9D9D91A;
  --dot-grid-hover: #E6E6E666;

  --theme-control-hover: var(--grayscale-80);
  --mobile-nav-bg: black;

  --button-text-color: var(--text-color);
  --button-bg-color: var(--accent-color);
  --button-inactive-color: #8996A6;
  --button-hover-color: var(--accent-color-2);
  --button-active-color: var(--accent-color-3);
  --card-background: var(--tertiary-color);
  --card-tags: var(--grayscale-20);

  --skill-container-background: #FFFFFF80;
  --experience-background: var(--accent-color);
  --education-background: var(--accent-color);
  --company-logo-background: var(--tertiary-color);

  --contact-element-bg: var(--secondary-color);
  --contact-element-shadow: #1E4EBD;
  --input-bg-color: var(--accent-color);
  --input-border-color: var(--grayscale-40);
  --contact-method-bg: var(--accent-color);
  --contact-method-icon: var(--grayscale-20);
  --contact-method-top-row: var(--grayscale-20);
  --contact-separator: var(--accent-color-2);

  --case-description-bg: var(--accent-color);
  --ghost-button-hover: var(--accent-color-2);
}

/* #endregion */

body {
  background: var(--main-color);
  scrollbar-gutter: stable overlay;
  scroll-behavior: smooth;
}

html, body {
  scroll-behavior: smooth;
}

body, body * {
  transition: 
    color var(--transition-delay), 
    background-color var(--transition-delay);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

p {
  font-family: 'Figtree', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.content-container {
  max-width: 1080px;
  margin: auto;
}

button {
  cursor: pointer;
}

.top-padding {
  padding-top: 6rem;
}

.no-animate .case-card,
.no-animate .case-thumbnail,
.no-animate .case-card-text,
.no-animate .tag-container,
.no-animate .case-content h1 {
  transition: none !important;
}

@media (max-width: 1120px) {
  
  .navbar-content,
  .footer-content,
  .hero-section .content-container,
  .about-me-section .content-container,
  .cases-section .content-container,
  .cases-page .content-container,
  .about-me-page .content-container,
  .contact-page .content-container,
  .case-page .content-container {
    margin: 0 20px;
  }
  
}