/*

--- 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: 
Small: 
Medium: 
Large: 
Paragraph default: 

- Letter spacing

--- 02 COLORS

-Primary: Deep #6c478b

- Tints: #865f73, #775c6b
- Shades: 
- Accents: #2a7bb1
  - Tints of accent: #377ec1, #2c72a0
- Greys: #333, #555,
- Beiges: #f7f1e8, #efe3d0 (1st one = primary)

--- 05 SHADOWS

--- 06 BORDER-RADIUS
Default: 
Medium:


 box-shadow: 

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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;

  /* Does not work on Safari */
  scroll-behavior: smooth;
}

body {
  font-family: "p22-mackinac-pro", serif;
  line-height: 1;
  font-weight: 400;
  color: #555;
  background-color: #f7f1e8;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Only works if there is nothing absolutely positioned in relation to body */
  overflow-x: hidden;
}
/*  ///NAVIGATION-header /// */
nav {
  margin-top: 1.2rem;
  /* width: 100%; */
  height: 4.4rem;
  font-size: 1.8rem;
}
.body-head {
  width: 850px;
  align-items: center;
  margin: auto;
  position: relative;
}

.main-nav {
  align-items: center;
  /* width: 850px; */
  display: flex;
  justify-content: center;
}

.icon {
  display: block;
  margin: auto;
  width: 81px;
  height: 99px;
}

nav ul {
  float: left;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
  font-size: 2rem;
  background-color: #f7f1e8;
}

nav ul li:hover {
  transition: all 0.3s;
  text-shadow: 0 0 1px #444;
}

nav ul li a {
  color: #444;
  padding: 1.6rem 2rem;
  display: block;
  text-decoration: none;
}
nav ul li ul {
  display: none;
  position: absolute;
  padding-bottom: 0.8rem;
  text-shadow: none;
}

nav ul li:hover ul {
  display: block;
}
nav ul li ul li a {
  /* padding: 0.8rem 0.8rem; */
}

nav ul li ul li {
  width: 100%;
}

nav ul li ul li a:hover {
  transition: all 0.3s;
  text-shadow: 0px 0px 1px #444;
}

/* Mobile Nav */
.button-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #6c478b;
}
.icon-mobile-nav[name="close-outline"] {
  display: none;
}
/*  ///FONT STYLES /// */

h1 {
  font-size: 4rem;
  color: #6c478b;
  font-weight: 700;
  text-align: center;
}

h2 {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 3rem;
}

h3 {
  font-size: 2.4rem;
  font-weight: 500;
  padding: 2.4rem 0;
  font-style: italic;
}

p {
  font-size: 2rem;
  line-height: 1.4;

  padding: 0.6rem 0;
}
.note {
  font-size: 1.6rem;
  font-style: italic;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 6rem;
}