@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400&family=Courgette&family=Goblin+One&display=swap');

/*
font-family: 'Averia Serif Libre', cursive;
font-family: 'Courgette', cursive;
font-family: 'Goblin One', cursive;
*/

body {
  background: #926637;
}

h2 {
  font-size: 32px;
  margin-bottom: 22px;
}

.card {
  padding: 12px;
}

.darkframe {
  padding: 3px;
  background: #643f25;
  margin-bottom:3px;
  border-radius: 4px;
}

.sectionstart {
  background: #dfcb99;
  padding: 48px 48px 48px 48px;
  font-family: 'Averia Serif Libre';
}

.section {
  background: #dfcb99;
  padding: 0px 48px 48px 48px;
  font-family: 'Averia Serif Libre';
}

.intro {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-top: #b47644 6px solid;
}


.starttext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-top: #b47644 6px solid;
  /* border-right: #b47644 6px solid; */
  /* border-left: #b47644 6px solid; */
}

.arrival {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  /* border-top: #b47644 6px solid; */
  border-right: #b47644 6px solid; 
  border-left: #b47644 6px solid; 
}

.report {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-bottom: #398418 6px solid;
  border-right: #b47644 6px solid; 
  border-left: #b47644 6px solid; 
}

.reporttext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #b47644 6px solid;
  border-left: #b47644 6px solid;
}


.travel {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #b47644 6px solid;
  border-left: #b47644 6px solid;
}

.traveltext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #b47644 6px solid;
  border-left: #b47644 6px solid;
}

.travelevent {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #aa1e1e 12px solid;
  border-left: #aa1e1e 12px solid;
}

.fighttext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #aa1e1e 12px solid;
  border-left: #aa1e1e 12px solid;
}

.arrivaltext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #b47644 6px solid;
  border-left: #b47644 6px solid;
}

.victorytext {
  background: #643f25;
  padding: 24px;
  color: #fff;
  font-size: 24px;
  border-right: #398418 12px solid;
  border-left: #398418 12px solid;
}

.victorytext h2 {
  color: #a7e47d;
}

.dialog {
  color: #f5d489;
  font-size: 24px;
  padding-right: 12px;
  border-right: #cca038 12px solid;
}

.dialogright {
  color: #f5d489;
  font-size: 24px;
  padding-right: 12px;
  border-right: #cca038 12px solid;
}

.dialogiconright{
  background: #643f25;
  text-align: center;
}

.react {
  color: #fff;
  font-size: 24px;
  padding-left: 12px;
  border-left: #8d933d 12px solid;
}

.dialogleft {
  color: #fff;
  font-size: 24px;
  padding-left: 12px;
  border-left: #8d933d 12px solid;
}

.dialogtext {
  background: #643f25;
  padding: 24px;
}

.dialogtextright {
  background: #643f25;
  padding: 24px;
  border-radius: 18px 0px 0px 18px;
}

.dialogtextleft {
  background: #643f25;
  padding: 24px;
  border-radius: 0px 18px 18px 0px;
}

.butt-act {
  border-radius: 9px;
  padding: 8px 16px;
  border: 4px #351702 solid;
  color: #351702;
}

.butt-pro {
  background: #9eb52f;
}
.butt-pro:hover {
  background: #cce167;
}

.butt-con {
  background: #d75959;
}
.butt-con:hover {
  background: #ee9191;
}

.butt-equ {
  background: #45a0ae;
}
.butt-equ:hover {
  background: #78ccd9;
}

/* -- Progress Bar Start -- */

.conprobar {
  margin: 32px auto;
  /* width: 500px; */
  text-align: center;
}

.progress {
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  height: auto;
}

.progress-bar {
  height: 18px;
	background-color: #ee303c;
  border-radius: 4px;
  transition: 0.4s linear;
  transition-property: width, background-color;
}

.progress-striped .progress-bar {
  background-color: #FCBC51;
  width: 1%;
  background-image: linear-gradient(
        45deg, rgb(252,163,17) 25%,
        transparent 25%, transparent 50%,
        rgb(252,163,17) 50%, rgb(252,163,17) 75%,
        transparent 75%, transparent);
/*  animation: progressAnimationStrike 6s; */
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 100% }
}

/* -- Progress Bar End -- */

/* .card-bright {
  background: #dfcb99;

 .card-body {
  background: #643f25;
  margin-bottom: 24px;
}

 .card-body-noborder {
  border: none;
}

 .start {
  background: #dfcb99;
  border: 1px solid #eae2c3;
  border-top: 1px solid #b47644;
  border-left: 1px solid #b47644;
  padding: 48px;
}

 .start-text {
  background: #7b592e;
  font-family: 'Averia Serif Libre';
  color: #fff;
  font-size: 24px;
}

 .start-text h3 {
  font-size: 28px;
}

.card-body-diaright {
  background: #7b592e;
  font-family: 'Averia Serif Libre';
  color: #fff;
  font-size: 24px;
  width: 75%;
} */