index.css

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}

body {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: black !important;
}

.container {
	margin: 0 auto;
	max-width: 120rem;
	color: black;
}

h2{
  display: inline-block;
  letter-spacing: .3rem;
}

.link, .link:visited, .link:active{
  text-decoration: none;
  font-size: 1.4rem;
  border-bottom: 1px solid salmon;
  color: deeppink;
  letter-spacing: .4rem;
}

.author{
  text-align: center;
  margin-top: 2rem;
}

.name{
  margin: 0 3rem;
}

.grid-3-cols {
	max-width: 120rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: 10rem;
	column-gap: 5rem;
	padding: 10rem 0;
	justify-content: center;
	justify-items: center;
}

.possible {
	justify-self: center;
}

.box {
	color: black;
	font-size: 2rem;
}

.row {
	width: 40rem;
	height: 4rem;
	display: flex;
}

.small-box {
	width: 4rem;
	display: inline-block;
	border: 0.3rem solid black;
}

select {
	font-size: 2rem;
	padding: 1rem 2rem;
}

.nav {
	padding: 5rem 0;
	color: black;
	font-size: 2rem;
  margin: 0 2rem;
}

button {
	padding: 1rem 2rem;
	font-size: 1.6rem;
}

/* ********************************** */
/** 1. BELOW 1440px (Smaller desktops) **/
/* ********************************** */

/* 16px = 1rem here, no html font size is set up */
@media (max-width: 90rem) {
	.container {
		margin: 0 auto;
		max-width: 100rem;
		color: wheat;
	}

	.grid-3-cols {
		max-width: 100rem;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 10rem;
		column-gap: 5rem;
		padding: 10rem 0;
		justify-content: center;
		justify-items: center;
	}

	.row {
		width: 35rem;
		height: 3.5rem;
		display: flex;
	}

	.small-box {
		width: 3.5rem;
		display: inline-block;
		border: 0.3rem solid black;
	}
}


/* ********************************** */
/** 2. BELOW 1233px (Smaller desktops) **/
/* ********************************** */


@media (max-width: 77rem){
  .container {
		margin: 0 auto;
		max-width: 80rem;
		color: wheat;
	}

	.grid-3-cols {
		max-width: 80rem;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 10rem;
		column-gap: 5rem;
		padding: 10rem 0;
		justify-content: center;
		justify-items: center;
	}

	.row {
		width: 30rem;
		height: 3rem;
		display: flex;
	}

	.small-box {
		width: 3rem;
		display: inline-block;
		border: 0.3rem solid black;
	}
}

/* ********************************** */
/** 3. BELOW 1050px (Smaller desktops) **/
/* ********************************** */

@media (max-width: 65.6rem){
  .container {
		margin: 0 auto;
		max-width: 80rem;
		color: wheat;
	}

	.grid-3-cols {
		max-width: 80rem;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 10rem;
		column-gap: 5rem;
		padding: 10rem 0;
		justify-content: center;
		justify-items: center;
	}

	.row {
		width: 26rem;
		height: 2.6rem;
		display: flex;
	}

	.small-box {
		width: 2.6rem;
		display: inline-block;
		border: 0.3rem solid black;
	}
}

/* ********************************** */
/** 4. BELOW 932px (Smaller desktops) **/
/* ********************************** */

@media (max-width: 65.6rem){
  .container {
		margin: 0 auto;
		max-width: 80rem;
		color: wheat;
	}

	.grid-3-cols {
		max-width: 80rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 10rem;
		column-gap: 5rem;
		padding: 10rem 0;
		justify-content: center;
		justify-items: center;
	}

	.row {
		width: 26rem;
		height: 2.6rem;
		display: flex;
	}

	.small-box {
		width: 2.6rem;
		display: inline-block;
		border: 0.3rem solid black;
	}
}

/* ********************************** */
/** 5. BELOW 694px (Smaller desktops) **/
/* ********************************** */

@media (max-width: 43.3rem){
  .container {
		margin: 0 auto;
		max-width: 80rem;
		color: wheat;
	}

	.grid-3-cols {
		max-width: 80rem;
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 10rem;
		column-gap: 4rem;
		padding: 10rem 0;
		justify-content: center;
		justify-items: center;
	}

	.row {
		width: 26rem;
		height: 2.6rem;
		display: flex;
	}

	.small-box {
		width: 2.6rem;
		display: inline-block;
		border: 0.3rem solid black;
	}
}