/*
01 LAYOUT
    - Mobile: 375px
    - Desktop: 1440px

02 COLORS
    - Primary
      -- Gold-500: hsl(31, 77%, 52%)
      -- Cyan-800: hsl(184, 100%, 22%)
      -- Green-950: hsl(179, 100%, 13%)

    - Neutral
      -- Transparent-white (paragraphs): hsl(0, 0%, 100%, 0.75);
	    -- Gray-100 (background, headings, buttons): hsl(1, 0%, 95%);
    

03 TYPOGRAPHY

    - FONTS FAMILY
      -- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
      -- Weights: 400

      -- Family: [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display)
      -- Weights: 700

    - Font Size (px):
      -- paragraph: 15

    - Spacing (px):

*/

:root {
	--gold-500: hsl(31, 77%, 52%);
	--cyan-800: hsl(184, 100%, 22%);
	--green-950: hsl(179, 100%, 13%);

	--transparent-white: hsl(0, 0%, 100%, 0.75);
	--gray-100: hsl(1, 0%, 95%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	/* Default: 1rem = 16px */
	/* Percentage of user's browser font-size setting
    10px / 16px = 0.625 = 62.5% */
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	font-family: 'Lexend Deca', sans-serif;
	line-height: 1.7;
	font-size: 1.5rem;
	font-weight: 300;

	background-color: var(--gray-100);
	overflow: hidden;

	min-width: 100vw;
	min-height: 100vh;

	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	/* overflow: hidden; */
}
.section-container {
	margin: 6rem 2rem;
	display: flex;
	justify-content: center;

	border-radius: 0.8rem;
	overflow: hidden;
}
.column--1 {
	background-color: var(--gold-500);

	button {
		color: var(--gold-500);
	}
	button:hover,
	button:active {
		background-color: var(--gold-500);
	}
}
.column--2 {
	background-color: var(--cyan-800);

	button {
		color: var(--cyan-800);
	}
	button:hover,
	button:active {
		background-color: var(--cyan-800);
	}
}
.column--3 {
	background-color: var(--green-950);

	button {
		color: var(--green-950);
	}
	button:hover,
	button:active {
		background-color: var(--green-950);
	}
}
button {
	width: 70%;
	border: 2px solid var(--transparent-white);
	padding: 1.5rem 0;
	border-radius: 10rem;

	font-weight: 700;
	font-size: 1.5rem;
	background-color: var(--gray-100);
}
button:active,
button:hover {
	cursor: pointer;
	color: var(--transparent-white);
	transition: all;
	transition-duration: 0.5s;
}

.column {
	width: 32rem;
	padding: 5.8rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 6.4rem;

	color: var(--transparent-white);

	.column-heading {
		font-family: 'Big Shoulders', sans-serif;
		font-weight: 700;
		font-size: 3rem;
		color: var(--gray-100);
	}

	.text-container {
		display: flex;
		flex-direction: column;
		gap: 3rem;
		/* font-weight: 300; */
		/* letter-spacing: 0.1rem; */

		img {
			width: 6rem;
		}
	}
}

@media (max-width: 48em) {
	.section-container {
		flex-direction: column;
	}
	.column {
		padding: 5rem;
	}
}

/* ---------- FOOTER ---------- */
.attribution {
	font-size: 1.4rem;
	text-align: center;
}
.attribution a {
	text-decoration: none;
	color: hsl(228, 45%, 44%);
}
.attribution a:hover,
.attribution a:active {
	color: blue;
	transition: all;
	transition-duration: 0.4s;
}