@font-face {
  font-family: "Proxima Nova Font";
  src: url("../resources/General/Proxima\ Nova\ Font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Proxima Nova Font", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  text-align: center;
}

canvas {
  display: block;
}

#BGCanvas{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#mainTitle{
  margin: 0 auto;
  margin-top: 30px;
  /* width: 66%; */
  display: block;
  /* transform: 1; */
}

#mainSubtitle{
  margin-top: 20px;
  /* width: 60%; */
}

#secondSubtitle{
  margin-top: 50px;
}

#descriptionDialogue{
  margin-top: 50px;
}

#readyHint{
  margin-top: 50px;
}

#nickName{
  margin-top: 50px;
}

#birthdate{
  margin-top: 50px;
  /* display: block; */
  margin: 50px auto 0px;
  /* color: red; */
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align-last: center;
}

.pics{
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

#birthdate > option{
  margin: 0 auto;
}

#send {
  margin-top: 50px;
  background: #444;
  color: #FFFFFF;
  transition: background-color 0.3s ease;
}

#send.active {
  background-color: #999;
}

#bottomLogo{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#barcode{
  text-align: center;
  display: inline-block;
}

#barcodeText{
  margin-bottom: 25px;
}

#centerArea{
  height: 85%;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#P0, #P1, #P2{
  width: 100%;
  position: absolute;
  /* top: 0; */
  /* left: 0; */
}

#ImageGroup{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#P3{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  top: -2000px;
}

#P1{
  margin: auto;
  z-index: -1;
}

#P2{
  top: 150px;
  z-index: -2;
}

#p2Title{
  /* margin-bottom: 30px; */
}

#p2Hint{
  margin: 80px auto;
}

#p2img{
  margin-top: 30px;
}

#p2Button{

}

#FinalDemo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#P1 > p{
  font-size: 150px;
  color: #444;
  margin: 30px auto;
}

#topArea{
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topAreaCircle{
  flex: 1;
  position: relative;
  width: 15%;
  height: 100%;
}

.topAreaCircle img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#finalPageTitle{
  margin: 0 auto;
  margin-top: 30px;
  /* width: 66%; */
  display: block;
  position: relative;
  top: -300px;
}

#FinalLine{
  opacity: 0;
  margin-top: 70px;
}

#FinalImage{
  width: 90%;
  margin: 0px auto;
  position: relative;
}

#FinalBottomImage{
  margin-top: 30px;
  width: 100%;
}

#FinalBottomLogo{
  position: absolute;
  top: 100px;
  left: 60px;
  z-index: 100000;
}

.topAreaCircleTitle{
  top: 0px;
  color: #fff;
  position: relative;
  top: -90px;
  font-size: 25px;
}

#barcode{
  margin: 0px auto;
}

#p2Center{
  display: flex; /* 将容器元素设置为 flexbox 布局 */
  justify-content: center; /* 在水平方向上将物件居中 */
  align-items: center; /* 在垂直方向上将物件居中 */
  width: 100%; /* 设置容器元素宽度 */
  height: 100%; /* 设置容器元素高度 */
  position: relative; /* 将容器元素设置为相对定位 */
  width: 100%; /* 设置容器元素宽度 */
  height: 100%; /* 设置容器元素高度 */
}

#fakeBg{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

#mainCircle{
  margin: 10% auto;
  width: 80%;
  display: inline-block;
}

#mainCircleTop{
  /* margin: 10% auto; */
  width: 50%;
  display: inline-block;
  position: absolute; /* 将要居中的物件设置为绝对定位 */
  top: 50%; /* 将物件垂直居中 */
  left: 50%; /* 将物件水平居中 */
  transform: translate(-50%, -50%); 
}

#fullCover{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: grey;
  z-index: 100;
  pointer-events: none
}

#info{
  position: absolute;
  left: 60%;
  top: 60%;
  text-align: left;
  color: #666666;
}

.idText{
  font-size: 16px;
}

.idNumber{
  font-size: 16px;
}

.idName{
  font-size: 60px;
}

.idBirth{
  font-size: 36px;
}

.colored{
  opacity: 0;
}

.topAreaCirclePurple > .playedImage{
  color: #FFFFFF;
  filter: invert(0) sepia(100%) saturate(10000%) hue-rotate(263deg);
}

.topAreaCircleOrange > .playedImage{
  color: #18A434;
  filter: invert(0) sepia(100%) saturate(10000%) hue-rotate(327deg);
}

.topAreaCircleGreen > .playedImage{
  color: #2A73FD;
  filter: invert(0) sepia(100%) saturate(10000%) hue-rotate(59deg);
}

.topAreaCircleBlue > .playedImage{
  color: #FFA700;
  filter: invert(0) sepia(100%) saturate(10000%) hue-rotate(126deg);

}

.topAreaCircleRed > .playedImage{
  color: #A311AB;
  /* filter: invert(0) sepia(100%) saturate(10000%) hue-rotate(292deg); */
}

#FinalTopLogo{
  margin-top: 20px;
  opacity: 0;
}

#topButtons{
  margin-top: 40px;
  margin-bottom: 20px;
}

#topButtons > img{
  margin: 0px 10px;
}

#topButtons{
  opacity: 0;
}

#checkButton{
  opacity: 0;
}

#lineButton{
  cursor: pointer;
}

#fbButton{
  cursor: pointer;
}

#checkButton{
  cursor: pointer;
}

/*Particle Input*/

input, select{
	border: 2px solid rgba(17, 17, 17, 0.5);
	font-size: 40px;
	padding: 0.25em 0.5em 0.3125em;
	color: rgba(17, 17, 17, 0.5);
	border-radius: 0.25em;
	background: transparent;
	transition: all 0.1s;
  text-align: center;
  box-sizing: border-box;
	width: 15em;
}

input:focus, select:focus{
	outline: none;
	color: rgba(17, 17, 17, 0.5);
	border-color: rgba(17, 17, 17, 0.5);
}

input.keyup {
	color: white;
	border-color: white;
	text-shadow: 0 0 0.125em white;
	box-shadow: 0 0 0.25em white, inset 0 0 0.25em white;
}

/* input, select {
	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
} */

::-webkit-input-placeholder {
	color: rgba(17, 17, 17, 0.5);
	text-shadow: 0 0 0.125em transparent;
	transition: all 0.25s;
}

input:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder {
	opacity: 0.2;
}

::-moz-placeholder {
	color: rgba(17, 17, 17, 0.5);
	text-shadow: 0 0 0.125em transparent;
	transition: all 0.25s;
}

input:focus::-moz-placeholder, select:focus::-moz-placeholder {
	opacity: 0.2;
}

:-ms-input-placeholder {
	color: rgba(17, 17, 17, 0.5);
	text-shadow: 0 0 0.125em transparent;
	transition: all 0.25s;
}

input:focus:-ms-input-placeholder, select:focus:-ms-input-placeholder {
	opacity: 0.2;
}

html, body {
	height: 100%;
	overflow: hidden;
}