.the-directory { }
.the-directory .entry a { color: #000; }
.dark-skin .the-directory .entry a { color: #E1E8ED; }
.the-directory .entry a:hover { text-decoration: underline;}
.dark-skin .the-directory .entry a:hover { color: #99ccff; text-decoration: underline; }

.directory-container { 
    font-family: 'Roboto', sans-serif;
}

.directory-container h1 { line-height: 1.2; font-size: 26px; margin-bottom: 10px; }

.directory-entry {
	padding-top: 20px;
font-family: 'Roboto', sans-serif;
font-size: 1.125rem;
letter-spacing: 0.01em;
	color: #333a44;
	border-top: 1px solid rgba(0,0,0,0.2);
	margin-top: 10px;
}

.directory-entry p { line-height: 1.65; }

.dark-skin .directory-entry {
	border-top: 1px solid rgba(255,255,255,0.2);
}

.dark-skin .directory-entry { color: #e8ecf0; }

.directory-entry a:not(:hover) { border-bottom: 2px solid #00a1ef; font-weight: 600 !important;  }
.directory-entry a:hover { background-color: #00a1ef; color: #fff !important; border-bottom: none; font-weight: 600 !important; }

.directory-entry p:not(:last-child) { 
	margin-bottom: 20px;
}

.index-container { display: block; gap: 10px; width: 100%; justify-content: center; margin: 0 auto; padding: 0 15%; }
.index-column { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.dbread-margin { margin-top: 0; }

@media (min-width: 768px) {
	.directory-container { 
	margin-inline-start: 120px;
	max-width: 750px;
	padding: 0 20px;
	}	
	.directory-container h1 { font-size: 2.9rem; }
	.dbread-margin { margin-top: 20px; }
.index-container { display: flex; gap: 10px; width: 100%;  flex-wrap: wrap; justify-content: center; }
.index-column { flex: 0 1 calc(50% - 8px); box-sizing: border-box; }
}


@media (min-width: 1300px) {

.index-container { display: flex; gap: 10px; width: 100%; padding: 0;}
.index-column { flex: 1; }

}