html {
	font-size: 10px;
}

h1,
h2,
h3,
h4,
ul,
p {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

li {
	list-style: none;
}

@media only screen and (max-width: 500px) {
	html {
		font-size: 6px;
	}
}

body {
	background-color: rgb(245, 245, 37);
	margin: 0;
	padding: 0;
	font: normal 1.6rem 'Helvetica Neue', Helvetica, Arial, sans-serif;
	position: relative;
}

header {
	background-color: #000000;
	padding: 1.6rem;
	display: flex;
}

header h1 {
	background-color: red;
	padding: 0.4rem 0.8rem;
	color: rgb(255, 255, 255);
	font-size: 2.6rem;
}

nav {
	display: grid;
}

nav ul {
	margin: auto;
	display: flex;
}

nav li {
	margin: 0 2rem;
	font-size: 1.6rem;
}

nav a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

section {
	padding: 2rem;
}

pre.explain__parent {
	padding: 1rem;
}

p .explain__comment {
	color: rgb(214, 42, 191);
}

article,
aside {
	padding: 1.2rem;
}

h4 {
	font-size: 2rem;
}

.parent__div.flex {
	background-color: rgb(132, 212, 236);
	height: 50vh;
	/* you need to add the following
    three lines to a parent */
	display: flex;
	justify-content: center;
	align-items: center;
}

.parent__div.flex .child__div {
	background-color: #fff;
	margin: auto;
	padding: 6rem;
	border: 0.5rem dashed #333;
}

.parent__div.grid {
	background-color: rgb(132, 212, 236);
	height: 50vh;
	/* you need to add the following
	three lines to a parent */
	display: grid;
}

.parent__div.grid .child__div {
	background-color: #fff;
	margin: auto;
	padding: 6rem;
	border: 0.5rem dashed #333;
}

.child__div p {
	font-size: 2rem;
}