html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    background-color: #21262b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

p {
    color: #f1f3f566;
}

#view {
    width: 100%;
    height: 100%;
    position: fixed;
    user-select: none;
    z-index: 10;
    cursor: none;
}

#render {
    width: 100%;
    height: 100%;
    /*background-color: rgba(255, 255, 255, 255);*/
    position: fixed;
    user-select: none;
    z-index: 11;
    display: none;
}

* {
    user-select: none;
    font-family: Arial, Helvetica, sans-serif;
}

::-webkit-scrollbar {
    display: none;
}

.btn {
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

.btn:hover {
    background-color: #fff;
    box-shadow: 0 0 4px #cecece;
}

/* hide transition */
#google_translate_element{width:300px;float:right;text-align:right;display:block}
.goog-te-banner-frame.skiptranslate { display: none !important;} 
body { top: 0px !important; }
#goog-gt-tt{display: none !important; top: 0px !important; } 
.goog-tooltip skiptranslate{display: none !important; top: 0px !important; } 
.activity-root { display: hide !important;} 
.status-message { display: hide !important;}
.started-activity-container { display: hide !important;}
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

#xr {
    width: 200px;
    height: 80px;
    border: 3px solid #656c75;
    color: #e0e0e0;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    display: none;
}

#xr:hover {
    background-color:#656c75;
}

#hello {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10vw;
    color: #e0e0e0;
    word-wrap: none;
}

#loading {
    height: 2px;
    background-color: #e0e0e033;
    width: 60%;
}

@keyframes loading {
    0% { width: 0; }
    20% { width: 80%; }
    100% { width: 100%; }
}

#progress {
    background-color: #e0e0e0;
    height: 2px;
    animation-name: loading;
    animation-duration: 5s;
}

#copy {
    color: #eaecef33;
    font-size: 8px;
    font-weight: lighter;
    position: fixed;
    bottom: 10px;
}

#video {
    position: fixed;
    border: 1px solid #e0e0e0;
    /* display: none; */
    width: 360px;
    height: 270px;
}

#video {
    position: fixed;
    visibility: hidden;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}