/****************
 Global Layout
****************/

body {
    display: flex;
    flex-direction: column;
    
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-default);
    font-size: var(--font-size-normal);
    color: rgb(var(--colour-primary));
    background-color: rgb(var(--colour-zeroest));
    
    &.theme-print {
        filter: grayscale(100%);
        --colour-zero: var(--colour-white);
        --colour-zeroest: var(--colour-white);
        --colour-full: var(--colour-black);
        --colour-fullest: var(--colour-black);
        & header {
            background-color: rgba(var(--colour-zeroest), 1);
        }
        & * {
            font-family: var(--font-family-print);
            animation: none !important;
            transition-duration: 0s;
            backdrop-filter: none;
        }
    }

    &.theme-dark {
        --colour-zero: var(--colour-black);
        /*--colour-zeroest: var(--colour-blackest);*/
        --colour-zeroest: var(--colour-primary-dark);
        --colour-primary: var(--colour-whitest);
        --colour-complement: var(--colour-primary-dark);
        --colour-fullest: var(--colour-whitest);
        --colour-full: var(--colour-white);
        --opacity-factor: 0.3;
        & img:not(.dark-immune) {
            filter: brightness(10%) invert(100%);
        }
    }

}

header, main, footer {
    padding: 0;
}

header {
    display: flex;
    position: sticky;
    top: 0px;
    z-index: 100;
    background-color: rgba(var(--colour-zeroest), 0.35);
    -webkit-backdrop-filter: blur(var(--blur-high));
    backdrop-filter: blur(var(--blur-high));
    box-shadow: 0 0 var(--blur-high) rgba(var(--colour-full), 0.1);
    padding: calc(2 * var(--element-spacing-unit)) ;
    
    & a {
        text-decoration: none;
    }

    & .beacon {
        flex-grow: 1;
        display: flex;
        align-items: center;
        & > * {
            transition-duration: var(--speed-fast);
            max-height: calc(1.5 * var(--font-size-huge));
            font-size: var(--font-size-huge);
            white-space: nowrap;
        }
        & img {
            margin-right: var(--element-spacing-unit);
        }

    }

    & .navbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0;
        padding: 0;
        
        & li {
            display: block;
            transition-duration: var(--speed-fast);
            margin: 0 calc(3 * var(--element-spacing-unit));
            padding: 0;
            box-sizing: border-box;

            &:hover, &:active, &:focus {
                margin: 0 calc(4 * var(--element-spacing-unit));
                transform: scale(1.1); 
                font-weight: 800;
            }
        }
    }

    @media (max-width: 800px) { 
        & .beacon {
            & * {
                max-height: calc(1.5 * var(--font-size-large));
                font-size: var(--font-size-large);
            }
        }
        & .navbar { 
            display: none !important;
        }
    }

    @media (max-height: 400px) {
        position: relative;
    }

}

main {

    flex-grow: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 90% 1fr;
    background-color: rgb(var(--colour-zeroest));

    & > * { grid-column: 2 / 3 }
    & > *.full-width { grid-column: 1 / 4 }

}

footer {

    display: grid;
    grid-template-columns: 1fr 57% 37% 1fr;
    height: var(--font-size-image);
    font-size: var(--font-size-small);
    color: rgb(var(--colour-whitest));
    background-color: rgb(var(--colour-primary-dark));
    margin-top: var(--font-size-gigantic);

    & .left {
        grid-column: 2 / 3;
        justify-self: start;
        align-self: center;
        & li { display: block; margin-top: calc(2 * var(--element-spacing-unit)); }
    }

    & .right {
        grid-column: 3 / 4;
        justify-self: end;
        align-self: center;
        & li { display: inline-block; }
    }

    & a { color: rgb(var(--colour-whitest)); }
    & li { text-decoration: none; list-style: none; margin: var(--element-spacing-unit); }
    & img { max-height: var(--font-size-xlarge); }

}



/****************
 Utility
****************/

section { padding: var(--font-size-gigantic) 0 0 0; }
/* @media (max-width: 800px), (max-height: 400px) { section { padding-top: 0; } } */
a { color: rgb(var(--colour-primary)); }
h1 { font-size: var(--font-size-huge); text-align:center; }
h2 { font-size: var(--font-size-xlarge); text-align:center; }
h3 { font-size: var(--font-size-large); }
ul {
    padding: var(--element-spacing-unit) 0; 
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}
p {
    font-size: var(--font-size-normal);
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    line-height: 130%;
}
img {
    max-width: 90vw;
}

.inline { display: inline-block; }
.nowrap { white-space: nowrap; }
.content-centre { text-align: center; margin: auto; }
.content-left { text-align: left; }
.padding-bottom-spacer { padding-bottom: var(--font-size-gigantic); }
@media (max-width: 800px) { & .mobile-disappears { display: none; } }

.gridbox { display: grid; grid-template-columns: 1fr repeat(6, 15%) 1fr; }
.gridbox > .grid-2-4  { grid-column: 2 / 4; } /* o X O O o */
.gridbox > .grid-4-6  { grid-column: 4 / 6; } /* o O X O o */
.gridbox > .grid-6-8  { grid-column: 6 / 8; } /* o O O X o */
.gridbox > .grid-2-6 { grid-column: 2 / 6; }  /* o X X O o */
.gridbox > .grid-4-8 { grid-column: 4 / 8; }  /* o O X X o */
.gridbox > .grid-2-5 { grid-column: 2 / 5; }  /* o  X O  o */
.gridbox > .grid-5-8 { grid-column: 5 / 8; }  /* o  O X  o */
.gridbox > .grid-align-self-centre { align-self: center; } 
.gridbox > .grid-row-1 { grid-row: 1 / 2; }
@media (max-width: 800px) { .gridbox > .collapses { grid-column: 2 / 8 } } /* Collapses to full span minus gutters on mobile */
    
.flexbox { display: flex; flex-wrap: wrap; gap: var(--element-gap-unit); margin: 0; padding: 0; position: relative; }
.flexbox.nogap { gap: 0; }
.flexbox-centre { justify-content: center; align-content: center; }
.flex-5 { flex: 0 1 calc(20% - var(--element-gap-unit)); }
.flex-4 { flex: 0 1 calc(25% - var(--element-gap-unit)); }
.flex-3 { flex: 0 1 calc(33% - var(--element-gap-unit)); }
.flex-2 { flex: 0 1 calc(50% - var(--element-gap-unit)); }
.flex-1 { flex: 0 1 calc(100% - var(--element-gap-unit)); }
.flex-075 { flex: 0 1 calc(75% - var(--element-gap-unit)); }
.flexbox .collapses { @media (max-width: 800px) { flex: 0 1 calc(100% - var(--element-gap-unit)); } } /* collapse to 1-col on mobile */

.height-400 { height: 400px; }
.width-100 { max-width: 100%; } /* use to 'unfix' things like images */
.vh-50 { min-height: 50vh; }
.vh-75 { min-height: 75vh; }

.max-image { max-width: var(--font-size-image); max-height: var(--font-size-image); }
.max-gigantic { max-width: var(--font-size-gigantic); max-height: var(--font-size-gigantic); }
.max-huge { max-width: var(--font-size-huge); max-height: var(--font-size-huge); }
.max-xlarge { max-width: var(--font-size-xlarge); max-height: var(--font-size-xlarge); }
.max-large { max-width: var(--font-size-large); max-height: var(--font-size-large); }
.max-normal { max-width: var(--font-size-normal); max-height: var(--font-size-normal); }
.max-small { max-width: var(--font-size-small); max-height: var(--font-size-small); }
.max-xsmall { max-width: var(--font-size-xsmall); max-height: var(--font-size-xsmall); }
.max-micro { max-width: var(--font-size-micro); max-height: var(--font-size-micro); }

.font-huge { font-size: var(--font-size-huge); }
.font-xlarge { font-size: var(--font-size-xlarge); }
.font-large { font-size: var(--font-size-large); }
.font-normal { font-size: var(--font-size-normal); }
.font-small { font-size: var(--font-size-small); }
.font-xsmall { font-size: var(--font-size-xsmall); }
.font-micro { font-size: var(--font-size-micro); }

.hidden { display: none; }
.handwritten { font-family: Virgil, Consolas, serif; }
.undecorate { list-style: none; text-decoration: none; }
.bleach { filter: brightness(0) invert(1); }
.opacity-80 { opacity: 0.8; }
.opacity-50 { opacity: 0.5; }
.opacity-20 { opacity: 0.2; }
.opacity-00 { opacity: 0.0; }
.char { filter: brightness(0); }

.shade-red-03 { background-color: rgba(var(--colour-pastel-red), 0.3); } 
.shade-orange-03 { background-color: rgba(var(--colour-pastel-orange), 0.3); } 
.shade-yellow-03 { background-color: rgba(var(--colour-pastel-yellow), 0.3); } 
.shade-green-03 { background-color: rgba(var(--colour-pastel-green), 0.3); } 
.shade-teal-03 { background-color: rgba(var(--colour-pastel-teal), 0.3); } 
.shade-blue-03 { background-color: rgba(var(--colour-pastel-blue), 0.3); } 
.shade-purple-03 { background-color: rgba(var(--colour-pastel-purple), 0.3); } 
.shade-mauve-03 { background-color: rgba(var(--colour-pastel-mauve), 0.3); } 
.shade-p005 { background-color: rgba(var(--colour-primary), 0.05); }
.shade-p010 { background-color: rgba(var(--colour-primary), 0.1); }
.shade-p020 { background-color: rgba(var(--colour-primary), 0.2); }
.shade-p030 { background-color: rgba(var(--colour-primary), 0.3); }
.shade-c010 { background-color: rgba(var(--colour-complement), 0.1); }

.preserved-default-font { font-family: var(--font-family-default) !important; }
.preserved-print-font { font-family: var(--font-family-print) !important; }
.preserved-casual-font { font-family: var(--font-family-casual) !important; }

.success-box { border: 1px solid navy; background: rgb(var(--colour-pastel-blue)) }
.failure-box { border: 1px solid darkred; background: rgb(var(--colour-pastel-red)) }

.spin-slow { animation: spin var(--speed-slow) linear infinite; display: inline-block; }
.wiggle { animation: wiggle var(--speed-slow) linear infinite; }
.beat { animation: beat var(--speed-slow) linear infinite; }

html body .button { 
    display: inline-block;
    margin: var(--element-spacing-unit);
    padding: calc(3 * var(--element-spacing-unit)) calc(4 * var(--element-spacing-unit));
    border-radius: var(--element-radius);
    color: rgb(var(--colour-zeroest));
    background-color: rgb(var(--colour-primary));
    transition-duration: var(--speed-fast);
    text-decoration: none;
}

.scheme-white-on-dark {
    color: rgb(var(--colour-white));
    background-color: rgb(var(--colour-primary-dark));
}

.scheme-dark-on-light {
    color: rgb(var(--colour-primary-dark));
    background-color: rgb(var(--colour-primary-light));
}

.theme-default .dark-only, .theme-print .dark-only {
    display: none;
}

.theme-dark .nondark-only {
    display: none;
}



/****************
 Utility: Pill & Pop & Proud
****************
- 'pill' turns its element into a self-contained visual 'pill' container:
    - Images are capped, borders are rounded, margins added
    - List styles and text decorations are removed, and cursor is made into a pointer
- When hovering over an element that has 'pop':
    - The hovered element will scale up slightly
    - Its sibling (i.e. same direct shared parent) 'pop' elements will lose opacity
- 'proud' will add a drop shadow so it sits out
*/

.pill {

    list-style: none; 
    text-decoration: none;
    vertical-align: middle;
    border-radius: var(--element-radius);
    transition-duration: var(--speed-fast);
    cursor: pointer;

    margin: var(--element-spacing-unit);
    padding: var(--element-spacing-unit) calc(2 * var(--element-spacing-unit));

    & img { height: var(--font-size-normal); }
    & a { text-decoration: none; }
    @media(max-width: 800px) { font-size: var(--font-size-small); }

}

.proud {
    box-shadow: 0 0 var(--blur-high) rgba(var(--colour-full), 0.1);
}

.pop {
    transition-duration: var(--speed-fast);
}
.pop.pop.pop:hover, .pop.pop.pop:active, .pop.pop.pop:focus, .pop.pop.pop:focus-within {
    transform: scale(1.05);
    opacity: 1;
}
:has(.pop:hover), :has(.pop:active), :has(.pop:focus), :has(.pop:focus-within) {
    & > .pop {
        opacity: 0.6;
    }
}


/****************
 Utility: Read More
****************/
.read-more::after {
    display: block;
    position: absolute;
    content: "...";
    font-size: var(--font-size-normal);
    opacity: 0.5;
    bottom: calc(0% + var(--element-spacing-unit));
    right: calc(0% + 2 * var(--element-spacing-unit));
}


/****************
 Utility: Radio Groups
****************/
.radio-group {
    display: flex;
    position: relative;
    align-items: center;
    white-space: nowrap;

    & label {
        text-align: center;
        border-radius: 0;
        margin: auto;
        padding: calc(0.5 * var(--element-spacing-unit)); 
        width: auto;
        height: var(--font-size-large);
        width: var(--font-size-large);
        font-size: var(--font-size-small);   
    }
    & input { display: none; }
    & > label:hover, label:active, label:focus, label:has(input:checked) {
        border-bottom: 2px solid rgb(var(--colour-primary));
    }
}



/****************
 Utility: Cards
*****************
Cards are bordered rectangles with h3 title and an img that animates into a p on hover.
On desktop the elements are vertically stacked and the cards are flexboxed
On Mobile the elements are h3 is on the left and the img/p is on the right and the cards are single col
They should be wrapped in a .flexbox
*/ 
.card {
    /* add .flex-# class to cards to control number of items */
    display: flex;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    transition-duration: var(--speed-medium);
    border-radius: var(--element-radius);

    @media (max-width: 800px) { /* Collapse to single column on mobile irrespective of .flex-# */
        flex: 0 1 calc(100% - calc(2 * var(--element-gap-unit)));
    }

    & > * {

        position: relative;
        display: grid;
        grid-template-rows: 1fr 2fr;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        width: 100%;
        border-radius: var(--element-radius);
        padding: calc(2 * var(--element-spacing-unit));
        box-shadow: 0 0 var(--blur-high) rgba(var(--colour-full), 0.1);
        text-decoration: none;
        
        & * {
            transition-duration: var(--speed-medium);
            grid-column: 1 / 2;
            align-self: center;
            justify-self: center;
            margin: var(--element-spacing-unit);
        }
        & h3 {
            grid-row: 1 / 2;
        }
        & img {
            grid-row: 2 / 3;
            height: var(--font-size-image);
            max-width: 100%;
        }
        & p {
            grid-row: 2 / 3;
            filter: blur(var(--blur-extreme)) opacity(0);
            z-index: 2; 
        }
    }

    @media (max-width: 800px) { 
        & > * {
            grid-template-rows: 1fr;
            grid-template-columns: 1fr 1fr;
            & h3 { grid-row: 1 / 2; grid-column: 1 / 2; }
            & img, p { grid-row: 1 / 2; grid-column: 2 / 3; }
        }
    }

    &:hover, &:active, &:focus, &:focus-within {
        transform: scale(1.1);
        & > * {
            & img { filter: blur(var(--blur-extreme)) opacity(0.1); }
            & p { display: block; filter: blur(0) opacity(1); }
        }
    }

}

/*body:has(#theme-dark:checked) {*/
.theme-dark {
    & .card:hover, & .card:active, & .card:focus, & .card:focus-within {
        > * img:not(.dark-immune) {
            filter: brightness(10%) invert(100%) blur(var(--blur-extreme)) opacity(0.1);
        }
    }
}


/****************
 Utility: Tiles
*****************
Tiles are borderless rectangles with veritcally stacked img, then h3 title, then p.
On desktop they are flexboxed according to the .flex-# and on mobile they are single col.
They should be wrapped in a .flexbox
*/
.tile {
    /* add 'flex-#' class to tile elements control number of items */
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: var(--font-size-image) var(--font-size-gigantic) 1fr;
    /*gap: var(--font-size-small);*/
    box-sizing: border-box;
    transition-duration: var(--speed-medium);
    padding: calc(3 * var(--element-spacing-unit));

    & * {
        align-self: center;
        justify-self: center;
        grid-column: 1 / 2;
        margin: var(--element-spacing-unit);
    }
    & img {
        height: var(--font-size-image);
        max-width: 100%;
    }
    & p {
        justify-self: start;
        align-self: start;
    }
    
    @media (max-width: 800px) { /* Collapse to single column on mobile irrespective of .flex-# */
        flex: 0 1 calc(100% - var(--element-gap-unit));
    }

}



/****************
 Utility: Forms
****************/

form {
    padding: var(--element-gap-unit);
    border-radius: var(--element-radius);
    background-color: rgba(var(--colour-primary), 0.1);
    box-shadow: 0 0 var(--blur-high) rgba(var(--colour-full), 0.1);
    max-width: 800px;
    margin: var(--element-gap-unit) auto;
    & * {
        font-family: var(--font-family-default);
        font-size: var(--font-size-normal);
    }
}

label, input, textarea, form button.button {
    display: block;
    width: calc(100% - 2 * var(--element-gap-unit));
    margin: calc(2 * var(--element-spacing-unit));
    padding: calc(2 * var(--element-spacing-unit));
    border: none;
    border-radius: var(--element-radius);
    box-sizing: border-box;
}

input, textarea {
    margin-bottom: var(--element-gap-unit);
}

textarea {
    min-height: 150px;
    overflow: auto;
    resize: vertical;
}

textarea:invalid:not(:placeholder-shown):not(:focus-within),
input:invalid:not(:placeholder-shown):not(:focus-within) {
    background-color: rgb(var(--colour-pastel-red));
}

form:has(*:invalid) button {
    opacity: 0.25;
    pointer-events: none;
}

.form-message {
    margin: var(--element-gap-unit) auto;
    max-width: 800px;
    padding: var(--element-gap-unit);
    text-align: center;
    border-radius: var(--element-radius);
    display: none;
}



/****************
 Utility: Simple Hero content
****************/

.simple-hero {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    & * {
        max-height: var(--font-size-image);
    }
}


/****************
 Named: Differentiators
****************/
#doggo-deal {
    animation: wiggle var(--speed-slow) linear infinite;
}


/****************
 Named: Theme Accessibility Popup
****************/
#theme-popup {
    
    display: block;
    position: absolute;
    top: 135%;
    right: 10%;
    z-index: 1000;
    text-align: right;

    font-size: var(--font-size-small);
    border-radius: var(--element-radius);
    padding: calc(2 * var(--element-spacing-unit)) calc(4 * var(--element-spacing-unit));
    background-color: rgba(var(--colour-zeroest), 0.8);
    -webkit-backdrop-filter: blur(var(--blur-high));
    backdrop-filter: blur(var(--blur-high));
    box-shadow: 0 0 var(--blur-high) rgba(var(--colour-full), 0.1);
    transition-duration: var(--speed-medium);
    
    display: none;
    
}


/****************
 Named: Intro Banner
****************/
#intro {
    background-image: linear-gradient(45deg, 
        rgba(var(--colour-pastel-blue), var(--opacity-factor)),
        rgba(var(--colour-pastel-teal), var(--opacity-factor)),
        rgba(var(--colour-pastel-orange), var(--opacity-factor)),
        rgba(var(--colour-pastel-mauve), var(--opacity-factor)),
        rgba(var(--colour-pastel-purple), var(--opacity-factor))
    );
    background-size: 400% 400%;
    animation: background-marquee-bounce var(--speed-background-slow) linear infinite;
}


/****************
 Named: Morph & Highlight
****************/

/* Baseline state of baseline text */
.untext-morph { 
    width: auto;
    filter: blur(0) opacity(1);
}
/* Morphed state of baseline text */
body:has(.capabilities .highlighter:hover) .untext-morph,
body:has(.capabilities .highlighter:active) .untext-morph,
body:has(.capabilities .highlighter:focus) .untext-morph,
body:has(.services .highlighter:hover) .untext-morph, 
body:has(.services .highlighter:active) .untext-morph,
body:has(.services .highlighter:focus) .untext-morph { 
    width: 0;
    overflow: hidden;
    filter: blur(var(--blur-extreme)) opacity(0);
    margin-left: var(--font-size-small);
}

/* Baseline state of morphing text  */
.text-morph {
    width: 0;
    overflow: hidden;
    filter: blur(var(--blur-extreme)) opacity(0);
}

/* Highlighter states  */
body:has(.services .workload-to-workflow:hover) .workload-to-workflow,
body:has(.services .workload-to-workflow:active) .workload-to-workflow,
body:has(.services .workload-to-workflow:focus) .workload-to-workflow,
body:has(.services .workload-to-workflow:focus-within) .workload-to-workflow {
    background-color: rgba(var(--colour-workload-to-workflow), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.services .knowledge-to-know-how:hover) .knowledge-to-know-how,
body:has(.services .knowledge-to-know-how:active) .knowledge-to-know-how,
body:has(.services .knowledge-to-know-how:focus) .knowledge-to-know-how,
body:has(.services .knowledge-to-know-how:focus-within) .knowledge-to-know-how {
    background-color: rgba(var(--colour-knowledge-to-know-how), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.services .inkling-to-insight:hover) .inkling-to-insight,
body:has(.services .inkling-to-insight:active) .inkling-to-insight,
body:has(.services .inkling-to-insight:focus) .inkling-to-insight,
body:has(.services .inkling-to-insight:focus-within) .inkling-to-insight {
    background-color: rgba(var(--colour-inkling-to-insight), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.capabilities .digital-operations:hover) .digital-operations,
body:has(.capabilities .digital-operations:active) .digital-operations,
body:has(.capabilities .digital-operations:focus) .digital-operations,
body:has(.capabilities .digital-operations:focus-within) .digital-operations {
    background-color: rgba(var(--colour-digital-operations), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.capabilities .data-analytics:hover) .data-analytics,
body:has(.capabilities .data-analytics:active) .data-analytics,
body:has(.capabilities .data-analytics:focus) .data-analytics,
body:has(.capabilities .data-analytics:focus-within) .data-analytics {
    background-color: rgba(var(--colour-data-analytics), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.capabilities .knowledge-management:hover) .knowledge-management,
body:has(.capabilities .knowledge-management:active) .knowledge-management,
body:has(.capabilities .knowledge-management:focus) .knowledge-management,
body:has(.capabilities .knowledge-management:focus-within) .knowledge-management {
    background-color: rgba(var(--colour-knowledge-management), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.capabilities .presentation-design:hover) .presentation-design,
body:has(.capabilities .presentation-design:active) .presentation-design,
body:has(.capabilities .presentation-design:focus) .presentation-design,
body:has(.capabilities .presentation-design:focus-within) .presentation-design {
    background-color: rgba(var(--colour-presentation-design), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}

body:has(.capabilities .technical-facilitation:hover) .technical-facilitation,
body:has(.capabilities .technical-facilitation:active) .technical-facilitation,
body:has(.capabilities .technical-facilitation:focus) .technical-facilitation,
body:has(.capabilities .technical-facilitation:focus-within) .technical-facilitation {
    background-color: rgba(var(--colour-technical-facilitation), 0.6);
    &.text-morph { width: auto; filter: blur(0) opacity(1); }
}



/****************
 Keyframes
****************/

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes background-marquee-bounce {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes hue-spin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(359deg); }
}

@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    45%  { transform: rotate(0deg); }
    50%  { transform: rotate(3deg); }
    55%  { transform: rotate(-3deg); }
    60%  { transform: rotate(2deg); }
    65%  { transform: rotate(-2deg); }
    70%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@keyframes beat {
    0%   { transform: scale(1.00); }
    30%  { transform: scale(1.00); }
    38%  { transform: scale(1.12); }
    46%  { transform: scale(1.00); }
    54%  { transform: scale(1.10); }
    62%  { transform: scale(1.00); }
    100% { transform: scale(1.00); }
}