/* 
font size
    10 12 14 16 18 20 24 30 36 44 52 62 74 86 98

font weight
    Normal: 400
    Details: 500
    Semi-bold: 600
    Bold: 700

line height
    Normal: 1
    Details text: 1.5 - 1.6
    Paragraph default: 1.8

Brand color
    #e67e22

tints
    background: #fdf2e9
    1º tint: #fae5d3
    2º tint#f8d8bd

shadows
    background: #cf711f


White;
    text: #fff
    numbers: #ddd

Greys
    authors: #6f6f6f
    featured: #888
    text: #444
    text / heading: #333

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

    letter-spacing
    -0.5px
    0.75px

*/

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

*:focus {
	outline: none;
	box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.4);
}

html {
	font-size: 62.5%;
}

body {
	font-family: "Nunito", sans-serif;
	color: #444;
	line-height: 1;
	font-weight: 400;
}

/***********/
/* Headers */
/***********/

.heading-h1,
.heading-h2,
.heading-h3 {
	color: #333;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.heading-h1 {
	font-size: 6.2rem;
	line-height: 1;
	margin-bottom: 3.2rem;
}

.heading-h2 {
	font-size: 5.2rem;
	line-height: 1.3;
	margin-bottom: 9.6rem;
}

.heading-h3 {
	font-size: 4.4rem;
	line-height: 1.5;
	margin-bottom: 3.2rem;
}

/***********/
/* General */
/***********/

.container {
	max-width: 120rem;
	padding: 0 3.2rem;
	margin: 0 auto;
}

.grid {
	display: grid;
	gap: 6.4rem;
}

.grid-footer {
	grid-template-columns: repeat(2, 1.5fr) repeat(3, 1fr);
}

.grid:not(:last-child) {
	margin-bottom: 9.6rem;
}

.grid-2-col {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
	grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
	grid-template-columns: repeat(4, 1fr);
}

.grid-5-col {
	grid-template-columns: repeat(5, 1fr);
}

/********/
/* List */
/********/

.list {
	list-style: none;
	/* height: 100%; */

	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.list-item {
	font-size: 1.8rem;

	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.list-icon {
	height: 3rem;
	width: 3rem;
	color: #e67e22;
}

/*******************/
/* Links e buttons */
/*******************/

.btn {
	font-family: inherit;

	border: none;
	border-radius: 9px;

	cursor: pointer;
}

.btn,
.link:link,
.link:visited {
	display: inline-block;

	text-decoration: none;
	color: #e67e22;
	font-size: 2rem;
	font-weight: 600;
}

.link:hover,
.link:active {
}

.btn-form {
	color: #fdf2e9;
	background-color: #45360a;

	padding: 1.2rem;

	align-self: end;

	transition: all 0.3s;
}

.btn-form:hover {
	background-color: #fff;
	color: #555;
}

/**************************/
/* Spacing and aligniment */
/**************************/

.margin-bottom-sm {
	margin-bottom: 1.6rem !important;
}

.margin-bottom-md {
	margin-bottom: 4.8rem !important;
}

.margin-bottom-l {
	margin-bottom: 9.6rem !important;
}

.center-text {
	text-align: center;
}

strong {
	font-size: 500;
}

/* --1 */
/* using pixels as a measure */
/* 
    .test{
        max-width: 1000px;
        background-color: red;
        padding: 100px;
    } 
    */

/* using rem instead of px 
    
    1 rem = 16px
    16px = default font size of most browsers
    A rem will always be the value (1 in this case) multiplied by the default size of the font in the browser (16px in this case) 
    
    .test{
        max-width: 50rem;
        background-color: red;
        padding: 4rem;
    } 
    */

/* 
    this one equal (almost) the same thing as the one above
    50rem * 16px = 800px
    4rem * 16px = 64px 
    */

/* --2 */
/*
    We can modify the defaut font size by defining it in the html selector:
        html{
            font-size: 10px;
        }
    
    for better practice, and for a more responsive layout, instead of pixels we should be use the % value
    
        how to find the % value 
    divide the desired font size (in this case 10px) by the default font size (16px) =
    10 / 16 = 0.625 -> 62.5%
    */