@import "tailwindcss";

 body {
   text-align: center;
   /* background-color: #000; */
   background-image: url(./asset/background.png);
   background-size: auto;
   /* color: white; */
   font-family: Futura, Helvetica, sans-serif;

 }

 h1 {
   margin-top: 80px;
   color: white;
   font-weight: 800;
   font-size: 40px;
   text-align: left;
 }

 p {
   color: white;
   text-align: left;
   margin-top: 30px;
   line-height: 20px;
 }

 /* 盒子布局  ----------------------------------------------------------------------------------------- */
 .box {
   max-width: calc(100% - 160px);
   /* 减去左右边距 */
   margin: 20px auto;
   margin-top: 60px;
   padding: 0px;
   /* 可选，内部元素也有内边距 */
   display: flex;
   /* background: #222; */
   transition: all 0.5s;
 }

 .box-left {
   width: 700px;
 }

 .box-right {
   width: 500px;
 }

 .box-left,
 .box-right {
   /* 固定宽度 */
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
 }

 /* .box-left {
   background-color: black;
 } */

 /* .box-right {
   background-color: black;
 } */

 /* 中间自动拉伸的空白区域 */
 .spacer {
   flex: 1;
 }

 /* 显示屏框架设定 -----------------------------------------------------------------------------------------*/
 .prototype {
   display: flex;
   flex-direction: column;
   align-self: center;
   align-items: center;
   height: 90vh;
   width: 41.1vh;
   /* border: 1px, solid, white; */
 }

 .logo {
   width: 100%;
 }

 .screen {
   height: 77%;
   /* height: 69.2vh; */
   width: 100%;
   border: 1px solid #444;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 12px 12px 0px 0px;
   background-color: rgba(255, 255, 255, 0.12);
 }

 .base {
   height: 23%;
   width: 100%;
   /* width: 41.1vh; */
   border: 1px solid #444;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 0px 0px 12px 12px;
   background-color: rgba(255, 255, 255, 0.12);
 }


 /* 视频区域画布设定  -----------------------------------------------------------------------------------------*/
 canvas {
   height: 60.5vh;
   width: 34.6vh;
   border: 1px solid #444;
   border-radius: 8px;
   /* margin-top: 30px; */
   /* background-color: black; */
 }

 .video-wrapper {
   position: relative;
   width: 100%;
   height: 100vh;
   /* 竖向全屏 */
   overflow: hidden;
   background: black;
   /* 可选 */
 }

 #touchdesigner {
   position: absolute;
   top: -10px;
   left: 0;
   /* margin-top: 30px; */
   border-radius: 8px;
   height: 60.5vh;
   width: 34.6vh;
   pointer-events: none;
   /* display: none; */
 }

 #animVideo {
   position: absolute;
   top: 0;
   left: 0;
   /* margin-top: 30px; */
   border-radius: 8px;
   height: 60.5vh;
   width: 34.6vh;
   pointer-events: none;
   display: none;
 }

 #uicanvas {
   position: absolute;
 }

 #finish-page {
   position: absolute;
   background-image: url(./asset/INTRO.png);
   background-size: cover;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: all 0.5s ease-in-out;
 }

 #finish-page.show {
   opacity: 1;
 }

 #restart {
   position: absolute;
   transform: translateX(-50%);
   top: 65%;
   opacity: 0;
   display: none;
 }

 #restart.show {
   opacity: 1;
   display: inline;
 }

 .bar {
   position: absolute;
   rotate: -90deg;
   top: 50%;
   right: 40%;
 }

 .label {
   color: white;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 102%;
 }

 .MovementImage {
   position: absolute;
   transform: translateX(-50%);
   left: 50%;
   top: calc(100% - 80px);
 }

 /* 
 #startbutton {
   line-height: 0;
   font-size: small;
   margin-top: 10px;
   height: 20px;
 } */

 /* 标签栏 条形显示 */
 #label-container div {
   font-size: 18px;
   /* margin-top: 5px; */
 }

 .bar-container {
   align-items: center;
   justify-items: center;
   margin: 0px, 0;
 }

 .label {
   font-size: 14px;
   display: inline-block;
   margin-bottom: 4px;
 }

 .bar {
   width: 34.6vh;
   height: 16px;
   background-color: #444;
   border-radius: 8px;
   overflow: hidden;
 }

 .fill {
   margin: 0px;
   height: 100%;
   width: 0%;
   /* background-color: #00ccff; */
   background: linear-gradient(90deg, #F074ED, #E46314);
   transition: width 0.3s ease;
 }