body {
	background-image: url('./pictures/background.gif');
    max-width: 800px;
    margin: 40px auto;
    padding: 0 10px;
	line-height: 1.4;
    font: 18px/1.5 /*-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"*/;    
	color: #f0f0f0;
}

h1, h2, h3 {
	color: #f0f0f0
}

pre {
	font-size: x-large;
    line-height: 1.15;
	color:  #f0f0f0;
}

a:link {
	color: #9e9eff;
}
a:active{
	color: #ff9e9e
}
a:visited {
	color: #d0adf0;
}


img {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	border: 1px solid black;
}

img.gb {
	border: none;
}


.grid-container {
	display: grid;
	gap: 30px;
	grid-auto-flow: dense;
	padding: 10px;
	justify-items: center;
}


@media (min-width: 360px){
	.grid-container {
		grid-template-columns: auto ;
	}
}

@media (min-width: 650px){
	.grid-container {
		grid-template-columns: auto auto;
		padding: 55px;
	}
}

@media (min-width: 920px){
	.grid-container {
		grid-template-columns: auto auto auto;
	}
}

.grid-item {
	background-image: url('./pictures/texture2.gif');
	color: #000;
	border: 1px solid black;
	width: 180px;
	height: 200px;
	margin: 15px;
	display: grid;
	grid-template-columns: auto-fit, minmax(230px, 1fr);
	justify-items: center;
	grid-gap: 5px;
	transition: transform .2s;
}

.grid-item:hover {
	border: 1px solid black;
	transform: scale(2);
	z-index: 1;
}

div.grid-item-pict{
	padding-top: 8px;
}

.grid-item-pict.pic{
	border: white;
}

div.grid-item-desc{
	font-size: 13px;
	margin: 8px;
	margin-top: 0px;
}