/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
body {
  color: #333;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative; }

img {
  max-width: 100%;
  height: auto; }

a {
  color: #002268; }

li {
  list-style-type: none; }

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  overflow-x: hidden;
  /* scroll-behavior: smooth; */ }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 37.5em) {
    html {
      font-size: 43%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 70%; } }

img {
  max-width: 100%;
  height: auto; }

a {
  color: #002268; }

a:hover {
  text-decoration: none; }

p,
ul,
ol {
  margin: 0 0 1.65em 0; }

p,
li {
  line-height: 1.65; }

*::selection {
  background-color: #002268;
  color: #fff; }

/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #002268
- Tints:
#448ee4
#fae5d3
#eb984e

- Shades: 
#cf711f
#45260a

- Accents:
- Greys

#888
#767676 (lightest grey allowed on #fff)
#6f6f6f (lightest grey allowed on #fdf2e9)
#555
#333

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/
body {
  border-top: #bb133e 1rem solid;
  border-bottom: #bb133e 1rem solid;
  font-family: "IBM Plex Serif", serif;
  line-height: 1.7;
  color: #1a1a1a;
  font-weight: 400; }

.container {
  max-width: 160rem;
  margin: 0 auto;
  position: relative; }
  .container--medium {
    max-width: 140rem;
    margin: 0 auto;
    position: relative; }
  .container--narrow {
    max-width: 70rem;
    margin: 0 auto;
    position: relative; }
  .container--small {
    max-width: 50rem;
    margin: 0 auto;
    position: relative; }

.main-navigation a {
  font-size: 2.5rem;
  font-weight: 300;
  color: #fff;
  margin: 0 5px;
  text-decoration: none; }

.main-navigation:hover {
  color: #fff;
  text-decoration: underline;
  color: #bb133e;
  font-weight: normal; }

.main-navigation ul {
  list-style: none;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem; }

.main-navigation li:last-of-type {
  margin-right: 0; }

.main-navigation .current-menu-item a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #bb133e;
  padding: 2px 5px; }

.main-navigation .current_page_item {
  background-color: #b4d2f4;
  color: #002268;
  border: none;
  border-radius: 1rem; }

.site-header {
  width: 100vw;
  background: linear-gradient(#002268, #b4d2f4);
  position: relative;
  margin: 0 auto;
  z-index: 1; }
  .site-header__logo-box {
    padding: 1rem;
    background-color: transparent; }
    .site-header__logo-box img {
      width: 10rem; }
  .site-header__menu-bar {
    padding: 0 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between; }