/*
===============
Fonts
===============
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,200&display=swap');

@import 'navbar.css';
@import 'main.css';

/*
===============
Variables
===============
*/
:root {
  --primary-color:  #024A7A;
  --ff-primary: 'Poppins', sans-serif;

  /* --clr-social-color-darker:hsl(205, 72%, 37%);
  --clr-social-color: hsl(205, 78%, 60%); 
  --clr-social-color-light: hsl(205, 89%, 70%);*/

  /* grey used for paragraphs */
  --clr-grey-5:#69696b;
  --clr-grey-6: #747477;
  --clr-grey-7: #a9a9ad;
  --clr-grey-8: #cbcbd3;
  --clr-grey-9:  #e5e5eb;
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff; 
  /* --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: rgb(184, 39, 39);
  --ff-secondary: 'Poppins', sans-serif;
  --ff-tertiary: 'Poppins', sans-serif; */
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-family: var(--ff-primary);
    background: var(--clr-grey-10);
    color: var(--primary-color);
    line-height: 1.5;
    font-size: 0.875rem;
  }

ul {
list-style-type: none;
}

a {
text-decoration: none;
color: var(--primary-color);
cursor: pointer;
}

/* h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-tertiary); 
}*/

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 0.875rem;
}
p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}
hr {
  color: var(--clr-white);
}

@media screen and (min-width: 800px) {
    h1 {
      font-size: 4rem;
    }
    h2 {
      font-size: 2.5rem;
    }
    h3 {
      font-size: 1.75rem;
    }
    h4 {
      font-size: 1rem;
    }
    body {
      font-size: 1rem;
    }
    h1,
    h2,
    h3,
    h4 {
      line-height: 1;
    }
  }

  /*
===============
Layouts
===============
*/
  .section {
    padding: 4rem 0;
  }

  .section-center {
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;
  }
  @media screen and (min-width: 992px) {
    .section-center {
      width: 95vw;
    }
  }
  main {
    min-height: 85vh;
    font-family: var(--ff-primary);
    background-color: var(--tertiary-color);
    position: relative;
  }