body {
	margin: 0;
	padding: 0;
	font-family: 'Barlow','Montserrat';
	background-color: #333333;
	font-size: 20px;
}
a {text-decoration: none;}
a:hover {		
}

td {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #DDD;
 	font-family: Barlow;
	font-size: 16px;
	color: #3e5353;
	padding-left: 10px;
}
td:hover {
	cursor: pointer;
	background: #FFF;
	animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

.footer {
	font-family: 'Montserrat','Barlow';
	font-size: 11px;
	color: #999;
	text-align: center;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #555;
	position: relative;
	width: 100%;
	top: 50px;
}
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, 450px);
	justify-content: center;
	padding-top: 100px;
	padding-left: 50px;
	padding-right: 50px;
	gap: 10px;

}
.item {	
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	height: 300px;
}
.item img {
  max-width: 100%;
  height: auto;
}
.thin {
	font-size: 0.7em;
}
.ttl {
	font-size: 1.3em;
}
.title {
	font-family: 'Montserrat','Barlow';
	font-size: 16px;
	text-align: center;
	color: #AAAAAA;
}

/* HEADER___________________________________________ */
.header {
	float: left;
	height: 80px;
	width: 100%;
	position: fixed;
	z-index: 10;
	text-align: center;
	padding-top: 12px;
	top: 0px;
	background: #333333;
	background: linear-gradient(0deg,rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 1) 20%, rgba(51, 51, 51, 1) 100%);
}

.indexlink {
	position: fixed;
    top: 0px;
    right: 0px;
	z-index: 21;
}

/* RESPONSIVE________________________________________ */
@media (max-width: 600px) {
.thin {font-size: 0.6em;}
.ttl {font-size: 1.2em;}
td {font-size: 14px; 	padding-left: 7px;}
.grid-container {padding-left: 0;	padding-right: 0;}
}