.button {
    --shadow-normal: 0 0 2px #00001040;
    --shadow-hover: 0 0 3px #00001080;
    --shadow-active: 0 0 4px #00001090;
    --transition-time: 0.1s;
    display: inline;
}

a:link.button, a:visited.button {
    text-decoration: none;
    padding-top: 0.65rem;    
    padding-bottom: 0.6rem;
    padding-left: 1rem;    
    padding-right: 1rem;
    margin: 2px;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 5px;
}
a:link.button, a:visited.button {
    box-shadow: var(--shadow-normal);
    transition: var(--transition-time);
}
a:focus.button, a:hover.button {
    text-decoration: underline;
    box-shadow: var(--shadow-hover);
    transition: var(--transition-time);
}
a:active.button {
    box-shadow: var(--shadow-active);
    transition: var(--transition-time);
}

a:link.header-button, a:visited.header-button {
    background-color: var(--color-on-primary);
    color: var(--color-primary);
}


a:link.emphasized-button, a:visited.emphasized-button {
    background-image: linear-gradient( to top right, var(--color-primary), var(--color-primary-gradient-end) );
}

.buttons-section {
    max-width: 40rem;
    display: grid;
    text-align: center;
    padding: 0 1rem;
    margin: 0 auto;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

@media (max-width: 40rem) {
    .buttons-section {
        grid-auto-flow: row;
    }
}

nav.buttons-section {
    max-width: 60rem;
    padding-bottom: 1rem;
}