:root {
    --background: #F7FBFF;
    --foreground: white;
    --fierce-blue: #17317B;
    --bright-blue: #335BE4;

    --accent: var(--bright-blue);
    --alternate: var(--fierce-blue);
    --contrast: #07123B;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/Geist.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Cal Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/CalSans-SemiBold.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Mochiy Pop P One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/MochiyPopPOne-Regular.ttf");
}

body {
    font-family: 'Geist', sans-serif;
}

* {
    outline-color: color-mix(in srgb, var(--color-slate-400) 50%, transparent);
}

button.hero-primary {
    background: linear-gradient(180deg, #598A50 0%, #39742E 100%);
    border: 1px solid transparent;
}

button.primary {
    background: var(--accent);
    border: 1px solid transparent;
}

button.secondary {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
    border: 1px solid #E9E9E9;
    box-shadow: 0px 1px 5px rgba(229, 229, 229, 0.5);
}

header:before {
    content: "";
    background: rgba(196, 224, 255, 0.5) url("/images/bg-lights.svg");
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 70vh;
}

header > * {
    z-index: 1;
}

header nav a.link {
    color: var(--contrast);
    line-height: 1rem;
}

header nav a span {
    line-height: 1rem;
    font-size: 1rem;
    display: inline-block;
    vertical-align: top;
}

.heading {
    font-family: "Cal Sans", "Mochiy Pop P One";
}

@media only screen and (max-width : 768px) {
    .wrapper {
        max-width: 95vw;
    }
}

@media only screen and (min-width : 768px) {
    .wrapper {
        max-width: 736px;
    }
}

@media only screen and (min-width : 1024px) {
    .wrapper {
        max-width: 984px; 
    }
}

@media only screen and (min-width : 1440px) {
    .wrapper {
        max-width: 1000px; 
    }
}

@media only screen and (min-width : 1920px) {
    .wrapper {
        max-width: 1128px; 
    }
}

.demo {
    /* height: 65vh; */
    overflow: hidden;

    background: radial-gradient(172.87% 87.35% at 50% 53.41%, #B8E3FF 52.88%, #8BC1E5 71.63%);
    box-shadow: 0px 0px 0px 19px rgba(255, 255, 255, 0.25);
}

.demo > img {
    object-fit: contain;
    opacity: 50%;
}

.modal {
    background-color: #000000BB;
    backdrop-filter: contrast(0.4); 
}

.modal button {
    line-height: calc(1.25 / .875);
}

.modal > div {
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

input {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
    line-height: calc(1.25 / .875);
}

#step-1 {
    background: linear-gradient(313.33deg, rgba(226, 67, 54, 0) 50%, rgba(226, 67, 54, 0.2) 100%), #FFFFFF;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

#step-2 {
    background: linear-gradient(313.33deg, rgba(244, 205, 68, 0) 50%, rgba(244, 205, 68, 0.2) 96.39%), #FFFFFF;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

#step-3 {
    background: linear-gradient(313.33deg, rgba(46, 96, 165, 0) 50%, rgba(46, 96, 165, 0.2) 100%), #FFFFFF;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
}

footer div.decoration {
    background: url(/images/footer-pattern.svg) repeat-x;
    height: 61px;
}
footer div.content {
    background: #D4CCBB;
}

.api-key {
    font-family: monospace;
    overflow-x: scroll;
}

.info-card p {
    line-height: 1.6rem;
}

.extra-cta {
    background: linear-gradient(89.83deg, #0E2E68 0%, #001235 100%);
    box-shadow: 0px 0px 0px 2px #FAFDFE, 0px 0px 0px 4px #7c9dd96b;
}

.info-section {
    box-shadow: 0px 0px 0px 3px #FAFDFE, 0px 0px 0px 4px #7c9dd96b;
    background: radial-gradient(36.24% 212.64% at 50% 50%, rgba(234, 244, 255, 0.2) 0%, rgba(197, 225, 255, 0.2) 100%);
    color: var(--blue-2);
}

.info-section a {
    color: var(--blue-2);
}

.demo-option {
    width: fit-content;
}

.frosted {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 15.5px #BBCCF3, inset 0px 0px 4px 3px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4.6px);
}

.absolute-center {
  position: absolute;
  top: 50%; /* Move the top edge of the div to the vertical midpoint of the parent */
  left: 50%; /* Move the left edge of the div to the horizontal midpoint of the parent */
  transform: translate(-50%, -50%); /* Shift the element back up and left by half of *its own* width and height */
  /* Add other styles as needed (e.g., width, height, background-color) */
}

a.primary {
    --link: white;
    background: linear-gradient(180deg, #4694F4 0%, #3C75EF 100%);
    border: 1px solid #6094E3;
    box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.25);
}

a.secondary {
    --link: var(--contrast);
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FBFF 100%);
    border: 1px solid var(--blue-10);
    box-shadow: inset 0px -2px 0px 1px #F2F2F2;
}

footer {
    --contrast: var(--blue-2);
    --foreground: #F2F8FF;
    --link: #818CA1;

    background-color: var(--foreground);
}