@font-face {
    font-family: myFirstFont;
    src: url(../assets/font/Krungsri\ Simple\ Med.ttf);
}

*{
    font-family: myFirstFont;
}

body {
    margin: 0;
    background-color: black;
    overflow: hidden;
    touch-action: pan-x pan-y;
}

#WebARRocksFaceCanvas, #threeCanvas ,#displayCanvas,#displayCanvas2 {
    position: fixed;
    object-fit: contain;
    width:100vw;
    top: 0;
    left: 0;
    /* mirror the canvas: */
    transform: rotateY(180deg);
}

#WebARRocksFaceCanvas {
    z-index: 0;
}

#threeCanvas {
    z-index: 1;
    display: none;
    }

#displayCanvas,#displayCanvas2 {
    z-index: 0;
    display: none;
}

#lottieBottomCanvas{
    position: absolute;
    display: flex;
    width: 120%;
    bottom: 0vh;
    height:110vh;
    z-index: 12;
    /*transform: rotateY(0deg);*/
}

#lottieTopCanvas{
    position: absolute;
    display: flex;
    width: 120%;
    height: 110vh;
    top: 8vh;
    z-index: 12;
}

#myCanvas {
    position: absolute;
    top:0px;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}

#myCanvas2 {
    position: absolute;
    top:0px;
    display: block;
    width: 100%;
    height: auto;
    z-index: 6;
}

#logo {
    position: absolute;
    top:0px;
    display: flex;
    width: 100%;
    height: auto;
    z-index: 2;
}

#loading {
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    z-index: 100;
    pointer-events: none;
    display: flex; 
    justify-content: center;
    align-items: center;
    color: #ffffff;
}

#loading > div {
    margin: auto;
    color: white;
    font-size: 32pt;
}

.Card{
    position: absolute;
    height: 100%;
}

#lottie-animation{
    position: absolute;
    top:0;
}

#recordBtn,#stopRecordBtn{
    width: 5rem;
    height: 5rem;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: calc(infinity * 1px);
    border: none;
}

#captureBtn{
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(infinity * 1px);
    border: none;
}

#control-panel{
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    z-index: 12;
    display: flex;
    align-items: end;
}

#controls{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2rem;
}

#controls-top{
    position: absolute;
    top:0vh;
    z-index: 11;
    width: 100vw;
    height:auto;
    display: flex;
    justify-content: center;
}

#controls-top-slide{
    position: absolute;
    top:0;
    z-index: 12;
    width: 100vw;
    height:100vh;
    height:auto;
    display: flex;
    justify-content: center;
}

#inner-side{
    width: 4rem;
    height: 4rem;
    display: flex;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: #d1d5dc;
    background-color: #d1d5dc;
    border-radius: calc(infinity * 1px);
    aspect-ratio: 1/1;
}

#fixed-bg{
    position: fixed;
    z-index: 50;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    height: 100vh;
}

#canvas-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

#video-display{
    position: absolute;
    top: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:100vh;
    z-index: 40;
    background: black;
}

#image-display{
    position: absolute;
    top: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100vw;
    height:100vh;
    z-index: 40;
    background: black;
}

#videoRef{
    display: flex;
    width:60vw;
    height:60vh;
    z-index: 20;
}

#imgRef{
    display: flex;
    width:60vw;
    height:auto;
    z-index: 20;
    aspect-ratio: auto;
}

#input_video{
    position: absolute;
}

.carousel-container{
    width: 80%;
    height: 100vh;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.carousel{
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.imgDiv{
    width : 40px;
    height : 40px;
    border-radius: calc(infinity * 1px);
    background: white;
}

.imgDiv-container{
    width : 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#closeBtn,#closeBtn2{
    background:url("../assets/png/Asset\ 40back.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    border: none;
    top:10px;
    left:10px;
    z-index: 23;
    width: 100px;
    height: 50px;
}

#downloadBtn,#downloadBtn2{
    margin-top:10px;
    background:url("../assets/png/Asset\ 37TEXT-Krungsri.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    z-index: 23;
    width: 200px;
    height: 50px;
}

#orientation-block{
    position: absolute;
    top:0;
    display: none;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: black;
    justify-content: center;
    align-items:center;
    color: white;
}

#blackLeft{
    position: absolute;
    background: black;
    z-index: 41;
    left: 0;
}

#blackRight{
    position: absolute;
    background: black;
    z-index: 41;
    right: 0;
}

#toggle-group{
    display: flex;
    background:url("../assets/png/Asset\ 42text-button.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    z-index: 30;
    width: 150px;
    height: 50px;
}

#toggle-swap2{
    position: absolute;
    display: none;
    bottom:6rem;
    background:url("../assets/png/Asset\ 35TEXT.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    z-index: 30;
    width: 150px;
    height: 50px;
}

.toggleBtn{
    width:100%;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    border: none;
}

#myCanvas {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
}
 
#lottieBottomCanvas {
 
      position: fixed;
 
      bottom: 0;
 
      left: 0;
 
      width: 100%;
 
      /* Set a desired height; adjust as needed */
 
      height: 300px;
      z-index:5;
 
    }
 
    /* Hidden container for Lottie (kept off-screen) */
 
    #hiddenContainer {
 
      position: absolute;
 
      opacity: 0;
 
      pointer-events: none;
 
    }

@media only screen and (orientation: landscape){
    #orientation-block{
        display: flex;
    }
}

@media only screen and (orientation: portrait){
    #orientation-block{
        display: none;
    }
}