@import './header.css';
@import './hero.css';
@import './about.css';
@import './family.css';
@import './friend.css';
@import './contact.css';
@import './footer.css';

:root {
  /* Color */
  --background: #16161a;
  --background-two: #242629;
  --background-three: #5a28f12a;
  --background-four: #2426295e;
  --background-five: #9a7df035;
  --paragraph: #94a1b2;
  --headline: #fffffe;
  --headline-two: #d2c9dc;
  --button: #c2b1f6;
  --button-hover: #a48af2;
  --button-text: #fffffe;
  --stroke: #010101;
  --main: #fffffe;
  --highlight: #997bf3;
  --secondary: #72757e;
  --tertiary: #2cb67d;
  --quaternary: ##b8c1ec;

  /* Font */
  --baseFont: 'Poppins', sans-serif;

  /* Text styles */
  --big-title-desktop: 700 5rem var(--baseFont);
  --big-subtitle-desktop: 500 1.25rem var(--baseFont);
  --title-desktop: 600 3rem var(--baseFont);
  --subtitle-desktop: 600 1.875rem var(--baseFont);
  --heading-desktop: 500 1.5rem var(--baseFont);
  --text-desktop: 300 1.25rem var(--baseFont);
  --text-info-desktop: 300 1.125rem var(--baseFont);
  --nav-desktop: 400 .875rem var(--baseFont);
  --nav-section-desktop: 400 .9375rem var(--baseFont);
  --nav-icon: 1rem;
  --footer-desktop: 300 1rem var(--baseFont);

  --big-title-tablet: 700 4.5rem var(--baseFont);
  --big-subtitle-tablet: 500 1.25rem var(--baseFont);
  --title-tablet: 600 2.5rem var(--baseFont);
  --subtitle-tablet: 600 1.5rem var(--baseFont);
  --heading-tablet: 500 1.25rem var(--baseFont);
  --text-tablet: 300 1.25rem var(--baseFont);
  --text-info-tablet: 300 1.125rem var(--baseFont);
  --nav-tablet: 400 .75rem var(--baseFont);
  --nav-section-tablet: 400 .875rem var(--baseFont);
  --nav-icon: 1rem;
  --footer-tablet: 300 .875rem var(--baseFont);

  --big-title-mobile: 700 3.5rem var(--baseFont);
  --big-subtitle-mobile: 500 1.125rem var(--baseFont);
  --title-mobile: 600 1.875rem var(--baseFont);
  --subtitle-mobile: 600 1.5rem var(--baseFont);
  --heading-mobile: 500 1rem var(--baseFont);
  --text-mobile: 300 1.25rem var(--baseFont);
  --text-info-mobile: 300 1rem var(--baseFont);
  --nav-mobile: 400 .75rem var(--baseFont);
  --nav-section-mobile: 400 .8125rem var(--baseFont);
  --nav-icon: 1.25rem;
  --footer-mobile: 300 .75rem var(--baseFont);
}

::-webkit-scrollbar {
  width: 12px;
  background-color: var(--background-two);
  cursor: pointer;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: var(--background-two);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--button);
}

::-webkit-scrollbar-thumb:hover {
  border-radius: 5px;
  background-color: var(--button-hover);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Lora", serif;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background);

  position: relative;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-family: 'Work Sans', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

@media (min-width: 1200px) {
  .general__container {
    width: 1200px;
    margin: 0 auto;
  }

  .family__container {
    background-color: var(--background-two);
  }
}