:root {
  --mycgm-theme-color-dark: #003366;
  --mycgm-theme-color-main: #0064a6;
  --mycgm-theme-color-action: #0074bc;
  --mycgm-theme-color-light: #0066cc;
  --mycgm-theme-color-text: #ffffff;
  --mycgm-theme-color-bg: #ffffff;
}

/*
    --clr-cgm-default: #0074bc;
    --clr-cgm-dark: #003366;
    --clr-cgm-main-menu: #0064a6;
    --clr-cgm-highlight: #99c7e4;
    --clr-cgm-selected-active: #d6e9f4;
    --clr-cgm-selected-inactive: #f4f4f4;

    --clr-mycgm-green-dark: #628013;
    --clr-mycgm-green-100: #94c11c;
    --clr-mycgm-green-70: #b4d360;
    --clr-mycgm-green-40: #d4e6a4;
    --clr-mycgm-green-10: #f4f9e8;

*/

/*** COMPONENTS ***/

/*** BACKGROUND ***/
#id-background-container {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 1;
  background: var(--mycgm-theme-color-main);
}

#id-background-gradient {
    --c1: var(--mycgm-theme-color-action);
    --c2: var(--mycgm-theme-color-main);
    --c3: var(--mycgm-theme-color-light);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: -1;
    background: linear-gradient(315deg, var(--c1) 3%, var(--c2) 38%, var(--c3) 68%, var(--c2) 98%);
    animation: background-gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

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


#id-background-image {
  position: fixed;
  z-index: -5;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url('background-mycgm.jpg');
}

#id-background-overlay {
  position: fixed;
  z-index: -4;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
/*  opacity: 1;*/
  background: var(--mycgm-theme-color-main);
}

#id-background-divider {
  position: fixed;
  z-index: -3;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  opacity: 0;
  background: conic-gradient(#ffffff, var(--mycgm-theme-color-main));
}

/*** ANIMATIONS ***/
/*** container ***/
#id-animation-container {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 1;
  background: var(--mycgm-theme-color-main);
}

/*** lines ***/
#id-animation-lines {
  position: relative;
  opacity: 0.4;
}

.animation-line {
  animation:slide 5s ease-in-out infinite alternate;
  background-image: linear-gradient(135deg, #ffffff00 50%, #ffffff 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.animation-line2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.animation-line3 {
  animation-duration:7s;
}

@keyframes slide {
  0% { transform: translateX(-25%); }
  100% { transform:translateX(25%); }
}

/*** waves (with gradient) ***/
#id-animation-waves {
    --c1: var(--mycgm-theme-color-action);
    --c2: var(--mycgm-theme-color-main);
    --c3: var(--mycgm-theme-color-light);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: -1;
    background: linear-gradient(315deg, var(--c1) 3%, var(--c2) 38%, var(--c3) 68%, var(--c2) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

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

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% { transform: translateX(1); }
    25% { transform: translateX(-25%); }
    50% { transform: translateX(-50%); }
    75% { transform: translateX(-25%); }
    100% { transform: translateX(1); }
}

/*** pattern 1 ***/
#id-animation-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: -1;

    --s: 100px; /* control the size */
    --c1: var(--mycgm-theme-color-main);
    --c2: var(--mycgm-theme-color-action);
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
    background:
      calc( .9*var(--s)) calc( .9*var(--s))/var(--_p),
      calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
      calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),
      calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
      conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0)
       0 0/var(--s) var(--s);
      animation: m 3s infinite;
}

@keyframes m {
  0% {
   background-position:
    calc( .9*var(--s)) calc( .9*var(--s)),
    calc(-.1*var(--s)) calc(-.1*var(--s)),
    calc( .7*var(--s)) calc( .7*var(--s)),
    calc(-.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  25% {
   background-position:
    calc(1.9*var(--s)) calc( .9*var(--s)),
    calc(-1.1*var(--s)) calc(-.1*var(--s)),
    calc(1.7*var(--s)) calc( .7*var(--s)),
    calc(-1.3*var(--s)) calc(-.3*var(--s)),0 0
  }
  50% {
   background-position:
    calc(1.9*var(--s)) calc(-.1*var(--s)),
    calc(-1.1*var(--s)) calc( .9*var(--s)),
    calc(1.7*var(--s)) calc(-.3*var(--s)),
    calc(-1.3*var(--s)) calc( .7*var(--s)),0 0
  }
  75% {
   background-position:
    calc(2.9*var(--s)) calc(-.1*var(--s)),
    calc(-2.1*var(--s)) calc( .9*var(--s)),
    calc(2.7*var(--s)) calc(-.3*var(--s)),
    calc(-2.3*var(--s)) calc( .7*var(--s)),0 0
  }
  100% {
   background-position:
    calc(2.9*var(--s)) calc(-1.1*var(--s)),
    calc(-2.1*var(--s)) calc(1.9*var(--s)),
    calc(2.7*var(--s)) calc(-1.3*var(--s)),
    calc(-2.3*var(--s)) calc(1.7*var(--s)),0 0
  }
}

/*** circles ***/
#id-animation-circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    z-index: -1;
}

.circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
    animation: float 3s ease-in-out infinite;
}

.circle1 {
/*    width: 100px;
    height: 100px;*/
    width: 40vmin;
    height: 40vmin;
    max-width: 400px;
    max-height: 400px;
/*    background: var(--mycgm-theme-color-main); */
    background: rgba(255, 255, 255, 0.15);
/*    top: 20%;
    left: 10%;*/
    top: 5%;
    left: 2% ;
/*    animation-delay: 0s;
    animation-duration: 8s;*/
    animation: float1 8s ease-in-out infinite;
}

.circle2 {
    width: 33vmin;
    height: 33vmin;
    max-width: 330px;
    max-height: 330px;
/*    background: var(--mycgm-theme-color-dark); */
    background: rgba(255, 255, 255, 0.2);
    top: 80%;
    right: 20%;
/*    animation-delay: -2s;
    animation-duration: 10s;*/
    animation: float2 10s ease-in-out infinite -2s;
}

.circle3 {
    width: 50vmin;
    height: 50vmin;
    max-width: 600px;
    max-height: 600px;
/*    background: var(--mycgm-theme-color-action); */
    background: rgba(255, 255, 255, 0.15);
    bottom: 2%;
    left: 10%;
/*    animation-delay: -1s;
    animation-duration: 7s;*/
    animation: float3 7s ease-in-out infinite -4s;
}

.circle4 {
    width: 60vmin;
    height: 60vmin;
    max-width: 670px;
    max-height: 670px;
/*    background: var(--mycgm-theme-color-light); */
    background: rgba(255, 255, 255, 0.1);
    top: 10%;
    right: 10%;
/*    animation-delay: -3s;
    animation-duration: 9s;*/
/*    animation: circularMotion 30s linear infinite;*/
    animation: float4 30s ease-in-out infinite -6s;
/*    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
}

.circle5 {
    width: 50vmin;
    height: 50vmin;
    max-width: 400px;
    max-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    top: 0%;
    right: 0%;
/*    animation-delay: -3s;
    animation-duration: 9s;*/
    animation: circularMotion 30s linear infinite;
/*    animation: float4 30s ease-in-out infinite -6s; */
/*    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg) };
    25% { transform: translateY(-20px) rotate(90deg) };
    50% { transform: translateY(-40px) rotate(180deg) };
    75% { transform: translateY(-20px) rotate(270deg) };
}

@keyframes float1 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(-30px, -20px) rotate(90deg) scale(1.1); }
    50% { transform: translate(40px, -35px) rotate(180deg) scale(0.9); }
    75% { transform: translate(-20px, 25px) rotate(270deg) scale(1.05); }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(35px, 30px) rotate(72deg); }
    40% { transform: translate(-25px, 45px) rotate(144deg); }
    60% { transform: translate(-40px, -20px) rotate(216deg); }
    80% { transform: translate(20px, -35px) rotate(288deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes float3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(25px, -30px) rotate(108deg); }
    60% { transform: translate(-35px, 20px) rotate(216deg); }
    90% { transform: translate(15px, 40px) rotate(324deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    12% { transform: translate(-10vw, 10vh) scale(1.2); }
    25% { transform: translate(10vw, -10vh) scale(1.4); }
    38% { transform: translate(-10vw, 25vh) scale(1.6); }
    50% { transform: translate(25vw, 15vh) scale(1.8); }
    62% { transform: translate(-30vw, -5vh) scale(1.6); }
    75% { transform: translate(5vw, 20vh) scale(1.4); }
    88% { transform: translate(-10vw, -10vh) scale(1.2); }
}

/* Alternative moving in circles */
@keyframes circularMotion {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30vw, 15vh) rotate(90deg); }
    50% { transform: translate(0, 30vh) rotate(180deg); }
    75% { transform: translate(-30vw, 15vh) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* Alternative pulsing animation */
.circle-pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 0.9;
    }
}

/*** container svg animations***/
#id-svg-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: -1;
}

#id-background-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: -1;
}

#id-background-svg-circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: -1;
}