@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500');
/* Raleway Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* Open Sans Font */
@font-face {
    font-family: 'Anurati';
    src: url('../fonts/Anurati-Regular.otf');
}

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;
}

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

h1 {
    margin-top: 0px;
    text-align: center;
}

h3 {
    color: rgba(52, 130, 174,0.75);
}

h3.important {
    color: rgb(3 154 199);
}

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