@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

html,
body {
    height: 100%;
    padding: 0;
    font-family: Open Sans, sans-serif;
    margin: 0px;
}

body {
    color: black;
}

/*         
        .backgradient {
            background: linear-gradient(132deg, #f2f4f5, #e5f5fa, 
            #dadcdf, #eef3f3, #dde1f0, #ecedf1, #f2f4f5);

            background-size: 1400% 1400%;

            -webkit-animation: DesignA11y 45s ease infinite;
            -moz-animation: DesignA11y 45s ease infinite;
            animation: DesignA11y 45s ease infinite;
        }

        @-webkit-keyframes DesignA11y {
            0%{background-position:0% 2%}
            50%{background-position:100% 99%}
            100%{background-position:0% 2%}
        }
        @-moz-keyframes DesignA11y {
            0%{background-position:0% 2%}
            50%{background-position:100% 99%}
            100%{background-position:0% 2%}
        }
        @keyframes DesignA11y {
            0%{background-position:0% 2%}
            50%{background-position:100% 99%}
            100%{background-position:0% 2%}
        } */



/* Tell the browser how to interpolate these variables */
@property --x1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18%;
}

@property --y1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 99%;
}

@property --x2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 97%;
}

@property --y2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%;
}

@property --x3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 79%;
}

@property --y3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%;
}

@property --x4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 96%;
}

@property --y4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 10%;
}

@property --x5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 42%;
}

@property --y5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
}

@property --x6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 4%;
}

@property --y6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49%;
}

@property --x7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 57%;
}

@property --y7 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 33%;
}

.backgradient {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    /* background:
        radial-gradient(at var(--x1) var(--y1), rgba(223, 229, 113, 0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x2) var(--y2), rgba(118, 249, 173, 0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x3) var(--y3), rgba(233, 109, 131, 0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x4) var(--y4), rgba(222, 81, 251,  0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x5) var(--y5), rgba(116, 240, 251, 0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x6) var(--y6), rgba(203, 88, 218,  0.5   ) 0px, transparent 50%),
        radial-gradient(at var(--x7) var(--y7), rgba(218, 83, 228,  0.5   ) 0px, transparent 50%); */
    background:
        radial-gradient(at var(--x1) var(--y1), rgb(145, 196, 218) 0px, transparent 50%),
        radial-gradient(at var(--x2) var(--y2), rgb(11, 156, 224) 0px, transparent 50%),
        radial-gradient(at var(--x3) var(--y3), rgb(123, 73, 241) 0px, transparent 50%),
        radial-gradient(at var(--x4) var(--y4), rgb(54, 63, 201) 0px, transparent 50%),
        radial-gradient(at var(--x5) var(--y5), rgb(49, 179, 190) 0px, transparent 50%),
        radial-gradient(at var(--x6) var(--y6), rgb(23, 157, 206) 0px, transparent 50%),
        radial-gradient(at var(--x7) var(--y7), rgb(34, 72, 129) 0px, transparent 50%);
    /* background:
        radial-gradient(at var(--x1) var(--y1), rgb(182, 185, 187) 0px, transparent 50%),
        radial-gradient(at var(--x2) var(--y2), rgb(232, 238, 245) 0px, transparent 50%),
        radial-gradient(at var(--x3) var(--y3), rgb(255, 255, 255) 0px, transparent 50%),
        radial-gradient(at var(--x4) var(--y4), rgb(242, 241, 245) 0px, transparent 50%),
        radial-gradient(at var(--x5) var(--y5), rgb(255, 255, 255) 0px, transparent 50%),
        radial-gradient(at var(--x6) var(--y6), rgb(169, 189, 196) 0px, transparent 50%),
        radial-gradient(at var(--x7) var(--y7), rgb(214, 217, 223) 0px, transparent 50%); */
    animation:
        move1 5s ease-in-out infinite alternate,
        move2 7s ease-in-out infinite alternate,
        move3 10s ease-in-out infinite alternate,
        move4 7s ease-in-out infinite alternate,
        move5 9s ease-in-out infinite alternate,
        move6 12s ease-in-out infinite alternate,
        move7 8s ease-in-out infinite alternate,
        disappear 3s normal forwards ease-in-out;
}

@keyframes disappear {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
    }
}

/* Smooth animations for each gradient position */
@keyframes move1 {
    to {
        --x1: 70%;
        --y1: 20%;
    }
}

@keyframes move2 {
    to {
        --x2: 40%;
        --y2: 80%;
    }
}

@keyframes move3 {
    to {
        --x3: 10%;
        --y3: 20%;
    }
}

@keyframes move4 {
    to {
        --x4: 20%;
        --y4: 90%;
    }
}

@keyframes move5 {
    to {
        --x5: 80%;
        --y5: 80%;
    }
}

@keyframes move6 {
    to {
        --x6: 60%;
        --y6: 5%;
    }
}

@keyframes move7 {
    to {
        --x7: 5%;
        --y7: 90%;
    }
}

.elite-ai-logo {
    width: 100%;
    max-width: 567px;
    text-align: center;
    display: block;
    margin: auto;
}

.visor-dynamics-logo {
    width: 100%;
    max-width: 567px;
    text-align: center;
    display: block;
    margin: auto;
    padding-top: 1em;
    padding-bottom: 3em;
}

.container-wrapper {
    margin: 15px;
    /* animation: blur-in 1s forwards ease-in-out; */
}
/* 
@keyframes blur-in {
    0% {
        opacity: 0;
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
} */

.container {
    width: 100%;
    margin: auto;
    max-width: 960px;
    text-align: justify;
    font-size: 1.2em;
}

@media (max-width: 960px) {
    .container {
        text-align: left;
    }
}

.video-block {
    width: 100%;             /* Match parent width */
    aspect-ratio: 16 / 9;    /* Keep proportional height */
    max-width: 960px;        /* Optional: cap at original size */
}

.figure-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-items: center;
    /* centers each item horizontally */
    align-items: center;
    /* vertically aligns items inside their grid cell */
}

.figure-comparison img {
    max-width: 100%;
    height: auto;
    display: block;
}

.figure-comparison .chatgpt {
    max-height: 300px;
}

.figure-comparison .elite-ai {
    max-height: 400px;
}

.figure-caption {
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 1em;
    margin-bottom: 2em;
    font-size: 0.9em;
}

a {
    color: rgb(3 154 199);
    text-decoration: none;
}

h1 {
    margin-top: 0px;
    text-align: center;
    font-weight: 300;
    font-size: 2.3em;
}

h3 {
    color: rgb(0 89 139);
    font-weight: 300;
    font-size: 1.5em;
    margin-block-end: 0em;
}

h3.important {
    color: rgb(3, 134, 173);
}

footer {
    letter-spacing: 0.2em;
    color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2em;
    text-align: center;
}