/* Regular Button */

.btn-regular {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    gap: var(--gap-xs);

    width: fit-content;
    padding: .5em 1.5em;
    border-radius: 1.25em;

    background-color: hsla(var(--c-text-h), var(--c-text-s), var(--c-text-l), .8);
    box-shadow: var(--shadow-elevation-medium);
    color: var(--c-background-darker);

    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;

    transition-property: transform, box-shadow, background-color;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(.4, 0, .25, 1);
}

.btn-regular:hover,
.btn-regular:focus {
    transform: scale(1.02);
    box-shadow: var(--shadow-elevation-high);
    color: var(--c-background-darker);

    background-color: hsla(var(--c-text-h), var(--c-text-s), var(--c-text-l), 1);
}

.btn-regular:focus {
    outline: 2px solid var(--c-highlight);
    outline-offset: 2px;
}

.btn-regular:active  {
    box-shadow: var(--shadow-elevation-medium);
    transform: scale(1);

    background-color: hsla(var(--c-text-h), var(--c-text-s), var(--c-text-l), .8);

    outline: none;

    transition: background-color 0.1s;
}

.pagelink {
    align-self: flex-end;
}


/* Animated arrow icon after button text */
.btn-regular svg {
    height: 1.5em;
    width: 1.5em;

    margin-right: -.5em;

    animation: btn-icon-slow 5s ease-in-out infinite alternate;
}

.btn-regular:hover svg,
.btn-regular:focus svg {
    animation: btn-icon-intense .5s ease-in-out infinite alternate;
}

@keyframes btn-icon-intense {
    0%  {transform: translateX(0);}
    100%{transform: translateX(5px);}
}

@keyframes btn-icon-slow {
    0%  {transform: translateX(0);}
    10% {transform: translateX(5px);}
    20% {transform: translateX(0);}
    100%{transform: translateX(0);}
}


/* Buttons for navigation elements */

.btn-nav {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0;

    width: 100%;
    overflow: hidden;
    z-index: 5;

    border-radius: var(--size-icons);
    gap: var(--gap-xs);

    /* Frosted glass background */
    background-color: var(--frosted-glass-background);
    background-blend-mode: var(--frosted-glass-blendmode);
    backdrop-filter: var(--frosted-glass-blur);
    -webkit-backdrop-filter: var(--frosted-glass-blur);
    border: var(--frosted-glass-border);
    box-shadow: var(--shadow-elevation-low);

    font-size: 1.5rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--c-text);

    transition: background-color .5s cubic-bezier(.4, 0, .25, 1),
    box-shadow .5s cubic-bezier(.4, 0, .25, 1),
    transform .5s cubic-bezier(.4, 0, .25, 1);
}

.btn-nav:hover,
.btn-nav:focus {
    color: var(--c-text);
    background-color: hsla(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) + 10%), .5);
    box-shadow: var(--shadow-elevation-medium);
    transform: scale(1.02);
}

.btn-nav:focus {
    outline: 2px solid var(--c-highlight);
    outline-offset: 2px;
}

.btn-nav:active {
    background-color: hsla(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) + 10%), .75);
    outline: none;
    transition: background-color 0.1s;
}

.btn-nav svg {
    width: var(--size-icons);
    min-width: var(--size-icons);
    margin: calc(var(--size-icons) / 2);
}