/* Always reserve the scrollbar gutter so navigating between a scrolling
   and a non-scrolling page doesn't shift the layout horizontally. */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Elms Sans', system-ui, sans-serif;
    background-color: var(--page);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Content fills the viewport so the footer is pinned to the bottom. */
.site-main {
    flex: 1 0 auto;
}

/* xs */
@media (min-width: 0px) {
    .step {
        padding: 20%;
    }
}

/* sm */
@media (min-width: 576px) {
    .step {
        padding: 4%;
    }
}

/* md */
@media (min-width: 768px) {
    .step {
        padding: 2%;
    }
}

/* lg */
/*@media (min-width: 992px) {
    .step {
        padding: 2%;
    }
}*/

/* xl */
/*@media (min-width: 1200px) {
    .step {
        padding: 2%;
    }
}*/

.btn-primary {
    background-color: #009302;
    border-color: #009302;
}

.btn-primary:hover {
    background-color: #006b02;
    border-color: #006b02;
}

a {
    color: #009302;
}

a:hover {
    color: #006b02
}

p {
	font-size: 0.85em;
}

.chip, .chip:hover {
    color: inherit;
    text-decoration: inherit;
}

.about-page {
    max-width: 640px;
    margin: 24px auto 48px;
}

.about-page h1 {
    margin-bottom: 24px;
}

.about-page p {
    font-size: 1rem;
    line-height: 1.6;
}

.typewriter {
	font-family: 'Special Elite', sans-serif;
}

button:hover, .btn:hover {
    cursor: pointer;
}

.dotted {
    border-bottom: 1px solid #009302;
}

.dotted:hover {
    border-bottom: 1px solid #006b02;
}

.bottom-border {
	border-bottom: 1px solid #ebebeb;
}

.dotted:hover {
	text-decoration: none;
}

.vcenter {
    display: flex;
    align-items: center;
}

.steps img {
	height: 72px;
}

.steps p {
	margin-top: 16px;
}

.row {
	margin-bottom: 12px;
	margin-top: 12px;
}