/* styiling 

--- 01 TYPOGRAPHY SYSTEM

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

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

- Font weights
Default: 400

- Line heights
Default: 1

font-family - 'cinzel' , ' lato'.


--- colors

-- Main color #191970

Tints - #BABAD4 , #7575a9 , #47478d
shades - #14145a , #0f0f43 , #0a0a2d


-- Main color - #4B0082 
Tints - #6f339b , #9366b4 , #b799cd , #dbcce6
shades - #3c0068 , #2d004e ,  #1e0034


-- Main color - #50C878

Tints - #73d393 , #96deae , #b9e9c9 , #dcf4e4
shades - #40a060 , #307848 , #205030 , #102818

-- secondary colors - #FFD700 
-- secondary colors - #DC143C

-- Text - #333 , #777 , #D3D3D3


*/

/* Global resetter */

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

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}
.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
}

.flex {
  display: flex;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gap {
  gap: 1.5rem;
}

.grid {
  display: grid;
}

.grid-1-cols {
  grid-template-columns: 1fr;
}
.grid-2-cols {
  grid-template-columns: 1fr 1fr;
}
.grid-4-cols {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-2of3-cols {
  grid-template-columns: 2fr 1fr;
}

/* reusable css */

.body-title {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  color: #333333;
  font-family: "cinzel";
}

.flex-col {
  flex-direction: column;
}

.mb {
  margin-bottom: 2.4rem;
}