// Generated by Framer (9cea56c)

import * as React from "react";
import { motion, LayoutGroup } from "framer-motion";
import { useOnVariantChange, useActiveVariantCallback, Image, transformTemplate, addFonts, withCSS, addPropertyControls, ControlType, cx, useVariantState, CycleVariantState, RichText, Container, getFonts, useHydratedBreakpointVariants, removeHiddenBreakpointLayers, PropertyOverrides, GeneratedComponentContext } from "framer";
import Topbar from "../canvasComponent/pQWsMWkcK";
import metadataProvider from "../webPageMetadata/KBlFSas6i";
import * as sharedStyle from "../css/YAP816Y5n";
const TopbarFonts = getFonts(Topbar);

const cycleOrder = ["ja7VHPYPJ"];

const breakpoints = {}

const isBrowser = typeof document !== "undefined";

const variantClassNames = {ja7VHPYPJ: "framer-v-1uesjik"};

if (isBrowser) {
                    removeHiddenBreakpointLayers("ja7VHPYPJ", breakpoints, variantClassNames);
            }

const humanReadableVariantMap = {};

const transitions = {default: {duration: 0}};

const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

const useRandomID = () => {const ref = React.useRef(null);
if (ref.current === null) {
ref.current = Array(5).fill(0).map(() => BASE62[Math.floor(Math.random() * BASE62.length)]).join("");
}
return ref.current;}

export interface Props extends React.HTMLAttributes<HTMLDivElement> { layoutId?: string | null; width?: number; height?: number; layoutDependency?: string | number; variant?: keyof typeof humanReadableVariantMap; }

const Component = React.forwardRef<HTMLDivElement, Props>(function({ id, style: externalStyle = {}, className, width, height, layoutId, variant: outerVariant = "ja7VHPYPJ", ...restProps }, ref) {

const outerVariantId = humanReadableVariantMap[outerVariant];

const variant = outerVariantId || outerVariant;

React.useLayoutEffect(() => {
const metadata = metadataProvider();
document.title = metadata.title || "";
if (metadata.viewport) { document.querySelector('meta[name="viewport"]')?.setAttribute("content", metadata.viewport) }
}, [])

const [baseVariant, hydratedBaseVariant] = useHydratedBreakpointVariants(variant, breakpoints, false);
const gestureVariant = undefined;
const transition = transitions.default;

const defaultLayoutId = useRandomID();

const { pointerEvents, ...style } = externalStyle

return (<GeneratedComponentContext.Provider value={{primaryVariantId: "ja7VHPYPJ", variantClassNames}}>
<LayoutGroup id={layoutId ?? defaultLayoutId}>
<motion.div data-framer-generated className={cx("framer-UBHzl", sharedStyle.className)} style={{display: "contents", pointerEvents: pointerEvents ?? undefined}}>
<motion.div {...restProps} className={cx("framer-1uesjik", className)} style={{...style}} name={"Desktop"} ref={ref}><RichText className={"framer-v1z8vv"} style={{whiteSpace: "pre", "--framer-link-text-color": "rgb(0, 153, 255)", "--framer-link-text-decoration": "underline", "--framer-paragraph-spacing": "0px"}} transformTemplate={(_, t) => `translate(-50%, -50%) ${t}`} fonts={[]} withExternalLayout={true} verticalAlignment={"top"} __fromCanvasComponent={true} __htmlStructure={"<h1 class=\"framer-styles-preset-3nqyhf\" data-styles-preset=\"YAP816Y5n\" style=\"--framer-text-alignment:center;\">{{ text-placeholder }}</h1>"} htmlFromDesign={"<h1 class=\"framer-styles-preset-3nqyhf\" data-styles-preset=\"YAP816Y5n\" style=\"--framer-text-alignment:center;\">404</h1>"}/><Container className={"framer-1w85f7s-container"}><Topbar width={"100%"} height={"100%"} layoutId={"PqAy4jTlb"} id={"PqAy4jTlb"} variant={"eoTXJYY6N"} style={{width: "100%"}}/></Container></motion.div>
<div id="overlay"/>
</motion.div>
</LayoutGroup>
</GeneratedComponentContext.Provider>)

});

const css = [".framer-UBHzl [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none;}", "@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }", ".framer-UBHzl .framer-1uesjik { position: relative; overflow: hidden; width: 1200px; height: 1000px; background-color: #ffffff; }", ".framer-UBHzl .framer-v1z8vv { position: absolute; width: auto; height: auto; left: 50%; top: 50%; flex: none; transform: translate(-50%, -50%); white-space: pre; --framer-paragraph-spacing: 0px; --framer-link-text-color: #0099ff; --framer-link-text-decoration: underline; }", ".framer-UBHzl .framer-1w85f7s-container { position: absolute; height: auto; right: 0px; left: 0px; top: 0px; flex: none; }", ...sharedStyle.css]

/**
 * This is a generated Framer component.
 * @framerIntrinsicHeight 1000
 * @framerIntrinsicWidth 1200
 * @framerCanvasComponentVariantDetails {"propertyName":"variant","data":{"default":{"layout":["fixed","fixed"]}}}
 * @framerResponsiveScreen
 */
const FramerKBlFSas6i: React.ComponentType<Props> = withCSS(Component, css) as typeof Component;
export default FramerKBlFSas6i;

FramerKBlFSas6i.displayName = "404";

FramerKBlFSas6i.defaultProps = {width: 1200, height: 1000};

addFonts(FramerKBlFSas6i, [...TopbarFonts, ...sharedStyle.fonts]);