/* 

LOGO FONT: Montserrat Classic

--- 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
             
- Letter spacing
-0.5px
0.75px

--- 02 COLORS

https://imagecolorpicker.com/en

- Primary Color Pallet: 
#004247
#1c5c5c

- Secondary Color Pallet: 
#d1d5cd
#d4dbd4
#4c6668
#314747

- Tertiary Color Pallet: 
#5cafe5
#3c749c
#2a81bd
#0b4d85
#986659

#dcdcd4
#f4c4ac
#e49c7a
#e4946c
#e5936b
#f4947c
#e09480
#e8946c


https://maketintsandshades.com/

- Primary Color Tints 
#1a5559
#33686c
#4d7b7e
#668e91
#80a1a3
#99b3b5
#b3c6c8
#ccd9da
#e6eced

- Primary Color Shades
#003b40
#003539
#002e32
#00282b
#002124
#001a1c
#001415
#000d0e
#000707



--- 03 IMAGES

-- https://unsplash.com/

--- 05 SHADOWS
box-shadow: 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 / 28 / 32 / 48 / 64 / 80 / 96 / 128


*/

/* ////////////////////////////////////////////////////////////////////// */

/* General Formats ///////////////////////////////////////////// */

* {
  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 of our webpage is 62.5% of the user's browser font size */
/* font-size: 62.5%; */
/* }  */

/* body { */
/* background-color: #004247; */

/* font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555; */

/* ONLY WORKS if there's nothing absolutely positioned in relation to body element */
/* All elements that overflow the viewport horizontally, will be hidden */
/* If setting below in body doesn't work, type the same line in 'html' element as well and it should work */
/* overflow-x: hidden; */
/* } */

/* text */

.text-lighter-green {
  color: #e6eced;
}

.text-light-green {
  color: #b3c6c8;
}

.text-less-light-green {
  color: #ccd9da;
}

.text-dark-green {
  color: #004247;
}

.text-darker-green {
  color: #00282b;
}

.text-tertiary {
  color: #f4947c;
}

.text-tertiary-light {
  color: #f4c4ac;
}

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156);
}

.text-shadow-light {
  text-shadow: 1px 1px 1px rgba(164, 164, 164, 0.156);
}

/* bg */

.bg-less-dark-green {
  background-color: #1a5559;
}

.bg-dark-green {
  background-color: #004247;
}

.bg-less-darker-green {
  background-color: #002e32;
}

.bg-darker-green {
  background-color: #00282b;
}

/* gradient background */
.bg-light-gradient {
  background-image: linear-gradient(to right top, #ffffff, #eaeaea6f);
}

/* shadow */
.box-shadow {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.633);
}

.border-radius-sm {
  border-radius: 2px;
}

/* btn */
.btn-white-gray,
.btn-white-gray:link,
.btn-white-gray:visited {
  background-color: #e6eced;
  border-color: #ccd9da;
  /* border-color: #002124; */
  /* border-color: #003b40; */
  color: #001a1c;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156);
}

.btn-white-gray:hover,
.btn-white-gray:active {
  /* background-color: #001415; */
  background-color: #00282b;
  border-color: #e6eced;
  color: #e6eced;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156);
}

.btn-dark-green,
.btn-dark-green:link,
.btn-dark-green:visited {
  background-color: #002124;
  border-color: #e6eced;
  color: #e6eced;
}

.btn-dark-green:hover,
.btn-dark-green:active {
  /* background-color: #001415; */
  background-color: #004247;
  border-color: #e6eced;
  color: #e6eced;
}