/*-----------------------------------------------------------------------------------------
	https://computermentor.net/makingawebsite/tutorials-html/html-cheat-sheet.php
-----------------------------------------------------------------------------------------*/
#html-cheat-sheet dl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#html-cheat-sheet dt {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

#html-cheat-sheet dd {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

#html-cheat-sheet strong {
  color: black;
}

dl dt:nth-child(odd), dd:nth-child(odd) {
  background: #cccccc;
  border-bottom: 1px solid #999999;
}

dl dt:nth-child(even), dd:nth-child(even) {
  background: #e5e5e5;
  border-bottom: 1px solid #999999;
}


.color-cccccc {
	background: #cccccc;
}

.color-e5e5e5 {
	background: #e5e5e5;
}

/*-------------------------------------------------------------------------------------------------------
	Tutorials
-------------------------------------------------------------------------------------------------------*/
.dep-pro-tim {
	flex: 0 0 100%;
}

.keywords {
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.keywords span {
  color: #131313;
  letter-spacing: .15em;
}

@media only screen and (min-width: 600px) {
	.display_phone {
		display: none;
	}
	#html-cheat-sheet dt {
		flex: 0 1 30%;
	}
	#html-cheat-sheet dd {
		flex: 0 1 70%;
	}
	dl dt:nth-of-type(odd), dd:nth-of-type(odd) {
	  background: #cccccc;
	  border-bottom: 1px solid #999999;
	}

	dl dt:nth-of-type(even), dd:nth-of-type(even) {
	  background: #e5e5e5;
	  border-bottom: 1px solid #999999;
	}
}