* {
    box-sizing: border-box;
}

p {
    line-height: 35px;
}

/* Grid */

.element-menubar        {   grid-area: menubar;     }
.element-content-one    {   grid-area: content-1;   }

.grid-container {
    display: grid;
    grid-template-areas:
    'menubar'
    'content-1';
}

.content-one-text-link {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.content-category {
    display: inline-flex;
    justify-content: center;
    border: 3px rgb(255, 85, 0, 0) solid;
}

.content-category:hover {
    border: 3px var(--orange) solid;
    transition: 2s;
}

.content-category:active {
    scale: 97%;
    opacity: 70%;
    transition: 0.2s;
}

.content-category p {
    line-height: 40px;
    text-decoration: underline 3px rgb(255, 85, 0, 0);
    color: var(--lightgrey);
    padding: 2px 8px;
}

@keyframes underline-timeout {
    from {text-decoration: underline 3px rgb(255, 85, 0, 0)}
    to  {text-decoration: underline 3px rgb(255, 85, 0, 0.8);}
}

.content-category:hover p {
    animation-name: underline-timeout;
    animation-delay: 1s;
    animation-duration: 3s;
    text-decoration: underline 3px var(--orange);
    transition: 0.4s;
}

.content-category p:active {
    transition: 0.2s;
}