:root {
    color-scheme: light;
    --app-navy: #3f6b91;
    --app-deep: #2f5376;
    --app-pale: #f3f5f8;
    --app-line: #cfd6df;
    --app-accent: #ef533f;
    --app-success: #67bc63;
    --app-ink: #2b4a69;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    background:
        linear-gradient(180deg, #477095 0%, #3f6b91 100%);
    font-family: "Segoe UI", sans-serif;
    color: var(--app-ink);
}

#app {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.bg-grid-pattern {
    background-image:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.14), transparent 38%);
    background-size: cover;
}

[v-cloak] {
    display: none;
}

input,
textarea,
button {
    font: inherit;
}

img,
video,
canvas {
    max-width: 100%;
}

input::placeholder,
textarea::placeholder {
    color: rgba(43, 74, 105, 0.58);
}

@media (max-width: 640px) {
    body {
        background:
            linear-gradient(180deg, #477095 0%, #3f6b91 100%);
    }
}