@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

html {
    height: -webkit-fill-available;
}

body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Roboto', sans-serif;
}

needle-engine {
    position: absolute;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

needle-engine canvas {
    position: absolute;
}

/* important to enable pointer events on overlay content entries by default again
currently the overlay code does disable pointer events so that when adding content
the threejs dom still receives events */
needle-engine .ar>*,
needle-engine .vr>*,
needle-engine .desktop>* {
    pointer-events: auto !important;
}

/* styles for default are close button */
needle-engine .quit-ar {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 30%;
    min-height: 10%;
    background: none;
    border: none;
    font-size: 2em;
    color: gray;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 10;
}

needle-engine .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    color: white;
}

needle-engine .webxr-buttons {
    position: fixed;
    /* border: red 2px solid; */
    bottom: 21px;
    left: 50%;
    transform: translate(-50%, 0%);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

needle-engine .webxr-button:disabled {
    transform: none;
    opacity: 0.5 !important;
    /* display: none; */
}

/* presentation */
needle-engine.presentation-mode .hide-in-presentation {
    display: none !important;
}