/* nav */

#sumner:hover,
#sumner:active {
    color: var(--defaultState);
    text-shadow: var(--js_tShadow);
    border-bottom: none;
    box-shadow: none;
    transform: translateY(-0.470703125rem);
}

/* main */

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--hero) center/cover no-repeat;
    background-blend-mode: screen;
    width: 100%;
    height: calc(100vh - 2.75rem);
}

.inner {
    padding: 10%;
}

.hero-txt {
    font-weight: var(--fw-blk);
}

.hero-txt:nth-child(1) {
    font-size: var(--fsz-hero__n1);
}

.hero-txt:nth-child(2) {
    font-size: var(--fsz-hero__n2);
}

h1, h2 {
    color: var(--defaultState);
    font-weight: var(--fw-blk);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 5%;
}

h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 5%;
}

.button {
    display: inline-block;
    padding: 2rem;
    text-decoration: none;
    vertical-align: middle;
    font-family: var(--ff-secondary);
    font-size: var(--fsz-btn);
    color: var(--defaultState);
    background: var(--imgButton);
}

.button:hover {
    color: var(--hoverState);
    background: var(--imgButton-hover);
}

.button:active {
    color: var(--text);
    background: var(--imgButton-active);
    mix-blend-mode: var(--mixBlend);
}