/**** THE HUMAN DOCUMENT ****/


/********** Structure */
.page {
    margin: auto;
    width: 80em;
    height: 60em;
    overflow: hidden;
    background-size: 100% 100%;
    position: relative;
}


.page-margin {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.page-margin.not(text-area){
    box-sizing: border-box;
    position: relative;
}

.content {
    margin: 0 auto;
    max-width: 500px;
    margin: auto;
    padding: 10px;  
}

/********** A Humument */

.Humument {
    /* visibility: hidden; */
}

.alt_title {
    position: absolute;
    display: block;
    top: 55px;
    bottom: 0;
    margin: auto;
    width: 390px;
    text-align: justify;
    z-index: 2;
    /* visibility: hidden; */
}

h1#A_Humument {
    font-size: 35px;
}

.alt_subtitle {
    position: absolute;
    display: block;
    top: 235px;
    bottom: 0;
    margin: auto;
    width: 390px;
    text-align: justify;
    z-index: 2;
    /* visibility: hidden;*/
}
.title#New_Edition {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 390px;
    text-align: justify;
    z-index: 3;
    /*  visibility: hidden; */
}

h2#New_Edition {
    font-family: Old English Text MT;
    text-transform: none;
    font-size: 18px;
    z-index: 3;
}

/*********** Painting */

.overlay-blue {
   position: absolute; 
    display: block;
    width: 415px;
    height: 500px;
    top: 185px;
    bottom: 0px;
    right: 0px;
    left: -130px;
    margin: auto;
    background-image: url('blue texture.png'); 
    z-index: 1;
    clip-path: url(#Rivers); 
}

.outline {
    position: absolute;
    display: block;
    width: 415px;
    /* height: 500px; */
    top: 310px;
    bottom: 0px;
    right: 0px;
    left: 29px;
    margin: auto;
    background-image: url(outlines.png);
    z-index: 2;
    background-repeat: no-repeat;
}

#Rivers {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    top: 300px;
    bottom: 0px;
    margin: auto;
}

#River_I {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    top: 300px;
    bottom: 0px;
    margin: auto;
}

.stroke.s1 {
    position: absolute;
    display: block;
    top: 0px;
    bottom: 415px;
    left: 0;
    right: 110px;
    margin: auto;
    height: 25px;
    width: 90px;
    z-index: 1;
    background-color: white;
}

/*  Border */

.stroke.s2 { 
    position: absolute;
    display: block;
    width: 25px;
    height: 477px;
    top: 209px;
    bottom: 0px;
    right: 0px;
    left: -525px;
    margin: auto;
    z-index: 1;
    background-color: rgb(83,46,53);
    opacity: 0.9;
}

.stroke.s3 { 
    position: absolute;
    display: block;
    width: 25px;
    height: 93px;
    top: 660px;
    bottom: 0px;
    right: 0px;
    left: -409px;
    margin: auto;
    z-index: 1;
    transform: rotate(90deg);
}

.stroke.s3.gradient {
    background-image:
    linear-gradient(
    #753d40, 
    rgb(83,46,53) 60%);
    opacity: 0.9;

}

.stroke.s4 { 
    position: absolute;
    display: block;
    width: 15px;
    height: 55px;
    top: 650px;
    bottom: 0px;
    right: 0px;
    left: -262px;
    margin: auto;
    z-index: 1;
    transform: rotate(90deg);
}

.stroke.s4.gradient {
    background-image:
    linear-gradient(rgb(117,61,64), rgb(103,64,67) 80%);
    opacity: 0.9;
}

.stroke.s5 { 
position: absolute;
    display: block;
    width: 15px;
    height: 37px;
    top: 670px;
    bottom: 0px;
    right: 0px;
    left: -134px;
    margin: auto;
    z-index: 1;
    background-color: rgb(157,57,59);
    transform: rotate(90deg);
    opacity: 0.9;
}

.stroke.s6{ 
    position: absolute;
    display: block;
    width: 25px;
    height: 192px;
    top: 660px;
    bottom: 0px;
    right: 0px;
    left: 93px;
    margin: auto;
    z-index: 1;
    transform: rotate(90deg);
}

.stroke.s6.gradient {
    background-image:
    linear-gradient(#823b49 50%,
    #b44637,
    rgb(157,57,59)                 
                    );
    opacity: 0.9;
}

.stroke.s7 { 
    position: absolute;
    display: block;
    width: 25px;
    height: 158px;
    top: 478px;
    bottom: 0px;
    right: 0px;
    left: 260px;
    margin: auto;
    z-index: 2;
    clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
}

.stroke.s7.gradient {
    background-image:
    linear-gradient(
    #45383f,
    rgb(130,59,73)
                    );
    opacity: 0.9;
}

.stroke.s8 { 
    position: absolute;
    display: block;
    width: 24px;
    height: 25px;
    top: 253px;
    bottom: 0px;
    right: 0px;
    left: 286px;
    margin: auto;
    z-index: 2;
    opacity: 0.9;
    border-bottom: 25px solid #45383f;
    border-left: 0px solid transparent;
    border-right: 25px solid transparent;
    transform: rotate(90deg);
}

.stroke.s9 { 
    position: absolute;
    display: block;
    width: 26px;
    height: 25px;
    top: 105px;
    bottom: 0px;
    right: 0px;
    left: 285px;
    margin: auto;
    z-index: 2;
    opacity: 0.9;
    border-bottom: 25px solid #45383f;
    border-left: 25px solid transparent;
    border-right: 0px solid transparent;
    transform: rotate(90deg);
}

.stroke.s10 { 
    position: absolute;
    display: block;
    width: 25px;
    height: 152px;
    top: 0px;
    bottom: 112px;
    right: 0px;
    left: 260px;
    margin: auto;
    z-index: 2;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 84%);
}

.stroke.s10.gradient {
background-image: linear-gradient( 
    rgb(83,46,53), 
    #45383f 
    );
    opacity: 0.9;
}

.stroke.s11 { 
    position: absolute;
    display: block;
    width: 4px;
    height: 25px;
    top: 0px;
    bottom: 290px;
    right: 0px;
    left: 280px;
    margin: auto;
    z-index: 1;
    background-color: rgb(83,46,53);
    opacity: 0.9;
}

.stroke.s12 { 
   position: absolute;
    display: block;
    width: 418px;
    height: 25px;
    top: 0px;
    bottom: 290px;
    right: 0px;
    left: -133px;
    margin: auto;
    z-index: 1;
    opacity: 0.9;
    clip-path: url(#Rivers);
}

.stroke.s12.gradient {
    background-image:
    linear-gradient( to left, 
    rgb(83,46,53),
    #a3322e,
    rgb(83,46,53) 70%
    );
    opacity: 0.9;
}

.stroke.s13 {
    position: absolute;
    display: block;
    width: 25px;
    height: 300px;
    top: 0px;
    bottom: 120px;
    right: 0px;
    left: 89px;
    margin: auto;
    z-index: 1;
    transform: rotate(135deg);
    clip-path: url(#River_now_read);   
}

.stroke.s13.gradient { 
background-image: linear-gradient( #edc436 5%, 
#e8833b 20%, 
#c25735 60%, 
rgb(157,57,59) 80%);
    opacity: 0.9;
}

.stroke.s14 { 
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 0px;
    bottom: 265px;
    left: 600px;
    margin: auto;
    z-index: 1;
    border-left: 25px solid transparent;
    border-right: 25px transparent;
    border-bottom: 25px solid rgb(157,57,59);
    opacity: 0.9;
    transform: rotate(45deg);
}

.stroke.s15 {
    position: absolute;
    display: block;
    width: 25px;
    height: 128px;
    top: 110px;
    bottom: 0px;
    right: 0px;
    left: 320px;
    margin: auto;
    z-index: 1;
    transform: rotate(135deg);
}

.stroke.s15.gradient { 
    background-image: linear-gradient(
    rgba(237,196,54,1)70%, 
    rgba(237,196,54,0.1) );
}

.stroke.s16 { 
    position: absolute;
    display: block;
    width: 440px;
    height: 25px;
    top: 0;
    bottom: -180px;
    right: 0px;
    left: -47px;
    margin: auto;
    z-index: 1;
    clip-path: url(#River_on);   
}

.stroke.s16.gradient {
    background-image: linear-gradient( to left,
    rgba(237,196,54,1) 7%, 
    rgba(228,166,57,0.9), 
    rgba(201,83,53,0.9), 
   rgba(199,76,35,0.9), 
   rgba(163,50,46,0.9), 
    rgba(153,53,51,0.9), 
    rgba(126,44,56,0.9), 
    rgba(83,46,53,0.9)
    );
}

.stroke.s17 { 
    position: absolute;
    display: block;
    width: 7px;
    height: 25px;
    top: 0;
    bottom: -180px;
    right: 0px;
    left: -493px;
    margin: auto;
    z-index: 1;
    clip-path: url(#River_on);
    background-color: rgb(83,46,53);
    opacity: 0.9;
}

.stroke.s18 {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 636px;
    bottom: 0px;
    left: 595px;
    margin: auto;
    z-index: 1;
    border-left: 25px solid transparent;
    border-right: 25px transparent;
    border-bottom: 25px solid rgb(157,57,59);
    opacity: 0.9;
    transform: rotate(225deg);
}


.stroke.s19 { 
   position: absolute;
    display: block;
    width: 25px;
    height: 295px;
    top: 410px;
    bottom: 0px;
    right: 0px;
    left: 160px;
    margin: auto;
    z-index: 1;
    transform: rotate(45deg);
}

.stroke.s19.gradient {
   background-image: linear-gradient( 
   rgba(237,196,54,1) 30%, 
   rgba(232,131,59,0.9), 
   rgba(194,87,53,0.9), 
   rgba(157,57,59, 0.9) 
   );
}

.stroke.s20 { 
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 180px;
    bottom: 0px;
    left: 790px;
    margin: auto;
    z-index: 1;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
    border-bottom: 47px solid #edc436;
    transform: rotate(90deg);
}

/********** A Human Document */
.text-block {
   padding-top: 220px;
   padding-bottom: 70px;
   width: 390px;
}

div.text {
text-align:justify; 
text-align-last: justify;
}

lb::before {
    content: '\a';
    white-space: pre;
}


h1, h2 {
   text-align: center;
} 

h1 { font-family: Georgia, Times, "Times New Roman", serif; font-size: 20px; font-style: normal; font-variant: normal; text-transform: uppercase; font-weight: 100; line-height: 26.4px; letter-spacing: 0.1em; margin-bottom: 25px;} 
h2 { font-family: Georgia, Times, "Times New Roman", serif; font-size: 16px; font-style: normal; font-variant: normal; text-transform: uppercase; font-weight: 100; line-height: 15.4px; margin-top: 25px;} 
p { font-family: Georgia, Times, "Times New Roman", serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px;}

p {
text-indent: 15px;
margin: 0;

}