.
Containers are an immediate child , purely for constraining width.
*/
.section {
padding: 2em 0; /* we apply a vertical padding only to sections */
box-sizing: border-box;
}
.container {
box-sizing: border-box;
width: 100%;
max-width: var(--site-max-width);
margin: 0 auto;
padding: 0 1em; /* and we apply a horizontal padding only to containers */
}
/* Ensure consistent colors for text selection and element focus */
::selection {
background: var(--primary-accent);
color: var(--primary-accent-text);
}
*:focus {
border-radius: 2px;
text-decoration: none;
outline: 1px dashed var(--ui-text);
outline-offset: 4px;
}
@media (min-width: 400px) {
.container {
padding: 0 2em;
}
}