Wikipedia:Reference desk/header/styles.css

/** CSS for reference desk header */
.rd-header {
	color: var(--color-base, #202122);
	background-color: var(--background-color-neutral, #eaecf0);
	border: 1px solid var(--border-color-base, #a2a9b1);
	font: bold 20px arial,helvetica,sans-serif;
	text-align: center;
	margin-top: 0;
	margin-bottom: 6px;
	margin-left: 0;
	padding: 3px;
}
.rd-box {
	border: 1px solid #aaa;
	box-sizing: border-box;
	background-color: var( --background-color-neutral-subtle, #f5f5f5);
	color: var(--color-base, #202122);
	margin: 0 0 6px 0;
	padding: 8px;
	text-align: left;
	width: 100%;
}
ul.rd-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: 0;
}
.rd-box > li {
	display: block;
    font-size: larger;
    margin: 0;
}
.rd-box > li > a {
    background-color: var(--background-color-neutral-subtle, #eaecf0);
	display: block;
    margin: 0;
    padding: 8px;
}
.rd-box > li > .selflink {
	border-bottom: 3px solid #aaa;
	padding-bottom: 5px; /* 8px by default minus 3px border */
}
.rd-header a:link,
.rd-header a:visited,
.rd-header a:hover,
ul.rd-box a:link,
ul.rd-box a:visited,
ul.rd-box a:hover {
	color: var(--color-progressive, #00f);
}
@media screen and (max-width: 719px) {
	#refdesk-help-icon {
		display: none;
	}
	ul.rd-box li {
		display: flex;
		flex: 1;
		justify-content: center;
		white-space: pre;
	}
}
@media screen and (min-width: 720px) {
	.rd-grid {
		display: grid;
		grid-template-columns: auto 8px 14em;
		grid-template-rows: auto auto auto auto auto;
	}
	.rd-grid > :nth-child(2),
	.rd-grid > :nth-child(3),
	.rd-grid > :nth-child(4),
	.rd-grid > :nth-child(6),
	.rd-grid > :nth-child(7) {
		grid-column: 3;
	}
	.rd-grid > :nth-child(5) {
		grid-row: 2 / 7;
	}
	ul.rd-box {
		flex-direction: column;
	}
	
	.rd-box > li > .selflink {
		background-color: var(--background-color-neutral, #eaecf0);
		border-left: 3px solid #aaa;
		padding-left: 5px;
		border-bottom: 0;
		padding-bottom: 8px;
	}
	.rd-ask-button {
		justify-content: start !important;
	}
}

@media screen and (min-width: 720px) and (max-width: 1024px) {
	/* Inputs have a max-width 100%, which is good for single column
	   but at smaller grid sizes, the input want to have a min-size that is
	   too big to fit in the autosized 1st column causing the entire grid
	   to overflow, if we don't do this hack. */
	.rd-box input {
		max-width: 350px;
	}
}

@supports not (display: grid) {
	ul.rd-box.rd-box {
		flex-direction: row;
	}
}