body * {
  font-family: "Sarabun", sans-serif;
}

body,
html {
  width: 100%;
  height: 100%;
  background-color: #f9f1bf !important;
  overflow: hidden;
}

/* Preload Images
body:after {
  content: url("assets/img/p1.png")
           url("assets/img/p2.png") 
           url("assets/img/p3.png")
           url("assets/img/p4.png")
           url("assets/img/p5.png")
           url("assets/img/p6.png")
           url("assets/img/p7.png")
           url("assets/img/p8-no.png")
           url("assets/img/p8-yes.png")
           url("assets/img/p9.png")
           url("assets/img/p10.png")
           url("assets/img/p11.png")
           url("assets/img/p12.png")
           url("assets/img/p13.png")
           url("assets/img/p14.png")
           url("assets/img/p15.png")
           url("assets/img/p16.png")
           url("assets/img/p17.png")
           url("assets/img/p18-fine.png")
           url("assets/img/p18-happy.png")
           url("assets/img/p18-unhappy.png")
           url("assets/img/p19.png")
           url("assets/img/p20.png")
           url("assets/img/p21.png")
           url("assets/img/p22.png")
           url("assets/img/p23.png")
           url("assets/img/p24.png")
           url("assets/img/p25.png")
           url("assets/img/p26.png")
           url("assets/img/p27.png")
           url("assets/img/p28.png")
           url("assets/img/p29.png")
           url("assets/img/p30.png")
           url("assets/img/p31.png")
           url("assets/img/p32.png");
}
*/

.app-container {
  /* width: 100%; */
  height: 100vh;
  position: relative;
}

.app-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app-pBase,
#app-p1,
#app-p2,
#app-p3,
#app-p4,
#app-p5,
#app-p6,
#app-p7,
#app-p8-yes,
#app-p8-no,
#app-p9,
#app-p10,
#app-p11,
#app-p12,
#app-p13,
#app-p14,
#app-p15,
#app-p16,
#app-p17,
#app-p18-happy,
#app-p18-unhappy,
#app-p18-fine,
#app-p19,
#app-p20,
#app-p21,
#app-p22,
#app-p23,
#app-p24,
#app-p25,
#app-p26,
#app-p27,
#app-p28,
#app-p29,
#app-p30,
#app-p31,
#app-p32 {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
}

#app-p0 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app-p1 {
  background-image: url("assets/img/p1.png");
}

#app-p1-txtName {
  text-align: center;
  position: relative;
  top: 55%;
  left: 25%;
  width: 50vw;
  height: 5%;
  background: transparent;
  border: none;
}

#app-p1-txtAge {
  text-align: center;
  position: relative;
  top: 61.75%;
  left: 25%;
  width: 50vw;
  height: 5%;
  background: transparent;
  border: none;
}

#app-p1-btn {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app-p2 {
  background-image: url("assets/img/p2.png");
}

#app-p3 {
  background-image: url("assets/img/p3.png");
}

#app-p4 {
  background-image: url("assets/img/p4.png");
}

#app-p5 {
  background-image: url("assets/img/p5.png");
}

#app-p6 {
  background-image: url("assets/img/p6.png");
}

#app-p7 {
  background-image: url("assets/img/p7.png");
}

.app-p7-btn {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app-p8-yes {
  background-image: url("assets/img/p8-yes.png");
}

#app-p8-no {
  background-image: url("assets/img/p8-no.png");
}

#app-p9 {
  background-image: url("assets/img/p9.png");
}

#app-p10 {
  background-image: url("assets/img/p10.png");
}

#app-p11 {
  background-image: url("assets/img/p11.png");
}

#app-p12 {
  background-image: url("assets/img/p12.png");
}
#app-p13 {
  background-image: url("assets/img/p13.png");
}
#app-p14 {
  background-image: url("assets/img/p14.png");
}
#app-p15 {
  background-image: url("assets/img/p15.png");
}
#app-p16 {
  background-image: url("assets/img/p16.png");
}

#app-p17 {
  background-image: url("assets/img/p17.png");
}

.app-p17-btn {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

#app-p18-happy {
  background-image: url("assets/img/p18-happy.png");
}

#app-p18-unhappy {
  background-image: url("assets/img/p18-unhappy.png");
}

#app-p18-fine {
  background-image: url("assets/img/p18-fine.png");
}

#app-p19 {
  background-image: url("assets/img/p19.png");
}

#app-p20 {
  background-image: url("assets/img/p20.png");
}

#app-p21 {
  background-image: url("assets/img/p21.png");
}

#app-p22 {
  background-image: url("assets/img/p22.png");
}

#app-p23 {
  background-image: url("assets/img/p23.png");
}

#app-p24 {
  background-image: url("assets/img/p24.png");
}

#app-p25 {
  background-image: url("assets/img/p25.png");
}

#app-p26 {
  background-image: url("assets/img/p26.png");
}

#app-p27 {
  background-image: url("assets/img/p27.png");
}

#app-p28 {
  background-image: url("assets/img/p28.png");
}

#app-p29 {
  background-image: url("assets/img/p29.png");
}

#app-p30 {
  background-image: url("assets/img/p30.png");
}

#app-p31 {
  background-image: url("assets/img/p31.png");
}

#app-p32 {
  background-image: url("assets/img/p32.png");
}

#app-p-end {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#_app-p-end {
  display: none;
}