html {font-size: 16px;}
@media (max-width: 1200px) {html {font-size: 15px;}}
@media (max-width: 992px) {html {font-size: 14px;}}
@media (max-width: 768px) {html {font-size: 13px;}}
@media (max-width: 600px) {html {font-size: 12px;}}

body{
  background-color: rgb(var(--blue950));
  color: rgb(var(--gray200));
  font-family: 'Montserrat';
  margin: 0;
}
:root {
  --blue50: 241, 249, 254;
  --blue100: 226, 242, 252;
  --blue200: 191, 228, 248;
  --blue300: 135, 208, 242;
  --blue400: 91, 192, 235;
  --blue500: 32, 160, 215;
  --blue600: 18, 128, 183;
  --blue700: 16, 102, 148;
  --blue800: 17, 87, 123;
  --blue900: 20, 73, 102;
  --blue950: 26, 40, 50;
  --orange50: 255, 245, 237;
  --orange100: 255, 231, 212;
  --orange200: 255, 203, 169;
  --orange300: 255, 179, 133;
  --orange400: 254, 120, 57;
  --orange500: 252, 83, 19;
  --orange600: 237, 56, 9;
  --orange700: 197, 39, 9;
  --orange800: 156, 32, 16;
  --orange900: 126, 29 ,16;
  --orange950: 68, 12, 6;
  --gray50: 247, 247, 247;
  --gray100: 237, 237, 237;
  --gray200: 229, 229, 229;
  --gray300: 200, 200, 200;
  --gray400: 173, 173, 173;
  --gray500: 153, 153, 153;
  --gray600: 136, 136, 136;
  --gray700: 123, 123, 123;
  --gray800: 103, 103, 103;
  --gray900: 84, 84, 84;
  --gray950: 34, 34, 34;

  --font-sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
}
/* FONTS */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 6rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -1.5px;
}

h2 {
  font-size: 3.75rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.5px;
}

h3 {
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
}

p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.25rem!important;
  letter-spacing: 0.5px;
}

.overline{
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.50rem;
  text-transform: uppercase;
  margin: 0 0 1em;
  letter-spacing: 0.5px;
  line-height: 1.5rem;  
}

li {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  margin: 0 0 1em;
  letter-spacing: 0.5px;
  line-height: 1.5rem;
}

a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 1.25px;
  text-decoration: none;
  color: rgb(var(--gray50));
}

button, .button {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  padding: 1rem 1.25rem;
  background-color: rgb(var(--blue300));
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-transform:uppercase;
  letter-spacing: 1.25px;
  text-decoration: none;
  color: rgb(var(--gray950));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.secb{
  background-color: transparent;
  border: 1.5px solid rgb(var(--orange50));
  color: rgb(var(--orange50));
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: background-color 0.2s ease;
  text-transform:uppercase;
  letter-spacing: 1.25px;
  text-decoration: none;
}

button:hover, .button:hover{
  background-color: rgb(var(--blue800));
  color: rgb(var(--gray50));
}

.secb:hover{
  background-color: rgb(var(--orange800));
  border: none;
}

button i, .button i{
  font-size: 1.125rem;
}
.hover-icon {
  display: none;
}
button:hover .default-icon, .button:hover .default-icon{
  display: none;
}
button:hover .hover-icon, .button:hover .hover-icon{
  display: inline;
}

/* START SCROLL BAR */
::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--blue500));
  border-radius: 0.5rem;
}