* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--font);
    font-family: var(--bodyFont);
    background-color: var(--background);
    text-align: center;
    }

:root {
    --primary: #0D7377;
    --font: #F2F2F2;
    --body-font: #1A1A1A;
    --background: #F7F9FA;
    --accent: #87B1B2;
    --borderStyle: 4px solid #0D7377;
    --thinBorder: 2px solid #1A1A1A;
    --headingFont: "Merriweather", serif;
    --bodyFont: "Roboto", sans-serif;
    --boxShadow: 5px 5px 5px var(--accent);
    --boxShadowRev: -2px -2px 15px 5px var(--accent);
}

.hdr-top {
    display: grid;
    grid-template-columns: 6rem auto;
    background-color: var(--primary);
}

.hdr-top img {
    width: 6rem;
    height: auto;
}

.hdr-top span {
    display: inline-block;
    width: 75%;
    text-align: center;
    align-self: center;
    font-family: var(--headingFont);
    font-size: 2rem;
    padding-left: 2rem;
    background-color: var(--primary);
}

h1, h2, h3 {
   border: var(--borderStyle);
}

footer, 
header, h1 {
    border: var(--thinBorder);
}

h2, h3 {
    background-color: var(--accent);
    font-size: 1.75rem;
}

h2 {
    margin: .5rem 0;
}

h1, h2, header, 
.container, footer
{
    box-shadow: var(--boxShadow);
}

.nonflip-card {
    box-shadow: var(--boxShadowRev);
}

#social a img {
    width: 3rem;
    height: 3rem;
}

body {
    padding: 1rem;
}

h1, #copyright, #social,
footer p, footer span, footer img {
    background-color: var(--primary);
}

h1, h2, h3 {
    font-family: var(--headingFont);
    padding: .5rem;
}

h1 {
    font-size: 2.5rem;
    margin: .5rem 0;
    text-align: left;
}

.container p {
    color: var(--body-font);
    font-family: var(--bodyFont);
}

.about-p {
    border-top: var(--thinBorder);
    border-left: var(--thinBorder);
    margin-top: .3rem;
}

.card-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    overflow: hidden;
}

.nonflip-card {
    width: 100%;
    max-width: 19.4rem;
}

.card-img {
    width: 100%;
    height: auto;
    margin-top: .3rem;
}

.emp-info {
    padding: .3rem;
}

.container p, .disclaimer p {
    padding: .5rem;
}

#social, #copyright {
    padding-top: .6rem;
}

#copyright {
    padding-bottom: .6rem;
}

footer {
    margin-top: .6rem;
    font-size: .9rem;
    background-color: var(--primary);
}