html, body {
    font-family: 'eczarregular';
    color: rgb(75,40,10);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
iframe {
    width: 111%;
    height: 100vh;
}
.left {
    color: rgb(75,40,10);
    text-align: left;
    width: 90%;
    margin: auto;
}
section {
    float: left;
    display: block;
    height: 100%;
    width: 100vw;
    padding: 0;
    margin: 0;
}
.horizon-prev, .horizon-next {
    position: fixed;
    top: 50%;
    margin-top: -24px;
    z-index: 9999;
    cursor: pointer;
}
.horizon-prev {
    left: 20px;
}
.horizon-next {
    right: 20px;
}
.prog {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
}
.finalprog {
    top: 200px;
}
    
}
body {
    color: rgb(75,40,10);
    font-family: 'eczarregular';
}
.bg {
    width: 100%;
    height: 100vh;
    background-image: url(../img/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.attribute p {
    color: rgb(75,40,10);
    text-align: center;
    font-size: 1.1em;
    width: 40px;
    margin: auto;
    height: 15px;
    padding: 5px;
    border: 2px solid rgb(75,40,10);
    border-radius: 20px;
}
.rerollimg {
    margin: 6px 0px -6px;
    width: 25px;
}
.reroll {
    cursor: pointer;
    color: rgb(235,225,200);
    background-color: rgb(75,40,10);
    border-radius: 20px;
    margin: auto;
    padding-bottom: 7px;
    text-align: center;
    width: 100px;
    height: 30px;
}
.attname {
    color: rgb(75,40,10);
    text-align: center;
    width: 26.6;
    margin: auto;
    padding-top: 25px;
}
h2 {
    font-family: 'eczarregular';
    padding-top: .5vw;
    margin-bottom: 5px;
}
.title {
    font-family: 'eczarregular';
    color: rgb(75,40,10);
    text-align: center;
    padding: 7.5vh 0 0 0;
}
.rollall {
    font-family: 'eczarregular';
    color: rgb(75,40,10);
    cursor: pointer;
    margin: auto;
    width: 82px;
    padding-top: 1vw;
}
.main {
    font-family: 'eczarregular';
    color: rgb(75,40,10);
    width: 35%;
    text-align: center;
    padding: 32.5vh 32.5% 0;
}
.rolldie {
    width: 50px;
    padding: 10px 15px;
}
.attributes {
    position: relative;
    margin: auto;
    width: 90%;
}
.spacer {
    height: 20px;
}
.attribute {
    display: inline-block;
    width: 26.6%;
    margin: 0 3.16%;
}
.races {
    margin: auto;
    padding-top: 5vh;
    width: 90%;
}
.race {
    display: inline-block;
    width: 250px;
    height: 20vh;
}
.racename {
    color: rgb(75,40,10);
    cursor: pointer;
    text-align: center;
    margin: auto;
    padding-bottom: 1vw;
}
.racename h4 {
    color: rgb(75,40,10);
}
.racename h4 span {
    font-family: 'eczarbold';
}
.classname h4 {
    color: rgb(75,40,10);
}
.classname h4 span {
    font-family: 'eczarbold';
}
.classes {
    margin: auto;
    padding-top: 5vh;
    width: 90%;
}
.class {
    display: inline-block;
    width: 185px;
    height: 20vh;
}
.classname {
    color: rgb(75,40,10);
    cursor: pointer;
    text-align: center;
    margin: auto;
    padding-bottom: 1vw;
}
.alignments {
    margin: auto;
    padding-top: 5vh;
    width: 90%;
}
.alignment {
    display: inline-block;
    width: 32%;
    height: 20vh;
}
.alignname {
    color: rgb(75,40,10);
    cursor: pointer;
    text-align: center;
    margin: auto;
    padding-bottom: 1vw;
}
.detailcont {
    margin: auto;
    padding-top: 5vh;
    width: 90%;
}
.detail {
    display: inline-block;
    width: 100%;
    margin: auto;
}
.chardetail {
    width: 90%;
}
.chardetail div{
    padding-top: 2vw;
    float: left;
    display: inline-block;
}
.chardetail div h3 {
    padding: 0;
    margin: 0;
}
.charfeature {
    width: 30%;
}
.charfeature input {
    width: 40%;
}
.name {
    width: 100%;
    padding-bottom: 20px;
}
.finalstats {
    text-align: left;
    color: rgb(75,40,10);
    margin: auto;
    padding-bottom: 1vw;
    width: 35%;
}
.finalstats h4 {
    text-align: left;
    display: inline-block;
    margin: auto;
    width: 150px;
    padding: 5px 10px;
}
.finalstats span {
    font-family: 'eczarsemibold';
}
input {
    color: rgb(75,40,10);
    font-family: 'eczarregular';
    padding: 5px 10px;
    margin: 5px 40px 5px 10px;
    width: 250px;
    display: inline-block;
    border: 1px solid rgb(75,40,10);
    border-radius: 50px;
    background-color: rgba(75,40,10,.2)
}
input::placeholder {
    color: rgb(75,40,10);
}
input[type=button]{
    border-radius: 50px;
    border: 2px solid rgb(75,40,10);
    font-family: 'eczarbold';
    margin: 5% 35%;
    width: 40%;
    text-align: center;
    display: inline-block;
    padding-top: 6px;
    cursor: pointer;
}
.received {
    color: rgb(235,225,200);
    background-color: rgb(75,40,10);
    border-radius: 20px;
}
.selected {
    color: rgb(235,225,200);
    background-color: rgb(75,40,10);
    border-radius: 20px;
    text-align: center;
    width: 100%;
    height: 24px;
}
.finatt {
    padding-top: 20px;
    margin: auto;
    width: 80%;
}
.prog h2 {
    margin: 5px 10px;
    color: rgb(75,40,10);
}
.wrapper {
    width: 90%;
    max-width: 900px;
    margin: auto;
}
.wrappermain {
    max-width: 900px;
    margin: auto;
}
.roll {
    margin-bottom: 15px;
}
.chardetail .submit {
    width: 50%;
    padding-top: 50px;
}
.finatt div {
    margin: 2% 2%;
    cursor: pointer;
}
.finatt p {
    width: 30%;
    margin: auto;
    padding-bottom: 5%;
}
#print_button1 {
    border-radius: 50px;
    border: 2px solid rgb(75,40,10);
    font-family: 'eczarbold';
    width: 25%;
    text-align: center;
    display: inline-block;
    padding-top: 3px;
}
#print_button2 {
    border-radius: 50px;
    border: 2px solid rgb(75,40,10);
    font-family: 'eczarbold';
    width: 25%;
    text-align: center;
    display: inline-block;
    padding-top: 3px;
}
#print_button3 {
    border-radius: 50px;
    border: 2px solid rgb(75,40,10);
    font-family: 'eczarbold';
    width: 25%;
    text-align: center;
    display: inline-block;
    padding-top: 3px;
}
.hide {
    display: none;
}
.clear {
    clear: both;
}


/*

************************ Forms CSS ************************

*/

.backgroundimage {
    width: 736px;
    height: 954px;
}
.hidden {
    display: none;
}
.form_one {
    position: relative;
    width: 736px;
    height: 954px;
}
.form_one div {
    position: absolute;
}

.form_two {
    position: relative;
    width: 736px;
    height: 954px;
}
.form_two div {
    position: absolute;
}

.form_three {
    position: relative;
    width: 736px;
    height: 954px;
}
.form_three div {
    position: absolute;
}


.check {
    width: 10px;
    font-size: 1.2em;
    margin-left: -2px;
    margin-top: -9px;
}
.text {
    text-align: center;
    width: 30px;
    font-size: .9em;
}
.para {
    font-size: .9em;
}


/*

************************ Form_One CSS ************************

*/


#formcharname {
    left: 70px;
    top: 66px;
}
#formcharclass {
    left: 327px;
    top: 47px;
}
#formcharrace {
    left: 327px;
    top: 79px;
}
#formcharalignment {
    left: 460px;
    top: 79px;
}
#formstr {
    left: 45px;
    top: 185px;
}
#formstrmod {
    left: 45px;
    top: 215px;
}
#formdex {
    left: 45px;
    top: 275px;
}
#formdexmod {
    left: 45px;
    top: 304px;
}
#formcon {
    left: 45px;
    top: 364px;
}
#formconmod {
    left: 45px;
    top: 393px;
}
#formint {
    left: 45px;
    top: 454px;
}
#formintmod {
    left: 45px;
    top: 482px;
}
#formwis {
    left: 45px;
    top: 543px;
}
#formwismod {
    left: 45px;
    top: 572px;
}
#formcha {
    left: 45px;
    top: 630px;
}
#formchamod {
    left: 45px;
    top: 660px;
}
#formprofbonus {
    left: 110px;
    top: 194px;
}
#formsavingstr {
    left: 116px;
    top: 241px;
}
#formsavingdex {
    left: 116px;
    top: 258px;
}
#formsavingcon {
    left: 116px;
    top: 275px;
}
#formsavingint {
    left: 116px;
    top: 292px;
}
#formsavingwis {
    left: 116px;
    top: 308px;
}
#formsavingcha {
    left: 116px;
    top: 325px;
}
#formsavingstrmod {
    left: 122px;
    top: 236px;
}
#formsavingdexmod {
    left: 122px;
    top: 253px;
}
#formsavingconmod {
    left: 122px;
    top: 269px;
}
#formsavingintmod {
    left: 122px;
    top: 286px;
}
#formsavingwismod {
    left: 122px;
    top: 303px;
}
#formsavingchamod {
    left: 122px;
    top: 320px;
}
#formskill1 {
    left: 116px;
    top: 385px;
}
#formskill2 {
    left: 116px;
    top: 401px;
}
#formskill3 {
    left: 116px;
    top: 418px;
}
#formskill4 {
    left: 116px;
    top: 435px;
}
#formskill5 {
    left: 116px;
    top: 452px;
}
#formskill6 {
    left: 116px;
    top: 469px;
}
#formskill7 {
    left: 116px;
    top: 486px;
}
#formskill8 {
    left: 116px;
    top: 502px;
}
#formskill9 {
    left: 116px;
    top: 519px;
}
#formskill10 {
    left: 116px;
    top: 536px;
}
#formskill11 {
    left: 116px;
    top: 553px;
}
#formskill12 {
    left: 116px;
    top: 569px;
}
#formskill13 {
    left: 116px;
    top: 586px;
}
#formskill14 {
    left: 116px;
    top: 620px;
}
#formskill15 {
    left: 116px;
    top: 603px;
}
#formskill16 {
    left: 116px;
    top: 636px;
}
#formskill17 {
    left: 116px;
    top: 654px;
}
#formskill18 {
    left: 116px;
    top: 670px;
}
#formskill1mod {
    left: 122px;
    top: 379px;
}
#formskill2mod {
    left: 122px;
    top: 396px;
}
#formskill3mod {
    left: 122px;
    top: 413px;
}
#formskill4mod {
    left: 122px;
    top: 429px;
}
#formskill5mod {
    left: 122px;
    top: 446px;
}
#formskill6mod {
    left: 122px;
    top: 463px;
}
#formskill7mod {
    left: 122px;
    top: 480px;
}
#formskill8mod {
    left: 122px;
    top: 496px;
}
#formskill9mod {
    left: 122px;
    top: 513px;
}
#formskill10mod {
    left: 122px;
    top: 530px;
}
#formskill11mod {
    left: 122px;
    top: 547px;
}
#formskill12mod {
    left: 122px;
    top: 564px;
}
#formskill13mod {
    left: 122px;
    top: 581px;
}
#formskill14mod {
    left: 122px;
    top: 598px;
}
#formskill15mod {
    left: 122px;
    top: 614px;
}
#formskill16mod {
    left: 122px;
    top: 631px;
}
#formskill17mod {
    left: 122px;
    top: 648px;
}
#formskill18mod {
    left: 122px;
    top: 665px;
}
#formarmorclass {
    left: 281px;
    top: 168px;
}
#forminitiative {
    left: 352px;
    top: 174px;
}
#formspeed {
    left: 425px;
    top: 174px;
}
#formhp {
    left: 350px;
    top: 257px;
}
#formhitdie {
    left: 300px;
    top: 400px;
}
#formweapon1 {
    left: 265px;
    top: 474px;
}
#formweapbonus1 {
    left: 355px;
    top: 474px;
}
#formweapdmg1 {
    left: 415px;
    top: 474px;
}
#formweapon2 {
    left: 265px;
    top: 499px;
}
#formweapbonus2 {
    left: 355px;
    top: 499px;
}
#formweapdmg2 {
    left: 415px;
    top: 499px;
}
#formweapon3 {
    left: 265px;
    top: 525px;
}
#formweapbonus3 {
    left: 355px;
    top: 525px;
}
#formweapdmg3 {
    left: 415px;
    top: 525px;
}
#formwvarweapons {
    left: 265px;
    top: 545px;
    width: 208px;
}
#formfeatures {
    left: 505px;
    top: 465px;
    width: 199px;
}
#formproficiencies {
    left: 35px;
    top: 765px;
    width: 199px;
}


/*

************************ Form_Two CSS ************************

*/


#form2charname {
    left: 70px;
    top: 66px;
}
#form2age {
    left: 320px;
    top: 45px;
}
#form2height {
    left: 458px;
    top: 45px;
}
#form2weight {
    left: 580px;
    top: 45px;
}
#form2eyes {
    left: 320px;
    top: 77px;
}
#form2skin {
    left: 458px;
    top: 77px;
}
#form2hair {
    left: 580px;
    top: 77px;
}



/*

************************ Form_Three CSS ************************

*/


#form3charname {
    left: 75px;
    top: 73px;
}
#form3spellability {
    left: 350px;
    top: 60px;
}
#form3spelldc {
    width: 60px;
    left: 475px;
    top: 60px;
}
#form3spellatt {
    left: 619px;
    top: 60px;
}
#form3cantrip1 {
    left: 45px;
    top: 197px;
}
#form3cantrip2 {
    left: 45px;
    top: 215px;
}
#form3cantrip3 {
    left: 45px;
    top: 233px;
}
#form3cantrip4 {
    left: 45px;
    top: 250px;
}
#form3slots {
    left: 55px;
    top: 377px
}
#form3prep1 {
    left: 29px;
    top: 417px;
}
#form3prep2 {
    left: 29px;
    top: 435px;
}
#form3prep3 {
    left: 29px;
    top: 452px;
}
#form3prep4 {
    left: 29px;
    top: 469px;
}
#form3spell1 {
    left: 45px;
    top: 411px;
}
#form3spell2 {
    left: 45px;
    top: 428px;
}
#form3spell3 {
    left: 45px;
    top: 445px;
}
#form3spell4 {
    left: 45px;
    top: 462px;
}