.ka-dir {
	width: 100%;
	height: 100%;
	display: flex;
	margin-top: 1rem;
	flex-direction: column;
	border-bottom: 1px solid var(--foreground);

	.ka-dir-top {
		background-color: var(--nav-color);
		border-top: 1px solid var(--foreground);
		border-bottom: 1px solid var(--foreground);
	}

	.ka-dir-row {
		width: 100%;
		display: grid;
		padding: 0.25rem 10px;
		place-items: left center;
		transition-duration: 300ms;
		grid-template-columns: 0.15fr 2fr 1fr 1fr;

		&:hover {
			transition-duration: 300ms;
			background-color: rgba(0, 0, 0, 0.15);
		}

		.ka-dir-item {
			display: flex;
			align-items: center;
		}	
		
		a:hover.ka-dir-item {
			text-decoration: underline;
		}

		@media (max-width: 640px) {
			grid-template-columns: 0.05fr 1fr;

			#size, #date {
				display: none;
			}
		}
	}
}

.ka-readme {
	padding: 1rem 1rem 0 1rem;

	h1, h2 {
		width: 100%;
		border-bottom: 1px solid var(--foreground);
	}
}