vnCSS.txt

#workskin p {
  line-height: 1em;
}

#workskin .mobilescreen {
  transform: rotate(-90deg);
  margin-top: 40px;
}

#workskin a,
#workskin a:link,
#workskin a:visited,
#workskin a:hover {
  border-bottom: none;
  color: inherit;
  text-decoration: none;
}

#workskin .screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#workskin .storycontainer {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  height: 800px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight: light;
}

#workskin .page {
  height: 800px;
  overflow: hidden;
  font-family: Comic Sans Ms;
}

#workskin .storycontainermobile {
  width: 100%;
  height: 650px;
  margin: 0 auto;
  overflow: hidden;
  font-weight: light;
}

#workskin .pagemobile {
  height: 1000px;
  width: 100%;
  overflow: hidden;
}

#workskin .settingsbox {
  width: 100%;
  height: 250px;
  min-width: 350px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  top: 13px;
}

#workskin .settingsbutton1 {
  position: absolute;
  width: 28%;
  min-width: 115px;
  height: 25%;
  min-height: 60px;
  top: 25%;
  left: 50%;
  background-image: url("https://i.ibb.co/SPNkDjm/escolha1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  text-align: center;
  line-height: 1.3em;
  font-size: 130%;
  color: #F2FDE8;
  display: table;
  transform: translate(-50%, -25%);
}

#workskin .settingsbutton2 {
  position: absolute;
  width: 28%;
  min-width: 115px;
  height: 25%;
  min-height: 60px;
  bottom: 15%;
  left: 50%;
  background-image: url("https://i.ibb.co/SPNkDjm/escolha1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  text-align: center;
  line-height: 1.3em;
  font-size: 130%;
  color: #F2FDE8;
  display: table;
  transform: translate(-50%, -15%);
}

#workskin .settingsbutton1:hover,
#workskin .settingsbutton2:hover {
  background-image: url("https://i.ibb.co/6Pd9LF0/escolha1-hover.png");
}

#workskin .settingstext {
  display: table-cell;
  vertical-align: middle;
}

#workskin .audiobox1 {
  margin-top: 80px;
  margin-left: 20px;
  height: 50px;
  width: 50px;
  background-image: url("https://i.ibb.co/pf0TQXt/audio.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  padding-top: 5px;
  opacity: 0;
}

#workskin .mobilescreen .audiobox1 {
  margin: 0 auto;
  height: 50px;
  width: 50px;
  margin-top: -300px;
  margin-left: -487px;
}

#workskin audio {
  opacity: 0;
  border-radius: 7px;
  width: 100px;
  z-index: 6;
}

#workskin audio::-webkit-media-controls-play-button {
  height: 80px;
  margin-right: 200px;
  margin-left: 0px;
}

#workskin .background1,
#workskin .background2,
#workskin .background3,
#workskin .background4,
#workskin .background5,
#workskin .background6,
#workskin .background7,
#workskin .background8,
#workskin .background9,
#workskin .background10 {
  width: 80%;
  height: 70%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: 1;
  margin-top: 3%;
  border-width: 5px;
  border-style: solid;
  -moz-border-image: -moz-linear-gradient(bottom, #95673a 3%, #bb9463 20%, #e0b56f 46%, #fbdca9 89%, #fdf3e2 99%);
  -webkit-border-image: -webkit-linear-gradient(bottom, #95673a 3%, #bb9463 20%, #e0b56f 46%, #fbdca9 89%, #fdf3e2 99%);
  border-image: linear-gradient(to top right, #784615 1%, #95673a 3%, #bb9463 20%, #e0b56f 46%, #fbdca9 50%, #EABE73 55%, #bb9463 67%, #e0b56f 76%, #fbdca9 95%, #fdf3e2 99%);
  -webkit-border-image-slice: 2;
  border-image-slice: 2;
}

#workskin .mobilescreen .background1,
#workskin .mobilescreen .background2,
#workskin .mobilescreen .background3,
#workskin .mobilescreen .background4,
#workskin .mobilescreen .background5,
#workskin .mobilescreen .background6,
#workskin .mobilescreen .background7,
#workskin .mobilescreen .background8,
#workskin .mobilescreen .background9,
#workskin .mobilescreen .background10 {
  margin: 0 auto;
  width: 580px;
  height: 330px;
  margin-top: -20px;
  margin-left: -250px;
}

#workskin .background1 {
  background-image: url("https://i.ibb.co/k02hVkT/bg-editar.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

#workskin .dialogue {
  width: 1000px;
  height: 900px;
  position: relative;
  z-index: 2;
}

#workskin .mobilescreen .dialogue {
  width: 580px;
  height: 350px;
}

#workskin .dialoguebox {
  background-image: url("https://i.ibb.co/ykhh8jH/d.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 88%;
  height: 25%;
  margin-top: 35.5%;
  left: -1px;
  overflow: hidden;
  opacity: .9;
  z-index: 2;
  position: absolute;
  display: inline-block;
}

#workskin .mobilescreen .dialoguebox {
  width: 590px;
  height: 405px;
  margin-top: 60px;
}

#workskin .character1 {
  z-index: 1;
  height: 54%;
  margin-top: 6%;
  margin-left: 48%;
  position: absolute;
}

#workskin .mobilescreen .character1 {
  height: 300px;
  margin-top: 20px;
  margin-left: 340px;
}

#workskin .character2 {
  z-index: 1;
  height: 54%;
  margin-top: 6%;
  margin-left: -1%;
  position: absolute;
}

#workskin .mobilescreen .character2 {
  height: 300px;
  margin-top: 20px;
  margin-left: 15px;
}

#workskin .mc {
  z-index: 3;
  height: 28%;
  left: -1%;
  margin-top: 29%;
  position: absolute;
}

#workskin .mobilescreen .mc {
  height: 160px;
  left: -3px;
  margin-top: 155px;
}

#workskin .next {
  background: url("https://i.ibb.co/5npXBfg/proximo.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: 3;
  height: 5.5%;
  width: 5.5%;
  margin-top: 49%;
  position: absolute;
  margin-left: 82%;
}

#workskin .next:hover {
  background: url("https://i.ibb.co/cc0VqZV/proximo-hover.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

#workskin .mobilescreen .next,
#workskin .mobilescreen .next:hover {
  height: 50px;
  width: 50px;
  margin-top: 263px;
  margin-left: 530px;
}

#workskin .dialoguetext {
  color: #FEFFFF;
  position: absolute;
  display: inline-block;
  height: 9.5%;
  width: 57%;
  margin-top: 44%;
  margin-left: 22%;
  text-indent: 8%;
  z-index: 3;
  font-size: 1.2em;
  line-height: 1.1em;
  text-shadow: 0px 0px 0 #281F13, 0px 0px 0 #524C39, 0px 0px 0 #524C39, 1.5px 1px .8px #0D1016;
  letter-spacing: .04em;
  text-align: justify;
  overflow: hidden;
}

#workskin .mobilescreen .dialoguetext {
  margin-top: 243px;
  margin-left: 138px;
  font-size: 1em;
  line-height: 1.1em;
  text-indent: 35px;
  height: 60px;
  width: 390px;
}

#workskin .name {
  color: #FBF5CE;
  position: absolute;
  display: inline-block;
  height: 20%;
  width: 30%;
  margin-top: 39.8%;
  margin-left: 26.5%;
  z-index: 4;
  font-size: 1.6em;
  text-align: left;
  line-height: 1.3em;
  text-shadow: 0px 0px 0 #281F13, 0px 0px 0 #524C39, 0px 0px 0 #524C39, 1.5px 1px .8px #281F13;
  font-weight: bold;
}

#workskin .mobilescreen .name {
  margin-top: 218px;
  margin-left: 172px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .choice1 {
  background: url("https://i.ibb.co/3SWscMD/escolha.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 60%;
  height: 10%;
  margin-top: 7%;
  margin-left: 13%;
  color: #ffffff;
  position: absolute;
  z-index: 4;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.2em;
}

#workskin .mobilescreen .choice1,
#workskin .mobilescreen .choice1:hover {
  width: 420px;
  height: 70px;
  margin-top: 20px;
  margin-left: 80px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .choice2 {
  background: url("https://i.ibb.co/3SWscMD/escolha.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 60%;
  height: 10%;
  margin-top: 15%;
  margin-left: 13%;
  color: #ffffff;
  position: absolute;
  z-index: 4;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.2em;
}

#workskin .mobilescreen .choice2,
#workskin .mobilescreen .choice2:hover {
  width: 420px;
  height: 70px;
  margin-top: 70px;
  margin-left: 80px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .choice3 {
  background: url("https://i.ibb.co/3SWscMD/escolha.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 60%;
  height: 10%;
  margin-top: 23%;
  margin-left: 13%;
  color: #ffffff;
  position: absolute;
  z-index: 4;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.2em;
}

#workskin .mobilescreen .choice3,
#workskin .mobilescreen .choice3:hover {
  width: 420px;
  height: 70px;
  margin-top: 120px;
  margin-left: 80px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .choice4 {
  background: url("https://i.ibb.co/3SWscMD/escolha.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 60%;
  height: 10%;
  margin-top: 31%;
  margin-left: 13%;
  color: #ffffff;
  position: absolute;
  z-index: 4;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.2em;
}

#workskin .choice1:hover,
#workskin .choice2:hover,
#workskin .choice3:hover,
#workskin .choice4:hover {
  background: url("https://i.ibb.co/DGGBy6g/escolha-hover.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #000000;
  position: absolute;
  z-index: 4;
}

#workskin .mobilescreen .choice4,
#workskin .mobilescreen .choice4:hover {
  width: 420px;
  height: 70px;
  margin-top: 170px;
  margin-left: 80px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .choicetext {
  display: table;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

#workskin .choicetext2 {
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  width: 80%;
  text-align: center;
}

#workskin .mobilescreen .choicetext {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
}

#workskin .mobilescreen .choicetext2 {
  width: 350px;
}

#workskin .actionnarrative {
  color: #FEFFFF;
  position: absolute;
  display: inline-block;
  height: 12%;
  width: 73.5%;
  margin-top: 41.8%;
  margin-left: 5.5%;
  text-indent: 8%;
  z-index: 3;
  font-size: 1.2em;
  text-align: justify;
  line-height: 1.1em;
  text-shadow: 0px 0px 0 #281F13, 0px 0px 0 #524C39, 0px 0px 0 #524C39, 1.5px 1px .8px #0D1016;
  letter-spacing: .04em;
  overflow: hidden;
}

#workskin .mobilescreen .actionnarrative {
  margin-top: 225px;
  margin-left: 39px;
  font-size: 1em;
  line-height: 1.1em;
  text-indent: 35px;
  height: 75px;
  width: 490px;
}

#workskin .namechar {
  color: #FBF5CE;
  position: absolute;
  display: inline-block;
  height: 20%;
  width: 30%;
  margin-top: 39.8%;
  margin-left: 11.5%;
  z-index: 4;
  font-size: 1.6em;
  text-align: left;
  line-height: 1.3em;
  text-shadow: 0px 0px 0 #281F13, 0px 0px 0 #524C39, 0px 0px 0 #524C39, 1.5px 1px .8px #281F13;
  font-weight: bold;
}

#workskin .mobilescreen .namechar {
  margin-top: 218px;
  margin-left: 74px;
  font-size: 1.1em;
  line-height: 1em;
}

#workskin .dialoguetextchar {
  color: #FEFFFF;
  position: absolute;
  display: inline-block;
  height: 9.5%;
  width: 73.5%;
  margin-top: 44%;
  text-indent: 8%;
  margin-left: 5.5%;
  z-index: 3;
  font-size: 1.2em;
  text-align: justify;
  line-height: 1.1em;
  text-shadow: 0px 0px 0 #281F13, 0px 0px 0 #524C39, 0px 0px 0 #524C39, 1.5px 1px .8px #0D1016;
  letter-spacing: .04em;
  overflow: hidden;
}

#workskin .mobilescreen .dialoguetextchar {
  margin-top: 243px;
  margin-left: 39px;
  font-size: 1em;
  line-height: 1.1em;
  text-indent: 35px;
  height: 60px;
  width: 490px;
}

#workskin .audiobox2 {
  margin-top: -69%;
  margin-left: 9%;
  height: 5.1%;
  width: 5.1%;
  background-image: url("https://i.ibb.co/pf0TQXt/audio.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  padding-top: 5px;
}

#workskin .mobilescreen .audiobox2 {
  margin: 0 auto;
  height: 50px;
  width: 50px;
  margin-top: -167px;
  margin-left: 244px;
}

#workskin .audiobox2:hover {
  background-image: url("https://i.ibb.co/nCf09xp/audio-hover.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}