:root {
    --color-svg-primary: blue;
    --body-font-family: "Rubik", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
    --body-font-weight: 300;
    --body-font-color: #d6d4ff;
    --heading-font-family: "AvenirNextLTPro-Bold", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;
    --heading-font-weight: 500;
    --heading-font-color: #eae9ff;
    --subtitle-text: "HTML Rendering Engine for Games and Embedders";
    --theme-border-color: #241f39;
    --theme-background-color: #0a0b1c;
    --theme-menu-border-color: rgb(203 190 255 / 82%);
    --theme-footer-link-color: #8383a6;
    --theme-footer-link-highlight-color: hsl(246deg 100% 95.08% / 97%);
    --theme-mobile-nav-color: #d8cbff;
    --theme-menu-background: linear-gradient(180deg, hsl(255deg 40% 74% / 12%), hsl(255deg 29% 27% / 1%));
    --theme-menu-hover-background: linear-gradient(180deg, #b8a1ff21, #9875ff13);
    --theme-menu-shadow-color: #140e3563;
}


body {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    text-rendering: geometricPrecision;
    color: var(--body-font-color);
    background: var(--theme-background-color);
   /* background: radial-gradient(circle at center 280px, #33246f, transparent 900px), var(--theme-background-color);
    background-size: 100% 1250px;
    background-repeat: no-repeat;
    */
}

main {
    /*margin-top: 4.5em;*/
}

p.big {
    font-size: 1.7em !important;
    color: white;
    text-shadow: 0 0 4px rgb(255 255 255 / 64%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.button {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*text-shadow: 0 0 8px rgb(237 220 255 / 47%);*/
    color: var(--heading-font-color);
}


.row.feature h2 {
    font-weight: var(--heading-font-weight);
    color: var(--heading-font-color);
    /* background: linear-gradient(178deg, #e4b0ff, #a079fc ,#8c7bff 65%,#90bcff 100%); */
    /* background: var(--heading-font-color); */
    font-size: 2em;
    /* -webkit-text-fill-color: transparent; */
    /* -webkit-background-clip: text; */
    text-shadow: none;
}

.row.feature p {
    color: hsl(247deg 41.4% 85.22%);
    font-size: 1.4em;
}

.row.feature p a {
    color: hsl(247deg 41.4% 85.22%);
}

#platform-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}



#platform-grid div {
    width: 100px;
    height: 100px;
    max-width: 300px;
    margin: 1em;
    padding: 1em;
    border-radius: 0.8em; 
    background: linear-gradient(0deg, #382475, #3824752e);
    ;
    background: linear-gradient(180deg, rgb(34 7 77 / 29%) 0%, rgb(37 32 67) 100%), radial-gradient(circle at center 280px, #33246f, transparent 900px);
    background: radial-gradient(circle at center 433px, #33246f82, transparent 900px);
    background: radial-gradient(circle at center -209px, #362a7bc2, transparent 457px);
    background: #33266f1f;
    background: radial-gradient(circle at center -209px, #362a7b82, transparent 457px);
    text-align: center;
    transition: box-shadow 0.2s;
    position: relative;

    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 0px 18px 5px #6f10ff1c, 0px 7px 20px #6f4dff29 inset;
}

#platform-grid div::before {
    content: "";
    pointer-events: none;
    user-select: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    padding: 1.2px;
    background: linear-gradient(rgb(123 104 232), rgb(68 46 160));
    -webkit-mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
}

#platform-grid div p {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
}

#platform-grid div.standard p {
    background: radial-gradient(#b973f6,#606ef8 80%);
    background-position: 50% 100%;
    background-size: 220% 220%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#platform-grid div.html p {
    font-size:1.0;
}

#platform-grid div.css p {
    font-size: 2.5em;
}

#platform-grid div.js p {
    font-size: 3.0em;
}

@media (min-width: 900px) {
    #platform-grid {
        margin-top: -3em;
    }
}
@media (max-width: 890px) {
    #platform-grid div {
        width: 70px;
        height: 70px;
        max-width: 300px;
        margin: 0.5em;
        padding: 1em;
    }
}

i.icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(3deg, #4923c6, #8570ff);
    background: linear-gradient(360deg, #7b71e7, #d4ccff);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

i.icon.windows {
    -webkit-mask-image: url(../svg/platform-windows.svg);
    mask-image: url(../svg/platform-windows.svg);
}

i.icon.macos {
    width: 60px;
    height: 60px;
    -webkit-mask-image: url(../svg/platform-macos.svg);
    mask-image: url(../svg/platform-macos.svg);
}

i.icon.linux {
    width: 60px;
    height: 60px;
    -webkit-mask-image: url(../svg/platform-linux.svg);
    mask-image: url(../svg/platform-linux.svg);

}

i.icon.xbox {
    width: 60px;
    height: 60px;
    -webkit-mask-image: url(../svg/platform-xbox.svg);
    mask-image: url(../svg/platform-xbox.svg);
}

i.icon.playstation {
    width: 60px;
    height: 50px;
    -webkit-mask-image: url(../svg/platform-playstation.svg);
    mask-image: url(../svg/platform-playstation.svg);
}

i.icon.arm {
    width: 60px;
    height: 20px;
    -webkit-mask-image: url(../svg/platform-arm.svg);
    mask-image: url(../svg/platform-arm.svg);
}

#memoryUsage {
    margin-top: -2em;
}


.speed-of-light h2,
.speed-of-light h4 {
   /* text-shadow: 0 0 8px rgb(157 97 255);*/
}

.speed-of-light p.big {
    text-shadow: 0 0 8px rgb(157 97 255);
    color: #f6f2ff;
}

.speed-of-light p {
    color: #e4dbf3;
}

.container {
    max-width: 1120px;
}

.wrap-light {
    width: 100% !important;
    max-width: unset;
    background: radial-gradient(circle at 70% 0px, #2c2159, transparent 600px);
}

.wrap-light-right {
    width: 100% !important;
    max-width: unset;

}

.wrap-light-left {
    width: 100% !important;
    max-width: unset;

}

@media (min-width: 900px) {
    .wrap-light-right .column:first-child {
        margin-left: 4%;
        float: right;
    }

    .wrap-light-right .column:nth-child(2) {
        margin-left: 0;
    }
}

.use-cases-wrap {
    background: linear-gradient(180deg, #262633, #1e1e29);
    width: 100% !important;
    max-width: unset;
}

.highlight-wrap1 {
    background: #2c2159;
    width: 100% !important;
    max-width: unset;
}



.highlight-wrap3 {

    background: linear-gradient(180deg, #272738, #191927);
    width: 100% !important;
    max-width: unset;
}

p,
.subheading,
.download-link {
    color: #ffffffd4;
}

#navbar #home img {
    height: 30px;
    margin-top: -2px;
}

#navbar li a {
    color: #ffffffe3;
    transition: text-shadow 0.1s, color 0.1s;
}

#navbar li a:hover {
    color: white;
    text-shadow: 0px 0px 5px white !important;
    /*text-shadow: 0 0 4px rgba(100, 27, 255, 0.8);*/
}

.navbar-link svg {
    top: 0.2em;
    position: relative;
}

p {
    font-size: 1.1em;
}

.header {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 4em;
    font-size: 0.9em;
    clear: both;
}

.row {
    padding: 6em 0;
}

.row.top-nav {
    padding-top: 0em;
    padding-bottom: 0em;
    width: 90%;
    margin: 0 auto;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.container.top-nav {
    position: fixed;
    top: 0px;
    display: flex;
    flex-direction: column;
        -webkit-box-align: center;
    align-items: center;
    
    left: 0px;
    right: 0px;

    border-bottom: 1px solid var(--theme-border-color);
    z-index: 20;
    transition: background 400ms ease 0s;
    width: 100%;
    max-width: 100%;
    height: 4.5em;
}

.container.top-nav::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    backdrop-filter: blur(30px) saturate(120%);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    z-index: -1;
}

.row.hero {
    padding-top: 1em;
    padding-bottom: 0em;
}

.row.cta p {
    font-size: 1.5em;
    color: var(--heading-font-color);
}

.logo img {
    width: 320px;
}

a {
    color: #ffffffdd;
}

a:hover {
    color: #ffffff;
}

.faq a {
    text-shadow: 0 0 2px #ffffffaa;
}

.faq a:hover {
    text-shadow: 0 0 4px white;
}

.top-nav a {
    text-shadow: none;
}

.row.hero h1 {
    text-shadow: none;
    font-size: 2em;
    margin-top: -0.6em;
    line-height: 1;
    padding: 0.2em 0;
    letter-spacing: -0.015em;
    position: relative;
    /*width: 8em; */
    margin-left: auto;
    margin-right: auto;
    /*background: radial-gradient(#c788ff,#606ef8 80%);
    background-position: 50% 90%;
    background-size: 100% 200%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    */
    color: var(--heading-font-color);
    margin-bottom: 0.15em;
}

.row.hero h2 {
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    color: var(--body-font-color);
    font-size: 2em;
    line-height: 1.15em;
    text-rendering: geometricPrecision;
    /* color: #6c71f9; 
    color: #927bfc;
*/
    text-shadow: none;
}

.row.hero h2 span{
    color: #7b7afb;
}

.row.games, .row.desktop {
    padding: 7em 0;
}

.games-wrap {
    background: radial-gradient(circle at center -373px, #62ebc43d, #28255a2e 934px), var(--theme-background-color);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100% !important;
    max-width: unset;
    position: relative;
}

.games-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 722px;
    height: 0px;
    max-width: 950px;
    width: 80%;
    margin: 0 auto;
    height: 1px;
    clip-path: polygon(calc(0% - 50px) 0, calc(100% + 50px) 0, calc(100% + 50px) 500px, calc(0% - 50px) 500px);
    box-shadow: 0px 0px 50px 5px #35ffc9e0;
    background: #a5f5e178;
}

a.button svg {
    fill: #FFFFFFBB;
    transform: translate(0.15em, 0em) scale(1.2);
    transition: transform 0.3s;
}

a.button:hover svg {
    transform: translate(0.25em, 0em) scale(1.2);
}

.row.games a.button, .row.desktop a.button {
    margin-top: 0.8em;
    margin-left: 1em;
    padding: 1.25em 2em;
    /*height: 2.6em;*/
    font-size: 1.4em;
}

.row.games a.button {
    color: rgb(200 255 238 / 85%);
    border: 1px solid rgb(123 248 223 / 60%);
    background: #48ffda04;
    text-shadow: 0 0 3px rgb(40 132 118);
    box-shadow: 0 0 4px rgb(40 132 118), inset 0 0 4px rgb(40 132 118);
}

.row.games a.button:hover {
    color: rgb(192 253 233);
    border: 1px solid rgb(175 255 234 / 76%);
    background: #63ffdf0a;
}

.row.games h2, .row.games i {
        font-weight:500;
        color: #ece7ff;
        background: radial-gradient( rgb(224 255 231)10%, #06bc9882 100%);
        background-position: 75% 100%;
        background-size: 150% 140%;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        text-shadow: none;
}

.row.games i {
    background: radial-gradient(#94ffaf,#023356 80%);
    background: linear-gradient(3deg, #218474, #e0ffe9);
    /*background-position: 50% 90%;
    background-size: 220% 220%;
    */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    padding: 2px;
}

.row.games p {
    color: rgb(185 255 233 / 85%);
    font-size: 1.3em;
}

.row.games h1.icon {
    font-size: 120px;
    margin: 0 auto;
    width: 95%;
    height: 275px;
    max-width: 275px;
    padding: 0em;
    border-radius: 22px;
    background: #48ffda04;
    text-align: center;
    transition: box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 0px 18px 5px #67ffe612, inset 0px 7px 20px 5px #49fad50f;
}


.row.games h1.icon::before, .row.desktop h1.icon::before {
    content: "";
    pointer-events: none;
    user-select: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    padding: 2px;
}

.row.games h1.icon::before {
    background: linear-gradient(rgb(96 177 158 / 91%), rgb(29 111 117 / 78%));

    
    -webkit-mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
}

.row.desktop h1.icon::before {
    background: linear-gradient(hsl(254.63deg 100% 79.64% / 88%), hsl(252.55deg 41.46% 43.86%));
    -webkit-mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
}

.desktop-wrap {
    background: radial-gradient(circle at center -373px, hsl(258deg 100% 65% / 56%), hsl(258deg 93% 64% / 19%), #28255a2e 934px), #090714;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100% !important;
    max-width: unset;
    position: relative;
}

.desktop-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 722px;
    height: 0px;
    max-width: 950px;
    width: 80%;
    margin: 0 auto;
    height: 1px;
    clip-path: polygon(calc(0% - 50px) 0, calc(100% + 50px) 0, calc(100% + 50px) 500px, calc(0% - 50px) 500px);
    box-shadow: 0px 0px 50px 5px #a474f7;
    background: #c297ff9c;
}

.row.desktop a.button, .row.desktop a.button {
    margin-top: 0.8em;
    margin-left: 1em;
    padding: 1.25em 2em;
    /*height: 2.6em;*/
    font-size: 1.4em;
}

.row.desktop a.button {
    color: hsl(255.31deg 98.73% 87.58%);
    border: 1px solid hsl(256.97deg 91% 77.15% / 81%);
    background: hsl(255deg 100% 80% / 3%);
    text-shadow: 0 0 3px hsl(251 53% 34% / 1);
    box-shadow: 0 0 4px hsl(251 53% 34% / 1), inset 0 0 4px hsl(251 53% 34% / 1);
}

.row.desktop a.button:hover {
    color: hsl(254.2deg 100% 90.82%);
    border: 1px solid hsl(250.29deg 100% 85.6%);
    background: hsl(251.39deg 89.67% 74.08% / 8%);
}

.row.desktop h2, .row.desktop i {
        font-weight:500;
        color: #ece7ff;
        background: radial-gradient( hsl(261.83deg 100% 93.22%)10%, hsl(250deg 91.45% 63.16% / 85%) 100%);       
        background-position: 75% 100%;
        background-size: 150% 140%;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        text-shadow: none;
}

.row.desktop i {
    background: radial-gradient(#d7adff,#2f1b83 80%);
    background: linear-gradient(360deg, #765ad8, #dfc7ffed);
    /*background-position: 50% 90%;
    background-size: 220% 220%;*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 85%;
}

.row.desktop p {
    color: hsl(256.41deg 100% 82.28%);
    text-shadow: 0 0 2px #6b1dff;
    font-size: 1.3em;
}

.row.desktop h1.icon {
    font-size: 120px;
    margin: 0 auto;
    width: 95%;
    height: 275px;
    max-width: 275px;
    padding: 0em;
    border-radius: 22px;
    background:hsl(255deg 100% 80% / 3%);
    text-align: center;
    transition: box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0px 0px 18px 5px #a661ff21, inset 0px 7px 20px 5px #ab6ff921;
}

.highlight-wrap {
    background: radial-gradient(circle at center -373px, hsl(253.76deg 20.65% 59.95% / 22%), #28255a00 934px), var(--theme-background-color);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100% !important;
    max-width: unset;
    position: relative;
}

.highlight-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 722px;
    height: 0px;
    max-width: 950px;
    width: 80%;
    margin: 0 auto;
    height: 1px;
    clip-path: polygon(calc(0% - 50px) 0, calc(100% + 50px) 0, calc(100% + 50px) 500px, calc(0% - 50px) 500px);
    box-shadow: 0px 0px 50px 5px #af9efbba;
    background: #edeaff57;
}

.row.customers {
    text-align: center;
}

.row.customers .logos {
    padding-top: 2em;
}

.row.customers a.button {
    margin-top: 0.8em;
    margin-left: 1em;
    padding: 1.25em 2em;
    /*height: 2.6em;*/
    font-size: 1.5em;
}

.row.customers a.button {
    color: #f3efff;
    border: 1px solid #f3efff;
    background: transparent;
    text-shadow: 0 0 5px rgb(183 174 211 / 65%);
    box-shadow: 0 0 6px rgb(183 174 211 / 46%), inset 0 0 6px rgb(183 174 211 / 46%);
}

.row.customers h2, .row.cta h2, .row.highlight h2, .row.highlight h3, .row.customers i {
        font-weight:500;
        color: #ece7ff;
        font-size: 3.6em;
        background: radial-gradient( rgb(255 255 255)10%, #655bce82 100%);
        background-position: 75% 100%;
        background-size: 150% 140%;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        text-shadow: none;
}

.row.highlight h3 {
    font-size: 2.4em;
}

.row.customers i {
    background: radial-gradient(#d7adff,#22118f 80%);
    background-position: 50% 90%;
    background-size: 220% 220%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.row.customers p {
    color: rgb(200 178 255 / 96%);
    font-size: 1.3em;
}

.row.customers h1.icon {
    font-size: 100px;
    margin: 0 auto;
    width: 100px;
    height: 80px;
    max-width: 300px;
    padding: 1em;
    border-radius: 22px;
    background: #b076ff08;
    text-align: center;
    transition: box-shadow 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: center;
    overflow: hidden;
}



.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    border-radius: 0.8em;
    text-transform: none;
    letter-spacing: 0;
    line-height: 2.1em;
    /*height: 2.1em;*/
    padding: 1.25em 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #d9d3ff;
    border: 1px solid #ad9dff;
    background: rgb(133 97 255 / 4%);
    text-shadow: 0 0 3px rgb(155 131 245 / 0%);
    box-shadow: 0 0 4px rgb(160 134 255 / 30%), inset 0 0 4px rgb(155 131 245 / 40%);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
    color: white;
    border: 1px solid white;
    text-shadow: 0 0 3px rgb(193 177 255);
    box-shadow: 0 0 4px rgb(193 177 255), inset 0 0 4px rgb(193 177 255);
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary,
#navbar li a.highlight {
    background: linear-gradient(21deg, #405ce440, #582de138, #974ee34f) !important;
    color: #e9e2ff;
    border: 1px solid #d9c5ff69 !important;
    position: relative;
}

#navbar li a.navbar-link.button {
    margin-top: -0.4em;
    height: 2.3em;
    padding: 0.1em 1.2em;
    box-shadow: 0 0 2px rgb(155 131 245), inset 0 0 2px rgb(155 131 245);
    font-weight: normal;
}

#navbar li a.navbar-link.download {
    text-shadow: 0px 0px 5px #ffffff5e;
    font-weight: 400;
}

.button.button-primary::before,
button.button-primary::before,
input[type="submit"].button-primary::before,
input[type="reset"].button-primary::before,
input[type="button"].button-primary::before,
#navbar li a.highlight::before
{
    content: "";
    pointer-events: none;
    user-select: none;
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    padding: 1px;
    /*background: linear-gradient(21deg, rgb(118 155 255), rgb(136 102 253), rgb(214 145 255));
    */
    -webkit-mask: linear-gradient(black, black) content-box content-box, linear-gradient(black, black);
    -webkit-mask-composite: xor;
    
    background: none;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus,
#navbar li a.highlight:hover,
#navbar li a.highlight:focus {
    color: #FFF;
    background: linear-gradient(21deg, #629efe, #602fffd6, #b36aff) !important;
    border-color: white;
}

.button.button-primary:hover::before,
button.button-primary:hover::before,
input[type="submit"].button-primary:hover::before,
input[type="reset"].button-primary:hover::before,
input[type="button"].button-primary:hover::before,
.button.button-primary:focus::before,
button.button-primary:focus::before,
input[type="submit"].button-primary:focus::before,
input[type="reset"].button-primary:focus::before,
input[type="button"].button-primary:focus::before,
#navbar li a.highlight:hover::before,
#navbar li a.highlight:focus::before {
    background: linear-gradient(21deg, rgb(136 198 255), rgb(136 109 241 / 76%), rgb(224 161 255));
}


/*
.header .button-primary,
.hero .button-primary {
    font-size: 1.4em;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
    height: 2.3em;
    background: linear-gradient(33deg, #6a83ff, #582de1, #ae5fff);
    background-position: 50% 75%;
    background-size: 100% 200%;
    border:none;
    box-shadow:none;
    font-weight: 400;
}
*/


.header .download-link {
    text-decoration: none;
    font-size: 1.15em;
    color: #998ad6;
    transition: color 0.2s;
}

.header .download-link:hover {
    color: #ac9cee;
}

.logos {
    text-align: center;
    padding-bottom: 0;
}

.logos img {
    height: 100px;
    margin: 1em 2em;
}

.company {
    padding-top: 0;
}

.company p {
    font-size: 1.3em;
}

.company p {
    color: #d5c9ff;
}

.company p.big {
    color: white;
}

.speed-of-light {
    padding-top: 0em;
}

.speed-of-light p,
.ultra-light p,
.ultra-fast p {
    font-size: 1.1em;
}

.ultra-fast {
    padding: 2em 0;
}

.use-cases p {
    font-size: 1.1em;
}

.use-cases .button {
    margin-bottom: 2em;
    margin-top: 1em;
    font-size: 1.3em;
}

.use-cases a.button.button-primary {
    border: 1px solid #ffffffd4;
    box-shadow: 0 0 4px rgb(255 255 255 / 28%), inset 0 0 4px rgb(255 255 255 / 22%);
    color: #ffffffd4;
    text-shadow: none;
}

.use-cases a.button.button-primary:hover {
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 4px rgb(255 255 255 / 60%), inset 0 0 4px rgb(255 255 255 / 60%);
    color: #FFFFFF;
    text-shadow: none;
}

h4 i.fa {
    margin-left: 0.2em;
}

div.row.cta .button, div.row.cta .button.button-primary,
div.row.hero .button, div.row.hero .button.button-primary {
    /*height: 2.6em;*/
    padding: 1.25em 0;
    font-size: 1.5em;
    font-weight: 500;
    margin: 2em 0.5em;
    margin-bottom: 0;
    width: 40vw;
    max-width: 320px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffffff9c;
}

div.row.hero .button, div.row.hero .button.button-primary {
    border: 1px solid #8272ddad;
    background: hsl(250.8deg 100% 55.54% / 8%);
    box-shadow: none;
    box-shadow: 0 10px 40px 0px rgb(15 7 49 / 32%), inset 0 0 15px rgb(97 27 255 / 25%);
    color: #cdc6ff;
}

div.row.hero .button:hover {
    border: 1px solid #977cf5;
    background: hsl(255.72deg 95.34% 55.71% / 32%);
    color: white;
    box-shadow: 0 0 10px #5e31e8 inset;

    color: #faf9ff;
    background: #4b26c84f;
    border: 1px solid #a28ff9;
    text-shadow: 0 0 5px #602eff;
    box-shadow: 0 0 7px 0px rgb(101 49 255), inset 0 0 15px rgb(111 65 240 / 39%);
}

div.row.hero .button.button-primary:hover {
    box-shadow: 0 0 7px 0px rgb(104 38 255), 0 0 10px #eba4ff2b inset;
    border: 1px solid #b19eff;
}

div.row.cta .button, div.row.cta .button.button-primary {
    border: 1px solid #cec8ff7a;
    box-shadow: 0 10px 30px 0px rgb(8 8 23 / 57%), inset 0 0 9px rgb(193 181 255 / 14%);
    background: #948fff05;
    color: #c3c3e4;
}

div.row.cta .button:hover, div.row.cta .button.button-primary:hover {
    border: 1px solid #c7c0ff8c;
    box-shadow: none;
    background: #948fff0a;
    box-shadow: 0px 0px 10px #ffffff2e inset;
    color: #e6e6ff;
}


.footer {
    background: var(--theme-background-color);
    width: 100% !important;
    max-width: unset;
    color: white;
    border-top: 1px solid var(--theme-border-color);
}

.footer a#footer-logo {
    padding: 0;
}

.footer a#footer-logo img {
    width: 210px;
    margin:0;
    margin-top:0.1em;
}

.footer .row {
    margin: 0;
    padding-bottom: 0;
    padding-top: 3em;
}

.footer .footer-content {
    max-width: 976px;
    display: flex;
    padding: 5em 1em;
    padding-bottom: 8em;
    margin: 0px auto;
    justify-content: space-between;
    flex-direction: row;
}

.footer-content a {
    display: block;
    text-decoration: none;
    padding-bottom: 0.8em;
    font-size: 1em;
    line-height: 1.2;
    min-width: 0px;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    color: var(--theme-footer-link-color);
    transition: color 0.1s, text-shadow 0.1s;
}

.footer-content a:hover {
    color: var(--theme-footer-link-highlight-color);
    text-shadow: 0 0 3px #FFFFFF99;
}

.footer-content .title {
    display: inline-flex;
    white-space: nowrap;
    border-radius: 3px;
    margin-bottom: 4px;
    padding-top: 1px;
    padding-bottom: 0.8em;
    border-bottom: none;
    font-weight: 700;
}

.footer-content .tagline p {
    font-size: 1em;
    color: var(--theme-footer-link-color);
    margin-bottom: 1.1em;
}

.footer-content .column {
    margin-bottom: 0px;
    padding: 0px 10px;
    width: 25%;
}

.footer-content .flex-container {
    display: flex;
    flex-grow: 1;
}

.footer-content .branding {
    width: 240px;
}

.faq input[type='checkbox'] {
    display: none;
}

.faq .lbl-toggle {
    display: block;
    font-size: 1.1em;
    padding: 1rem;
    cursor: pointer;
    font-weight: 300;
    transition: all 0.25s ease-out;
    color: var(--heading-font-color);
}

.faq .lbl-toggle::before {
    content: ' ';
    display: inline-block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;

    vertical-align: middle;
    margin-right: 1em;
    transform: translateY(-2px);

    transition: transform .2s ease-out;
}

.faq p {
    font-size: 1.2em;
    color: var(--heading-font-color);
}

.faq .collapsible-content .content-inner {
    padding: 2em 3em;
    background: #ece6ff0a;
    /*border: 1px solid #cac0f933;
    border-radius: 25px;
    */
    border-radius: 15px;
    margin: 5px;
    margin-bottom: 2em;
    box-shadow: inset 0px 0px 9px 0px #bbbbff14;
    border: 1px solid #7972bb70;
}

.faq .collapsible-content .content-inner p:last-child {
    margin-bottom: 0;
}


.faq .collapsible-content {
    max-height: 0px;
    overflow: hidden;

    transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: 100vh;
}

.toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 900px) {
    .licensing .button {
        font-size: 1.3em;
    }

    .speed-of-light .column:first-child,
    .ultra-light .column:first-child,
    .ultra-fast .column:first-child {
        /*margin-top: 3em;*/
    }
}


@media (min-width: 900px) {
    .container {
        width: 90%;
    }

    .header {
        font-size: 1em;
    }

    .logo img {
        width: 380px;
        margin: 1em;
    }

    #navbar {
        display: block;
        height: 90px;
    }

    #navbar #home span {
        display: none;
    }

    #navbar ul {
        list-style-type: none;
        margin: 0.8em 0;
        padding: 0;
        overflow: hidden;
        float: left;
        font-size: 100%;
    }

    #navbar ul.download {
        float: right;
    }

    #navbar ul.logo {
        float: left;
    }

    #navbar ul.logo .navbar-link {
        font-weight: 600;
        font-size: 1.2em;
        margin-top: -0.15em;
    }


    #navbar li {
        float: left;
        padding: 0.5em 1.5em;
    }

    #navbar li a {
        display: block;
        text-decoration: none;
        border-radius: 2em;
        font-size: 1.0em;
        text-shadow: 1px 2px 3px #1b0c4685;
    }

    #navbar li a.highlight:hover {
        padding: 0.2em 1.0em;
    }

    #navbar li a.special {
        padding: 0.2em 1.4em;
        background: #6f00ff;
        color: white;
        transition: text-shadow 0.2s;
        background: linear-gradient(33deg, #6a83ff, #582de1, #ae5fff);
        background-position: 50% 75%;
        background-size: 100% 200%;
    }

    #navbar li a.special:hover {
        text-shadow: 0 0 4px #FFFFFFBB;
    }

    #navbar-spacer {
        clear: both;
    }

    
.dropdown {
    transition: all 0.2s ease-in-out;
}

.dropdown .menu {
    transition: all 0.15s ease-in-out;
    background: linear-gradient(180deg, #a184f71e, #32206902);
    background: var(--theme-menu-background);
    border: 1px solid #cfbbffac;
    border: 1px solid #c9bbff63;
    border:none;
    /* box-shadow: 0 0 14px rgba(118, 73, 255, 0.081); */
    border-radius: 10px;
    position: absolute;
    margin-left: -1.9em !important;
    margin-top: 0em;
    top: 2.5em;
    padding: 0;
    display: none;
    box-shadow: inset 0 0 2px var(--theme-menu-border-color), 0px 3px 16px var(--theme-menu-shadow-color);
}

.dropdown .menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px) saturate(130%);
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    z-index: -1;
}

.dropdown svg {
    transition: all 0.2s ease-in-out;
    transform: translateY(-1px);
}


@keyframes fade-in {
    from {
        opacity: 0.0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0.0;
    }

    to {
        opacity: 1;
    }
}

.dropdown.show .menu {
    display: block;

}

.dropdown.show .menu li {
    -webkit-animation: fade-in 0.1s;
    animation: fade-in 0.1s;
}

.dropdown.show svg {
    transform: translateY(1px);
}

.dropdown .menu li {
    float: none !important;
    text-align: left;
    min-width: 6em;
    padding: 0.4em 0.8em !important;
    margin: 0.2em 0.6em;
    border-radius: 5px;
}

.dropdown .menu li:first-of-type {
    margin-top: 0.6em;
}
.dropdown .menu li:last-of-type {
    margin-bottom: 0.6em;
}

.dropdown .menu a {
    transition: none;
    padding: 0.2em 1em !important;
    padding-right: 2.5em !important;
    border-radius: 0px !important;
}

.dropdown .menu li:hover {
    box-shadow: inset 0 0px 2px rgb(195 181 255 / 38%), 0px 3px 3px #0000001f;
    background: var(--theme-menu-hover-background);
    color: white !important;
    text-shadow: 0px 0px 5px white !important;
}

.dropdown .menu li:hover a {
    text-shadow: 0px 0px 5px white !important;
}

    #html-illustration {
        margin-top: -3em;
    }

    .faq .lbl-toggle {
        font-size: 1.4em;
    }

    .speed-of-light p,
    .ultra-light p,
    .ultra-fast p {
        font-size: 1.2em;
        max-width: 500px;
    }

    .row.feature {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .use-cases p {
        font-size: 1.2em;
        max-width: 500px;
    }

    .row.faq {
        padding-left: 5em;
        padding-right: 5em;
    }

    .licensing .value.free,
    .licensing .value.custom {
        /*margin-top: 2em;*/
    }

    .licensing .column {
        width: 32%;
        margin-left: 2%;
    }
}

#mobile-menu, #mobile-logo {
    display: none;
}

.value {
    /* text-align: center; */
}


@media (max-width: 899px) {
    div.container.top-nav {

    }
    #mobile-logo {
        display: block;
        position: absolute;
        left: 27px;
        top: 16px;
    }
    #mobile-logo img {
        height: 30px;
    }
    #mobile-menu {
        display: block;
    }

    .footer .footer-content {
        padding: 3em 1em;
        padding-bottom: 5em;
    }


    input[type="checkbox"]:checked ~ #sidebarMenu {
        transform: translateX(0);
    }
    
    input[type=checkbox] {
        transition: all 0.3s;
        box-sizing: border-box;
        display: none;
    }
    .sidebarIconToggle {
        transition: all 0.3s;
        box-sizing: border-box;
        cursor: pointer;
  
        z-index: 99;
        height: 100%;
        width: 100%;
        top: 22px;
        left: 15px;
        height: 28px;
        width: 28px;

        margin-bottom: 0.5em;
    }
    .spinner {
        transition: all 0.3s;
        box-sizing: border-box;
        position: absolute;
        height: 3px;
        width: 100%;
        background-color: var(--theme-mobile-nav-color);
    }
    .horizontal {
        transition: all 0.3s;
        box-sizing: border-box;
        position: relative;
        float: left;
        margin-top: 5px;
    }
    .diagonal.part-1 {
        position: relative;
        transition: all 0.3s;
        box-sizing: border-box;
        float: left;
        margin-top: 4px;
    }
    .diagonal.part-2 {
        transition: all 0.3s;
        box-sizing: border-box;
        position: relative;
        float: left;
        margin-top: 5px;
    }
    input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
        transition: all 0.3s;
        box-sizing: border-box;
        opacity: 0;
    }
    input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
        transition: all 0.3s;
        box-sizing: border-box;
        transform: rotate(135deg);
        margin-top: 11px;
    }
    input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
        transition: all 0.3s;
        box-sizing: border-box;
        transform: rotate(-135deg);
        margin-top: -11px;
    }








    body {
        background: radial-gradient(circle at center 280px, #33246f, transparent 900px), #13121d;
    }

    .container {
        padding: 0 1em;
    }

    p.big {
        font-size: 1.4em !important;
    }

    .company p {
        font-size: 1.1em;
    }

    .logos img {
        height: 80px;
        margin: 0.5em;
    }

    #mobile-menu a {
        float: right;
        font-size: 2em;
        color: #eee8ff;
        text-shadow: 0 0 4px rgb(105 38 255);
        margin-top: 0.5em;
        /*margin-right: 0.5em;*/
    }

    .logo img {
        width: 260px;
    }

    .logotype {
        font-size: 4.2em;
    }

    .subheading {
        font-size: 1.8em;
    }

    #navbar {
        display: none;
    }

    #navbar.show {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 1.5em;
    }

    .container.top-nav {
        height: auto;
    }

    .row.top-nav {
        margin-top: 0em;
        padding-top: 0em;
        -webkit-box-align: end;
        align-items: end;
    }

    #navbar .dropdown .navbar-link svg {
        transition: all 0.15s ease-in-out;
        transform: rotate(-90deg);
    }

    #navbar .dropdown.show .navbar-link svg {
        transition: all 0.15s ease-in-out;
        transform: rotate(0deg);
    }

    #navbar .dropdown ul.menu {
        display: none;
    }

    #navbar .dropdown.show ul.menu {
        display: block;
    }

    #navbar li {
        margin-bottom: 0;
    }

    #navbar li a {
        display: block;
        margin-bottom: 0.3em;
    }

    .row.ultra-portable {
        margin-bottom: 3em;
    }

    .row {
        padding: 2em 0;
    }

    .row.faq, .row.customers {
        padding: 6em 0;
    }

    .row.logos {
        padding-bottom: 0em;
    }

    .header {
        padding-top: 1em;
        margin-bottom: 3em;
    }

    .header .button-primary,
    .hero .button-primary {
        font-size: 1.8em;
    }

    #navbar ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clear: both;
        text-align: right;
        margin-right: 5px;
    }

    #navbar ul.navbar-list {
        margin-right: 0;
    }

    #navbar ul.current-version {
        padding-top: 1em;
    }

    #navbar ul li a {
        color: var(--theme-mobile-nav-color);
        font-size: 1.4em;
        text-decoration: none;
    }

    #navbar .dropdown svg {
        fill: var(--theme-mobile-nav-color);
    }

    #navbar ul li a.navbar-link {
        border: 1px solid var(--theme-mobile-nav-color);
        border-radius: 5px;
        padding: 0px 7px;
        padding-left: 0.5em;
    }

    #navbar li a.highlight {
        border: none;
        color: var(--theme-mobile-nav-color);
        font-size: 1.4em;
        text-shadow: none;
        box-shadow: none;
    }

    #navbar #home img {
        display: none;
    }

    div.row.cta .button, div.row.cta .button.button-primary, div.row.hero .button, div.row.hero .button.button-primary {
        width: 90vw;
        max-width: 360px;
    }

    .footer-content .column {
        width: 100%;
        padding-bottom: 1em;
    }

    .footer-content .flex-container {
        display: block;
        margin-left: 3em;
    }

    .footer-content .branding {
        width: 320px;
    }

    .footer-content .spacer {
        display: none;
    }

    .speed-of-light .column:first-child,
    .ultra-light .column:first-child,
    .ultra-fast .column:first-child {
        margin-bottom: 3em;
    }

    .header .download-link {
        font-size: 1.6em;
    }

    .hero h3 {
        font-size: 2.5rem;
    }

    .hero .row {
        padding: 15em 0;
    }

    .licensing .button {
        font-size: 1.2em;
    }

    .faq .lbl-toggle {
        font-size: 1.4em;
    }

    #htmlGraphic {
        max-width: 600px;
        margin: 0 auto;
        /*margin-top: 1.5em;*/
    }

    #rendererDiagram {
        max-width: 530px;
        margin: 0 auto;
    }

    .row.games, .row.desktop {
        padding: 6em 0;
    }

    .row.games h1.icon, .row.desktop h1.icon {
        height: 200px;
        max-width: 600px;
        margin-bottom: 0.6em;
    }

    .row.games a.button, .row.desktop a.button {
        margin-left: 0;
        width: 80vw;
    }
}

@media (max-width: 450px) {
    .row.games a.button, .row.desktop a.button {
        font-size: 1.3em;
        width: 100%;
    }

    .footer a#footer-logo img {
        width: 155px;
    }

    .faq .lbl-toggle {
        font-size: 1.1em;
    }

    div.row.cta .button, div.row.cta .button.button-primary, div.row.hero .button, div.row.hero .button.button-primary {
        width: 75vw;
        max-width: 360px;
    }
}