/**
@copyright This file and all related to it has been developed by Complete IT Solutions
for your use with this application only.  If needed for other applications 
please contact us at 1(413)594-2391
@link www.c-itsolutions.com
*/
/* 
    Created on : Jan 19, 2026, 12:01:25 PM
    Author     : George Ducharme III<gducharme@c-itsolutions.com>
*/
:root {
  --black: #0f0f0f;
  --gray: #3f3f3f;
  --white: #fff;
  --top:var(--color-secondary-1-1);
  --bottom:var(--color-secondary-2-0);
  --border:var(--color-secondary-2-0);
}

.nav-wrap {
  border: 1px solid var(--border);
  width: fit-content;
  margin: 0 auto;
  border-radius: 500px;
  position: relative;
  box-shadow: inset 10px 0 10px var(--border);
  background: linear-gradient(0deg, var(--top), var(--bottom));
  &:after {
    content: "";
    display: block;
    position: absolute;
    inset: -5px;
    background: linear-gradient(180deg, var(--top), var(--bottom));
    border-radius: 500px;
    z-index: -1;
  }
}
.nav {
  width: fit-content;
  anchor-name: --nav;
  margin: 6.7px;
  a {
    z-index: 10;
    position: relative;
    display: inline-block;
    padding: 20px 50px;
    color: white;
    text-decoration: none;
    &:before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      opacity: 0.2;
    }
    &.active {
      anchor-name: --active;
      color: black;
    }
    &:hover:before {
      anchor-name: --nav;
    }
  }
}

.bubble {
  background: white;
  /* z-index: 5; */
  top: anchor(top);
  right: anchor(right);
  bottom: anchor(bottom);
  left: anchor(left);
  position: absolute;
  transition: all 0.2s;
  border-radius: 500px;
  &.active {
    position-anchor: --active;
    z-index: 2;
    background: linear-gradient(180deg, var(--top), var(--bottom));
    box-shadow: inset 0 2px 7px #fff;
  }
  &.hover {
    z-index: 1;
    background: linear-gradient(180deg, var(--top), var(--bottom));
    box-shadow: inset 0 2px 7px #ffffff29;
    position-anchor: --nav;
  }
}

.target {
  position: relative;
  z-index: -1;
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}