/*   
Theme Name: TatamiChild
Theme URI:
Description: Your child theme description text...
Author: Your Name
Author URI: http://www.yourdomain.com/
Template: tatami
Version: 1.0
Tags: Tatami Child Theme
*/

/* Imports the stylesheet from the Tatami parent theme */
@import url('../tatami/style.css');
@import url('prism.css');

.svg-icons img {
	max-width: 48px;
}
.svg-icons {
	display: grid;
	grid-template-columns:  repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 10px;
}
.svg-icons dd {
	display: flex;
	gap: .5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

dl dd {
	margin: 0;
}

dl {
	margin: 0 0 30px 0;
}

.site-title h1.title {
	font-weight:400;
}

	.title b {
		font-weight: 900;
	}

@media screen and (min-width: 480px) {
	.title b {
		color: #FFF;
	}
	.svg-icons dt {
		grid-row: 1;
		grid-column-end: span 2;
	}

}
@media screen and (min-width: 768px) {
	.title b {
		color: #FFF;
	}
	.svg-icons dt {
		grid-row: 1;
		grid-column-end: span 3;
	}

}
@media screen and (min-width: 1024px) {
	.title b {
		color: #F60;
	}
}
@media screen and (min-width: 1260px) {
	.title b {
		color: #F60;
	}
}
@media screen and (min-width: 1752px) {
	.title b {
		color: #F60;
	}
}
/* Now you can start adding your own styles here. Use !important to overwrite styles if neccessary. */