/* 
--------------------------------------------------------------------------------------------
--------------------------------------    JEO3.css  ----------------------------------------
--------------------------------------------------------------------------------------------
    Appearance: Preferred Colors
--------------------------------------------------------------------------------------------
*/

:root {
    /* JEO Preferred Styles */
    --jeo-primary: rgba(100, 124, 100, 1);
    --jeo-dark: color-mix(in srgb, var(--jeo-primary) 99%, white);
    --jeo-bright: oklch(from var(--jeo-primary) calc(l + 0.15) c h);
    --jeo-rz-5: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 5%, white) 10%, transparent);
    --jeo-rz-15: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 20%, transparent);
    --jeo-rz-25: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 50%, transparent);
    --jeo-rz-35: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 40%, transparent);
    --jeo-rz-45: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 50%, transparent);
    --jeo-rz-55: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 60%, transparent);
    --jeo-rz-65: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 70%, transparent);
    --jeo-rz-75: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 80%, transparent);
    --jeo-rz-85: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 90%, transparent);
    --jeo-rz-95: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 100%, transparent);
    --jeo-rz-dark-5: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 5%, black) 10%, transparent);
    --jeo-rz-dark-15: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 20%, transparent);
    --jeo-rz-dark-25: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 50%, transparent);
    --jeo-rz-dark-35: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 40%, transparent);
    --jeo-rz-dark-45: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 50%, transparent);
    --jeo-rz-dark-55: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 60%, transparent);
    --jeo-rz-dark-65: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 70%, transparent);
    --jeo-rz-dark-75: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 80%, transparent);
    --jeo-rz-dark-85: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 90%, transparent);
    --jeo-rz-dark-95: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 100%, transparent);
    /* -- */
    --jeo-gradient-primary-stop-1: rgba(90, 90, 90, 1);
    --jeo-gradient-primary-stop-2: rgba(90, 100, 90, 1);
    --jeo-gradient-primary-stop-3: rgba(90, 105, 90, 1);
    --jeo-gradient-primary-stop-4: rgba(90, 115, 90, 1);
    --jeo-gradient-primary-stop-5: rgba(90, 125, 90, 1);
    --jeo-gradient-primary-stop-6: rgba(100, 140, 100, 1);
    /* -- */
    --jeo-gradient-green-stop-1: rgba(0, 50, 00, 1);
    --jeo-gradient-green-stop-2: rgba(30, 75, 30, 1);
    --jeo-gradient-green-stop-3: rgba(4, 90, 40, 1);
    --jeo-gradient-green-stop-4: rgba(50, 105, 50, 1);
    --jeo-gradient-green-stop-5: rgba(60, 125, 60, 1);
    --jeo-gradient-green-stop-6: rgba(70, 140, 70, 1);
    /* -- */
    --jeo-gradient-blue-stop-1: rgba(0, 20, 101, 0.8);
    --jeo-gradient-blue-stop-2: rgba(0, 30, 150, 1);
    --jeo-gradient-blue-stop-3: rgba(0, 40, 202, 1);
    --jeo-gradient-blue-stop-4: rgba(10, 50, 240, 1);
    --jeo-gradient-blue-stop-5: rgba(20, 60, 255, 1);
    /* -- */
    --jeo-gradient-red-stop-1: rgba(100, 0, 0, 0.8);
    --jeo-gradient-red-stop-2: rgba(150, 0, 0, 1);
    --jeo-gradient-red-stop-3: rgba(220, 0, 0, 1);
    --jeo-gradient-red-stop-4: rgba(235, 0, 0, 1);
    --jeo-gradient-red-stop-5: rgba(250, 0, 0, 1);
    /* -- */
    --jeo-gradient-orange-stop-1: rgba(142, 74, 0, 0.8);
    --jeo-gradient-orange-stop-2: rgb(163, 85, 0, 0.8);
    --jeo-gradient-orange-stop-3: rgb(169, 88, 0, 0.8);
    --jeo-gradient-orange-stop-4: rgb(213, 111, 0, 0.8);
    --jeo-gradient-orange-stop-5: rgb(255, 133, 0, 0.9);
    --jeo-gradient-orange-stop-6: rgb(255, 133, 0, 1);
    /* -- */
    --jeo-gradient-silver-stop-1: rgba(255, 255, 255, 1);
    --jeo-gradient-silver-stop-2: rgba(235, 235, 235, 1);
    --jeo-gradient-silver-stop-3: rgba(215, 215, 215, 1);
    --jeo-gradient-silver-stop-4: rgba(205, 205, 205, 1);
    --jeo-gradient-silver-stop-5: rgba(184, 184, 184, 0.95);
    --jeo-gradient-silver-stop-6: rgba(174, 174, 174, 0.85);
    /* -- */
    --jeo-gradient-violet-stop-1: rgba(50, 0, 50, 0.8);
    --jeo-gradient-violet-stop-2: rgba(80, 0, 80, 0.8);
    --jeo-gradient-violet-stop-3: rgba(120, 0, 120, 0.8);
    --jeo-gradient-violet-stop-4: rgba(155, 0, 155, 0.8);
    --jeo-gradient-violet-stop-5: rgba(205, 0, 205, 0.9);
    --jeo-gradient-violet-stop-6: rgba(255, 0, 255, 1);
    /* -- */
    --jeo-gradient-black-stop-1: rgba(0, 0, 0, 0.8);
    --jeo-gradient-black-stop-2: rgba(25, 25, 25, 0.7);
    --jeo-gradient-black-stop-3: rgba(40, 40, 40, 0.7);
    --jeo-gradient-black-stop-4: rgba(55, 55, 55, 0.7);
    --jeo-gradient-black-stop-5: rgba(70, 70, 70, 0.7);
    --jeo-gradient-black-stop-6: rgba(85, 85, 85, 0.7);
    /* -- */
    --jeo-gradient-cornflowerblue-stop-1: rgba(0, 72, 207, .7);
    --jeo-gradient-cornflowerblue-stop-2: rgba(0, 72, 207, 1);
    --jeo-gradient-cornflowerblue-stop-3: rgba(9, 108, 222, 1);
    --jeo-gradient-cornflowerblue-stop-4: rgba(17, 143, 240, 1);
    --jeo-gradient-cornflowerblue-stop-5: rgba(27, 159, 247, 1);
    --jeo-gradient-cornflowerblue-stop-6: rgba(0, 187, 255, 1);
    /* -- */
    --jeo-gradient-pink-stop-1: rgba(186, 0, 158, 1);
    --jeo-gradient-pink-stop-2: rgba(219, 0, 216, 1);
    --jeo-gradient-pink-stop-3: rgba(224, 25, 255, 1);
    --jeo-gradient-pink-stop-4: rgba(255, 36, 251, 1);
    --jeo-gradient-pink-stop-5: rgba(255, 105, 245, 1);
    --jeo-gradient-pink-stop-6: rgba(255, 133, 233, 1);
    /* -- */
    --jeo-gradient-rz-stop-6: color-mix(in srgb, var(--rz-primary) 65%, black);
    --jeo-gradient-rz-stop-5: color-mix(in srgb, var(--rz-primary) 70%, black);
    --jeo-gradient-rz-stop-4: color-mix(in srgb, var(--rz-primary) 76%, black);
    --jeo-gradient-rz-stop-3: color-mix(in srgb, var(--rz-primary) 85%, black);
    --jeo-gradient-rz-stop-2: color-mix(in srgb, var(--rz-primary) 88%, black);
    --jeo-gradient-rz-stop-1: color-mix(in srgb, var(--rz-primary) 90%, black);
    --jeo-gradient-rz-light-stop-6: color-mix(in srgb, var(--rz-primary) 47%, darkslategray);
    --jeo-gradient-rz-light-stop-5: color-mix(in srgb, var(--rz-primary) 56%, darkslategray);
    --jeo-gradient-rz-light-stop-4: color-mix(in srgb, var(--rz-primary) 65%, darkslategray);
    --jeo-gradient-rz-light-stop-3: color-mix(in srgb, var(--rz-primary) 76%, darkslategray);
    --jeo-gradient-rz-light-stop-2: color-mix(in srgb, var(--rz-primary) 87%, darkslategray);
    --jeo-gradient-rz-light-stop-1: color-mix(in srgb, var(--rz-primary) 95%, darkslategray);
    /* -- */
    --jeo-gradient-rz-2-stop-6: color-mix(in srgb, var(--rz-primary) 90%, white);
    --jeo-gradient-rz-2-stop-5: color-mix(in srgb, var(--rz-primary) 92%, white);
    --jeo-gradient-rz-2-stop-4: color-mix(in srgb, var(--rz-primary) 92%, white);
    --jeo-gradient-rz-2-stop-3: color-mix(in srgb, var(--rz-primary) 94%, white);
    --jeo-gradient-rz-2-stop-2: color-mix(in srgb, var(--rz-primary) 96%, white);
    --jeo-gradient-rz-2-stop-1: color-mix(in srgb, var(--rz-primary) 99%, white);
    /* -- */
    --jeo-gradient-primary: linear-gradient(0deg, var(--jeo-gradient-primary-stop-1) 0%, var(--jeo-gradient-primary-stop-2) 25%, var(--jeo-gradient-primary-stop-3) 45%, var(--jeo-gradient-primary-stop-4) 65%, var(--jeo-gradient-primary-stop-5) 85%, var(--jeo-gradient-primary-stop-6) 100%);
    --jeo-gradient-green: linear-gradient(0deg, var(--jeo-gradient-green-stop-1) 0%, var(--jeo-gradient-green-stop-2) 25%, var(--jeo-gradient-green-stop-3) 45%, var(--jeo-gradient-green-stop-4) 65%, var(--jeo-gradient-green-stop-5) 85%, var(--jeo-gradient-green-stop-6) 100%);
    --jeo-gradient-blue: linear-gradient(0deg, var(--jeo-gradient-blue-stop-1) 0%, var(--jeo-gradient-blue-stop-2) 25%, var(--jeo-gradient-blue-stop-3) 50%, var(--jeo-gradient-blue-stop-4) 75%, var(--jeo-gradient-blue-stop-5) 100%);
    --jeo-gradient-red: linear-gradient(0deg, var(--jeo-gradient-red-stop-1) 0%, var(--jeo-gradient-red-stop-2) 25%, var(--jeo-gradient-red-stop-3) 50%, var(--jeo-gradient-red-stop-4) 75%, var(--jeo-gradient-red-stop-5) 100%);
    --jeo-gradient-orange: linear-gradient(0deg, var(--jeo-gradient-orange-stop-1) 0%, var(--jeo-gradient-orange-stop-2) 25%, var(--jeo-gradient-orange-stop-3) 45%, var(--jeo-gradient-orange-stop-4) 65%, var(--jeo-gradient-orange-stop-5) 85%, var(--jeo-gradient-orange-stop-6) 100%);
    --jeo-gradient-silver: linear-gradient(0deg, var(--jeo-gradient-silver-stop-1) 0%, var(--jeo-gradient-silver-stop-2) 20%, var(--jeo-gradient-silver-stop-3) 40%, var(--jeo-gradient-silver-stop-4) 60%, var(--jeo-gradient-silver-stop-5) 80%, var(--jeo-gradient-silver-stop-6) 100%);
    --jeo-gradient-violet: linear-gradient(0deg, var(--jeo-gradient-violet-stop-1) 0%, var(--jeo-gradient-violet-stop-2) 25%, var(--jeo-gradient-violet-stop-3) 45%, var(--jeo-gradient-violet-stop-4) 65%, var(--jeo-gradient-violet-stop-5) 85%, var(--jeo-gradient-violet-stop-6) 100%);
    --jeo-gradient-black: linear-gradient(0deg, var(--jeo-gradient-black-stop-1) 0%, var(--jeo-gradient-black-stop-2) 25%, var(--jeo-gradient-black-stop-3) 45%, var(--jeo-gradient-black-stop-4) 65%, var(--jeo-gradient-black-stop-5) 85%, var(--jeo-gradient-black-stop-6) 100%);
    --jeo-gradient-cornflowerblue: linear-gradient(0deg, var(--jeo-gradient-cornflowerblue-stop-1) 0%, var(--jeo-gradient-cornflowerblue-stop-2) 25%, var(--jeo-gradient-cornflowerblue-stop-3) 45%, var(--jeo-gradient-cornflowerblue-stop-4) 65%, var(--jeo-gradient-cornflowerblue-stop-5) 85%, var(--jeo-gradient-cornflowerblue-stop-6) 100%);
    --jeo-gradient-pink: linear-gradient(0deg, var(--jeo-gradient-pink-stop-1) 0%, var(--jeo-gradient-pink-stop-2) 25%, var(--jeo-gradient-pink-stop-3) 45%, var(--jeo-gradient-pink-stop-4) 65%, var(--jeo-gradient-pink-stop-5) 85%, var(--jeo-gradient-pink-stop-6) 100%);
    --jeo-gradient-rz: linear-gradient(0deg, var(--jeo-gradient-rz-stop-1) 0%, var(--jeo-gradient-rz-stop-2) 25%, var(--jeo-gradient-rz-stop-3) 45%, var(--jeo-gradient-rz-stop-4) 65%, var(--jeo-gradient-rz-stop-5) 85%, var(--jeo-gradient-rz-stop-6) 100%);
    --jeo-gradient-rz-light: linear-gradient(0deg, var(--jeo-gradient-rz-light-stop-1) 10%, var(--jeo-gradient-rz-light-stop-2) 25%, var(--jeo-gradient-rz-light-stop-3) 45%, var(--jeo-gradient-rz-light-stop-4) 65%, var(--jeo-gradient-rz-light-stop-5) 85%, var(--jeo-gradient-rz-light-stop-6) 90%);
    --jeo-gradient-rz-2: linear-gradient(0deg, var(--jeo-gradient-rz-2-stop-1) 0%, var(--jeo-gradient-rz-2-stop-2) 25%, var(--jeo-gradient-rz-2-stop-3) 45%, var(--jeo-gradient-rz-2-stop-4) 65%, var(--jeo-gradient-rz-2-stop-5) 85%, var(--jeo-gradient-rz-2-stop-6) 100%);
    /* ------- */
}

@keyframes horizontal-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes horizontal-shake-short {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-1px);
    }

    20% {
        transform: translateX(-2px);
    }

    30% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(-4px);
    }

    70% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes neon-rz {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.3);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(70, 220, 70, 1);
    }
}

@keyframes neon-rz-2 {
    from {
        box-shadow: inset 0px 0px 11px 11px var(--jeo-primary);
    }

    to {
        box-shadow: inset 0px 0px 1px 1px var(--rz-white);
    }
}

@keyframes neon-rz-3 {
    from {
        box-shadow: inset 0px 0px 15px 15px var(--jeo-rz-dark-55);
    }

    to {
        box-shadow: inset 0px 0px 15px 15px var(--jeo-rz-15);
    }
}

@keyframes neon1 {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.2), inset 0px 0px 0px 1px rgba(100, 164, 100, 0.2), inset 0px 0px 15px 3px rgba(100, 164, 100, 0.2), inset 0px 0px 15px 3px rgba(100, 164, 100, 0.2);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(0, 110, 250, 0.3);
    }
}

@keyframes neon2 {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.3), 0px 0px 2px 2px rgba(0, 139, 0, 0.3), 0px 0px 4px 4px rgba(0, 175, 0, 0.3);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(250, 0, 70, 1);
    }
}

@keyframes neon3 {
    from {
        box-shadow: 0px 0px 2px 2px rgba(100, 0, 0, 0.2), 0px 0px 4px 4px rgba(200, 0, 0, 0.2);
    }

    to {
        box-shadow: 0px 0px 2px 2px rgb(235, 50, 50, .2), 0px 0px 4px 4px rgb(235, 50, 50, .1);
    }
}
@keyframes pulseGlow {
  from {
    /* Subtle initial glow: X-offset, Y-offset, Blur-radius, Color */
    filter: drop-shadow(0 0 3px rgba(90, 255, 90, 0.3));
  }
  to {
    /* Intense expanded glow */
    filter: drop-shadow(0 0 12px rgba(50, 255, 50, .6));
  }
}
/*-----*/
.matrix-bg {
    background: #000;
    overflow: hidden;
    margin: 0;
    height: 150px;
}

.matrix-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    z-index: 2; /* Ensure it stays above the rain effect */
}

.matrix-text {
    color: #0f0;
    font-size: 35px;
    font-family: monospace;
    position: relative;
    text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
    z-index: 2; /* Ensure it stays above the rain effect */
}

    .matrix-text::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150px;
        animation: glitch 2s infinite;
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
        transform: translate(-2px, -2px);
        color: #0f0;
        text-shadow: 0 0 5px #0f0, 0 0 15px #0f0;
    }

.rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: repeating-linear-gradient( 0deg, rgba(0, 255, 0, 0.1) 0, rgba(0, 255, 0, 0.2) 2px, transparent 4px );
    animation: rain 10s linear infinite;
    z-index: 1; /* Place it behind the text */
}

/* Animation for the rain effect */
@keyframes rain {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* Glitch effect for the text */
@keyframes glitch {
    0%, 100% {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
        transform: translate(0);
    }

    33% {
        clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
        transform: translate(-5px, -5px);
    }

    66% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
        transform: translate(5px, 5px);
    }
}


@import url(https://fonts.googleapis.com/css?family=Concert+One);

h1 {
    animation: glow 10s ease-in-out infinite;
    /* For less laggy effect, uncomment this:
  
  animation:none;
  -webkit-text-stroke:1px #fff; 
  
=========== */
}


figure {
    width: 400px !important;
    height:55px;
    position:absolute;
    top:8px;
    right:225px;
    animation: wobble 5s ease-in-out infinite;
    transform-origin: center center;
    transform-style: preserve-3d;
}

@keyframes wobble {
    0%,100% {
        transform: rotate3d(1,1,0,9deg);
    }

    25% {
        transform: rotate3d(-1,1,0,9deg);
    }

    50% {
        transform: rotate3d(-1,-1,0,9deg);
    }

    75% {
        transform: rotate3d(1,-1,0,9deg);
    }
}

h1 {
    font-family: 'Lucida Console';
    font-weight: bold;
    font-size: 28pt;
    position: absolute;
    /*color: #0a0a0a;*/
    color: white !important;
    -webkit-text-stroke-color: black; /* Makes text inside clear */
    -webkit-text-fill-color:white;
    -webkit-text-stroke: .25px rgba(0,0,0,0,.86);
}

@keyframes glow {
    0%,100% {
        text-shadow: 0 0 170px rgba(0,0,0,.6);
    }

    50% {
        text-shadow: 0 0 170px rgba(0,0,0,.7);
    }
}

h1:nth-child(2) {
    transform: translateZ(5px);
}

h1:nth-child(3) {
    transform: translateZ(12px);
}

h1:nth-child(4) {
    transform: translateZ(19px);
}

h1:nth-child(5) {
    transform: translateZ(26px);
}

h1:nth-child(6) {
    transform: translateZ(32px);
}

h1:nth-child(7) {
    transform: translateZ(39px);
}

h1:nth-child(8) {
    transform: translateZ(46px);
}

h1:nth-child(9) {
    transform: translateZ(53px);
}

h1:nth-child(10) {
    transform: translateZ(60px);
}