/*
--- 01 TYPOGRAPHY

- 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: 800

- line heights
Default: 1
Small: 1.2
Medium: 1.5
Paragraph default: 1.6

- Letter spacing
-0.25px
0.25px



--- 02 COLORS

- Primary: #32e6e2
- Tints: #e6ecf2 #defffe
- Shades: #12181f
- Accents: #fbb13d
- Greys: 
    #12181f
    #1e242c
    #272f38
    #7e8792



--- 03 SHADOWS
    0 3px 10px rgba(0, 0, 0, 0.3)

--- 04 BORDER RADIUS
Default: 7px
large: 9px
medium: 5px
small: 4px
very small: 3px

--- 05 WHITE SPACES

2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/

@font-face {
  
  font-family: "Figtree";
  src: url(/fonts/Figtree.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Consolas";
  src: url(/fonts/Consolas.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "MartianMono";
  src: url(/fonts/MartianMono.woff2);
  font-weight: 100 900;
  font-style: normal;
}

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Figtree", sans-serif;
  line-height: 1;
  color: #fff;
  background-color: #12181f;
}

.container {
  max-width: 130rem;
  width: 100%;
  margin: 0 auto;
  padding: 4.2rem 4.8rem;
}


.heading-sub {
  display: inline-block;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  color: #32e6e2;
  font-size: 1.6rem;
  letter-spacing: 0.75px;
}

.heading-secondary {
  color: #e6ecf2;
  font-size: 6.2rem;
  font-weight: 800;
  text-wrap: balance; 
  margin-bottom: 2.4rem;
}

.heading-tertiary {
  font-size: 3.6rem;
  font-weight: 800;
  margin-bottom: 3rem;
}

.main-text {
  color: #defffe;
  font-size: 1.8rem;
  letter-spacing: 0.5px;
  line-height: 1.6;
  max-inline-size: 60rem; 
}

.main-btn,
.main-btn:link,
.main-btn:visited {
  display: inline-block;
  text-decoration: none;
  color: #12181f;
  background-color: #32e6e2;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.2rem 2rem;
  border-radius: 28px;
  transition: 0.3s all;
}

.main-btn:hover,
.main-btn:active {
  background-color: #8bfbf7;
}

a:active {
  transform: translateY(2px);
}


svg {
  max-width: 100%;
}

img {
  max-width: 100%;
}