html,body {

    touch-action: pan-x pan-y;
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    background-color: #ffffff;
    /*overflow-y: hidden;*/
    /*cursor: grabbing;*/
    touch-action: manipulation;
}
a, p, div {
    text-decoration: none;
    font-family: 'EB Garamond', serif;
    /*font-size: 18px;*/
    /*font-weight: 300;*/
    /*line-height: 50px;*/
    color: black;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
::selection {
    background: yellow;
}
::-moz-selection {
    background: yellow;
}
::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}
video::-webkit-media-controls {
    display: none;
}
video::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}
html,body,a, p, div,img{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.mirror{
    position: fixed;
    top: 0;left: 0;
    width: 100%;height: 100%;
}
#camera, #camera--sensor, #camera--output{
    position: fixed;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform:  scaleX(-1);
    z-index: 2;
}
.mirrors{
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    position: fixed;
}
.mirror1{
    height: 40vw;
    width: 40vw;
    left: 10%;top: -10%;
}
.mirror1{
    height: 40vw;
    width: 40vw;
    left: 10%;top: -10%;
}
.mirror2{
    height: 50vw;
    width: 50vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mirror3{
    height: 33vw;
    width: 33vw;
    bottom: 0;
    left: 50%;
}
.mirror4{
    height: 33vw;
    width: 33vw;
    bottom: 0;
    left: 40%;
}
.mirror6{
    height: 33vw;
    width: 33vw;
    bottom: -3%;
    left: 58%;
}
.camera--view{
    position: absolute;
    object-fit: cover;
    transform:  scaleX(-1);
}
.mirrorimg{
    position: absolute;
    height: 100%;
    width: 100%;
}
#mirror1{
    opacity: 0.9;filter: blur(0.5vw);
    height: 71%;
    width: 60%;
    top: 14%;
    left: 20%;
    object-fit: cover;
}
#mirror1a{
    opacity: 1;
    height: 59%;
    width: 48%;
    top: 20%;left: 26%;
    object-fit: cover;
}
.mirror2 video{
    opacity: 0.5;
    mix-blend-mode: overlay;
    top: 46%;
    left: 50%;
    width: 50%;
    height: 47%;
    filter: blur(4px);
    transform: translateX(-50%) scaleX(-0.7);
}
.mirror3 .cameravideos{
    position: absolute;
    top: 22%;
    left: 49%;
    width: 42%;
    height: 36%;
    -webkit-clip-path: circle(50.0% at 45% 43%);
    clip-path: circle(50.0% at 45% 43%);
    transform: translateX(-50%) scale(-0.6,-1);
}
.mirror3 .mirror-blur{
    filter: blur(2px) grayscale(0.2);
}
.mirror3 #mirror3{
    opacity: 0.85;
    height: 100%;
    width: 100%;
    transform: scale(-1.2,2.5);
}
.mirror3aframe{
    position: absolute;
    opacity: 0.9;
    height: 100%;
    width: 100%;
    clip-path: circle(42% at 45% 50%);
}
.mirror3 #mirror3a{
    height: 100%;
    width: 100%;
    transform: scale(-1.1,3.5);
}
.mirror3bframe{
    position: absolute;
    opacity: 0.95;
    height: 100%;
    width: 100%;
    clip-path: circle(34% at 45% 50%);
}
.mirror3 #mirror3b{
    height: 100%;
    width: 100%;
    transform: scale(-1,4.5);
}
.mirror3cframe{
    position: absolute;
    opacity: 0.95;
    height: 100%;
    width: 100%;
    clip-path: circle(26% at 45% 50%);
}
.mirror3 #mirror3c{
    height: 100%;
    width: 100%;
    transform: scale(-0.9,5.5);
}
.mirror3dframe{
    position: absolute;
    height: 100%;
    width: 100%;
    clip-path: circle(18% at 45% 50%);
}
.mirror3 #mirror3d{
    height: 100%;
    width: 100%;
    transform: scale(-0.8,6.5);
}
.mirror4frame{
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 7%;
    top: -3%;
    clip-path: polygon(60% 17%, 57% 18%, 56% 18%, 53% 26%, 51% 40%, 51% 46%, 54% 100%, 58% 100%, 60% 39%);
    transform: scaleX(-1);
}
#mirror4{
    opacity: 0.8;
    top: 50%;height: 90%;
    transform: translateY(-50%) scale(5,0.8);
}
.mirror5{
    height: 38vw;
    width: 38vw;
    top: -21%;
    left: 54%;
}
.clock{
    position: absolute;
    width: 100%;height: 100%;
}
.clock img{
    position: absolute;
    width: 100%;
}
.mirror5blur {
    position: absolute;
    bottom: 23%;left: 17%;
    width: 70%;
    height: 60%;
    filter: blur(10px);
}
.mirror5frame {
    mix-blend-mode: hue;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: circle();
    transform: scaleX(1);
    /*filter: blur(3px);*/
}
#mirror5{
    width: 100%;
    height: 100%;
    opacity: 0.15;
}
.mirror6frame {
    mix-blend-mode: hard-light;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    transform: scaleX(1);
}
#mirror6{
    opacity: 0.8;
    left: 45.5%;
    top: 19%;
    height: 100%;
    transform: scale(0.005,1);
    transform-origin: top left;
}
#mirror6a{
    opacity: 0.8;
    left: 52.5%;
    top: 16%;
    height: 100%;
    transform: scale(0.006,1);
    transform-origin: top left;
}
.camera--view{
    visibility: hidden;
}

@media (max-aspect-ratio: 1/1) {
    html,body{
        height: 100vh;
        width: 100%;
        position: fixed;
        overflow: hidden;
    }
    .mirrors{
        position: absolute;
        height: 100vw;
        width: 100vw;
    }
    .mirror1{
        top: -5%;
        left: -12%;
    }
    .mirror2{
        height: 110vw;
        width: 110vw;
        top: 55%;
        left: 40%;
    }
    .mirror3{
        left: 23%;
    }
    .mirror4{
        left: 41%;
    }
    .mirror3 .mirror-blur{
        filter: blur(3px) grayscale(0.3);
    }
    .mirror5{
        height: 90vw;
        width: 90vw;
        top: 7%;
        left: 40%;
    }
    .mirror6{
        bottom: -8%;
        left: 4%;
    }
}