/* Global CSS variables */
html, body {
    height: 100%;
}

:root {
    --spacing-company: 3rem;
    --font-weight: 400;
    --border-radius: 0;
    --h1-color: #172240;
}

/* Typography */
h2,
h3,
hgroup > :last-child {
    font-weight: 200;
}

small {
    color: var(--muted-color);
}

/* Header */
.hero {
    margin: auto;
    background-color: #394046;
    background-image: url("default_bg.png");
    background-position: center;
    background-size: cover;
    height: 78%;
}

header {
    text-align: center;
    padding: var(--spacing-company) 0;
    margin-top: 15px;
}

header hgroup > :last-child {
    color: var(--h3-color);
}

/* Nav */
summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) {
    background-color: transparent;
    color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
    main .grid {
        grid-column-gap: var(--spacing-company);
        grid-template-columns: auto 25%;
    }
}

footer container {
    align: center;
    margin: 5px;
    
}

footer grid {
    align: center;
    text-align: center; 
}

.footer-link {
    text-align: center;
}