/*
Theme Name: FE Ollie
Theme URI: https://olliewp.com
Description: A child theme for Ollie.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: fe-ollie
*/
html {
  scroll-behavior: smooth;
}
.wp-block-post-content > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh !important;
  scroll-behavior: smooth;
}
.fe {
  --fe-bg: #000;
  --fe-fg: #fff;
  --fe-diam: 4em;
  --fe-gap: calc(var(--fe-diam) * 0.083125);
  --fe-finger-height: var(--fe-gap);
  --fe-finger-width: calc(var(--fe-diam) * 0.25);
  --fe-knuckles-height: calc(var(--fe-diam) * 0.4165625);
  --fe-knuckles-width: var(--fe-gap);
  align-items: center;
  background-color: var(--fe-bg);
  border-radius: var(--fe-diam);
  display: flex;
  height: var(--fe-diam);
  justify-content: center;
  width: var(--fe-diam);
}
.fe-hand {
  animation: animateHand 0.75s ease forwards;
  animation-delay: 1s;
  display: flex;
  height: calc(var(--fe-knuckles-width) + var(--fe-gap) + var(--fe-finger-width));
  justify-content: space-between;
  position: relative;
  width: calc(var(--fe-knuckles-width) + var(--fe-gap) + var(--fe-finger-width));
}
.fe-knuckles {
  background-color: var(--fe-fg);
  height: calc(var(--fe-diam) * 0.4165625);
  width: calc(var(--fe-diam) * 0.083125);
}
.fe-fingers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--fe-knuckles-height);
  width: var(--fe-finger-width);
}
.fe-finger {
  --fe-width-start: 100%;
  --fe-width-end: 85%;
  animation: resizeFinger 0.75s ease forwards;
  animation-delay: 1s;
  background-color: var(--fe-fg);
  height: var(--fe-finger-height);
  width: var(--fe-width-start);
}
.mid {
  --fe-width-end: calc(var(--fe-diam) / 2.25);
}
@keyframes animateHand {
  0% {
    bottom: 0;
    transform: rotate(0deg);
  }
  100% {
    bottom: calc(var(--fe-diam) * -0.0625);
    transform: rotate(-90deg);
  }
}
@keyframes resizeFinger {
  0% {
    width: var(--fe-width-start);
  }
  100% {
    width: var(--fe-width-end);
  }
}