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

html {
   font-size: 62.5%; 
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--grey-base);
    font-size: 30px;
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--grey-shade);
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

h4 {
    font-size: var(--text-h4);
}

h5 {
    font-size: var(--text-h5);
}

p {
    font-size: var(--text-paragraph);
}

a {
    text-decoration: none;
    font-size: var(--text-base);
    display: inline-block;
}

ul {
    list-style: none;
}

span {
    display: inline-block;
}

.small-text {
    font-size: var(--text-sm);
}

.grid-container {
	font-size: 80px; /* grid items will inherit this font size*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	/*grid-template-columns: 100px 200px; makes 2 columns the second one is twice the size of the first*/
	/*grid-template-columns: 8fr;*/
	/*grid-template-rows: 50px 100px 200px 300px;*/
	/*grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/

	/*height: 800px;*/
	/*width: 400px;*/
	row-gap: 5px;
	column-gap: 5px;
}

.grid-item {

	/*height: 40px;*/
	width: 225px;
	text-align: center;
	font-size: .33em;
}


/*.grid-item-6 {
	background-color: orange;
}

.grid-item-7 {
	background-color: grey;
}

.grid-item-8 {
	background-color: pink;
}*/



/*.item {
	padding: 2em;
	background-color: lightblue;
	color: white;
	text-align: center;
	border-radius: 8px;
	font-size: 2rem;
}
*/



/* ----------------------- COMPONENTS ----------------------- */

.btn {
    font-size: var(--text-base);
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 8px;
}

.btn-primary:link, .btn-primary:visited {
    color: var(--white);
    background-color: var(--primary-base);
    border: 2px solid var(--primary-base);
}

.btn-primary:hover, .btn-primary:active {
    color: var(--white);
    background-color: var(--primary-shade);
    border: 2px solid var(--primary-shade);
}

.btn-primary-outline:link, .btn-primary-outline:visited {
    color: var(--primary-base);
    background-color: var(--white);
    border: 2px solid var(--primary-base);
}

.btn-primary-outline:hover, .btn-primary-outline:active {
    color: var(--primary-shade);
    background-color: var(--white);
    border: 2px solid var(--primary-shade);
}

.btn-secondary:link, .btn-secondary:visited {
    color: var(--white);
    background-color: var(--secondary-base);
    border: 2px solid var(--secondary-base);
}

.btn-secondary:hover, .btn-secondary:active {
    color: var(--white);
    background-color: var(--secondary-shade);
    border: 2px solid var(--secondary-shade);
}

.highlight {
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.highlight-primary {
    background-color: var(--primary-base);
}

.highlight-secondary {
    background-color: var(--secondary-base);
}

.highlight-tertiary {
    background-color: var(--tertiary-base);
}

.logo-md {
    width: 100px;
}

.logo-sm {
    width: 80px;
}