:root {
	--color-primary: #B8D41F;
	--color-dark: #313131;
	--color-white: #FEFEFE;
	--font-head: "Inter", serif;
	--font-base: "Inter", serif;
}

body {
    font-family: var(--font-base);
    color: #8B8987;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 1px;
}

.sr-only {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(1px);
    display: block;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}  

.site-wrap {
    width: 100%;
    max-width: 1200px;
    padding-inline: 2rem;
    margin-inline: auto;
}

.site-wrap > * + * {
    margin-top: var(--flow-space, 2rem);
} 

.site-wrap p {
}

.site-wrap a {
    transition: color 0.3s ease-in-out;
}

.site-wrap a:hover {
    color: var(--color-primary);
}

.logo {
	margin-inline: auto;
}

.site-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2rem;
}

.site-social a {
    color: #8B8987;
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
}

@media screen and (max-width: 420px) {
	.logo {
		max-width: 240px;
	}
}