#headmenu {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
  --grey-color: #7f8c8d;
  --primary-color: #4EC0E9;
  --info-color: #5F9CEC;
  --success-color: #4ACFAE;
  --warning-color: #FFCE52;
  --danger-color: #ED5464; }
  #headmenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
  #headmenu a {
    text-decoration: none; }

:root {
  --grey-color:grey; }

.menu-hover-fill li {
  position: relative;
  text-align: left; }
  .menu-hover-fill li::before {
    position: absolute;
    content: "";
    top: 0;
    left: -1rem;
    width: 0.25rem;
    height: 100%;
    background: var(--menu-link-active-color);
    transition: 0.6s; }
  .menu-hover-fill li a {
    position: relative;
    background: linear-gradient(var(--menu-link-active-color) 0 100%) left/0 no-repeat;
    color: transparent;
    background-clip: text;
    z-index: 1;
    -webkit-background-clip: text;
    transition: background-size 0.45s 0.04s; }
    .menu-hover-fill li a::before {
      position: absolute;
      content: attr(data-text);
      z-index: -1;
      color: var(--grey-color); }
  .menu-hover-fill li:nth-child(1) {
    --menu-link-active-color: var(--primary-color); }
  .menu-hover-fill li:nth-child(2) {
    --menu-link-active-color: var(--info-color); }
  .menu-hover-fill li:nth-child(3) {
    --menu-link-active-color: var(--success-color); }
  .menu-hover-fill li:nth-child(4) {
    --menu-link-active-color: var(--warning-color); }
  .menu-hover-fill li:nth-child(5) {
    --menu-link-active-color: var(--danger-color); }
  .menu-hover-fill li:hover::before {
    left: calc(100% + 1rem); }
  .menu-hover-fill li:hover a {
    background-size: 100%; }

/*# sourceMappingURL=customheader.css.map */