body {
	font-size: 1em;
}
header {
	background-color: red;
}
nav {
	background-color: cyan;
}
main {
	background-color: green;
}
figure {
	background-color: magenta;
  padding: 1em;
}
figcaption {
	background-color: yellow;
}
details {
	background-color: brown;
  padding: 1em;
  margin: 0.5em;
}
summary {
	background-color: orange;
  cursor: pointer;
}
footer {
	background-color: blue;
}
blockquote {
	background-color: white;
}
fieldset {
	border: 5px dashed red;
  background-color: magenta;
}
legend {
	font-weight: bold;
  font-size: 1.2em;
  color: orange;
}
/* Float Navigation */
#navigation {
	list-style-type: none;
}
#navigation li {
	float: left;
}
#navigation li a {
	display: block;
  padding: 0.5em;
}

/* Flex Navigation */
#navigation-alt {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.5em;
  background-color: #00f;
}
#navigation-alt a {
	text-decoration: none;
  margin: 0 0.5em;
  color: white;
  padding: 0.5em;
}
#navigation-alt a:hover {
	background-color: #3f3ffc;
}
.img-responsive {
	width: 100%;
  max-width: 150px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.sr-only {
	position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0,0,0,0);
  border: 0;
}

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 1em;
	height: 1em;
	border: 1px solid #0363F0;
	vertical-align: -3px;
	color: #0363F0;
}
input[type="checkbox"]:before {
	content: "✔️";
	position: absolute;
	font-size: 1.5em;
	right: -0.2em;
	top: -0.6em;
	visibility: hidden;
}
input[type="checkbox"]:checked:before {
	visibility: visible;
}

/* 
	Media Queries

	Syntax
  @media type and (feature: value) {
		
  }

	types: all, screen, print, speech
	features: width, min-width, max-width, resoulation, aspect-ratio, prefers-color-scheme
*/
@media (min-width: 768px) {
  .col-2 {
    float: left;
    width: 45%;
    padding: 0.5em;
  }
}