.fill:hover, .fill:focus {
    box-shadow: inset 0 0 0 2em var(--hover);
}
.pulse:hover, .pulse:focus {
    animation: pulse 1s;
    box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--hover);
   }
}
.close:hover, .close:focus {
    box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}
.scrolled div ul .raise:hover, .scrolled div ul .raise:focus {
    box-shadow: 0 1.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
#active-page{
    box-shadow: 0 1.5em 0.5em -0.4em #77858c;
    transform: translateY(-0.25em);
}

.up:hover, .up:focus {
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
}
.slide:hover, .slide:focus {
    box-shadow: inset 6.5em 0 0 0 var(--hover);
}
.offset {
    box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover, .offset:focus {
    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}
.fill {
    --color: #363636;
    --hover: #BA882C;
}
.pulse {
    --color: #ef6eae;
    --hover: #ef8f6e;
}
.close {
    --color: #ff7f82;
    --hover: #ffdc7f;
}
.raise {
    --color: #363636;
    --hover: #BA882C;
}
.up {
    --color: #e4cb58;
    --hover: #94e458;
}
.slide {
    --color: #8fc866;
    --hover: #66c887;
}
.offset {
    --color: #19bc8b;
    --hover: #1973bc;
}
.page {
    color: var(--color);
    transition: 0.25s;
}
.page:hover, .page:focus {
    border-color: var(--hover);
    color: #fff;
}

.page{
    background: none;
    border-radius: 10px;
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 1em 2em;
}
h1 {
    font-weight: 400;
}
code {
    color: #e4cb58;
    font: inherit;
}