/*Sample CSS file*/

/*Global Styling*/

body {
    box-sizing: border-box;
    font-size: 15pt;
    font-family: "Lexend Deca", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
}

h1 {
  font-size: 150pt;
}

h2 {
    font-family: "Hepta Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.Lalign {
    direction: rtl;
}

.nomarg {
    margin: 0;
}

.cself {
    justify-self: center;
}

.fatface {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
}
.handwrite {
    font-family: "Caveat";
    font-style: normal;
}

.crimson {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
}

.slab {
  font-family: "Hepta Slab", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Grids */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.col1 {
    grid-column-end: span 12;
}

.col2 {
    grid-column-end: span 6;
}

.col3 {
    grid-column-end: span 4;
}

.col4 {
    grid-column-end: span 3;
}

.col6 {
    grid-column-end: span 2;
}

.col9 {
    grid-column-end: span 8;
}

.row1 {
    grid-row-end: span 1;
}

.row2 {
    grid-row-end: span 2;
}

.row3 {
    grid-row-end: span 3;
}

.row4 {
    grid-row-end: span 4;
}

.row9 {
    grid-row-end: span 9;
}
/* Scaling */
.totalcenter {
    width: 900px; 
    grid-column-start: 4;
}

.images {
    width: 100%;
    
}

/* Section Specific Styling */

/* Collage */
.collage {
    grid-column-gap: 10pt;
}

#titleA {
    padding-left: 50pt;
    margin: 0;
    margin-top:50pt
}

.titleB {
    padding-left: 100pt;
    padding-top: 0;
    margin: 0;
}

.subtitle {
    font-weight: 100;
    margin: 25pt;
    justify-self: center;
}

.collageitem{
    border: solid 2pt;
}
/* Biography */

.biobg {
    margin: 0;
    margin-top: 50px;
    height: 900px;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    background-image: url(/imgs/WhoIsHerb.JPG);
}

.biotxt {
    grid-row-start: 10;
    grid-row-end: span 4;
    grid-column-end: span 10;
    padding-left: 10px;
}

.biotitle {
    grid-row-start: 2;
    grid-row-end: span 6;
    grid-column-start: 6;
    grid-column-end: span 6;
    font-size: 22pt;
    justify-self: center; 
}

/* Quote1 */

.quote1 {
    height: 500px;
    width: 900px;
    transform: translateY(-200pt);
}

.qmark1 {
    justify-self: center;
    font-size: 250pt;
    transform: translateY(146pt) translateX(-36pt);
}

.quote1A {
    font-size: 80pt;
    justify-self: center;
}

.quote1B {
    font-size: 48pt;
    justify-self: center;
}

.quote1fix {
    letter-spacing: 4pt;
}

/* Page 2 start (MAGAZINE); */

/* Avant Desc */

.avant{
    height: 1354px;
    transform: translateY(-200pt);
    display: grid;
    grid-template-rows: repeat(12, 1fr);
}

.avantA {
    font-size: 350pt;
    margin: 0;
    letter-spacing: 0;
    line-height: 0;
    grid-column-end: span 10;
    color: red;
    
}

.avantB {
    font-size: 350pt;
    margin: 0;
    padding: 0;
    letter-spacing: -21pt;
    line-height: 0;
    grid-column-end: span 8;
    transform: translateY(-445pt);
    color: red;
}

.avantC {
    font-size: 300pt;
    margin: 0;
    padding: 0;
    letter-spacing: 21pt;
    line-height: 0;
    grid-column-end: span 11;
    transform: translateY(-860pt);
    color: blue;
}

.avantD {
    font-size: 300pt;
    margin: 0;
    letter-spacing: 0;
    line-height: 0;
    grid-column-end: span 10;
    transform: translateY(-1727pt);
    color: blue;
}
.avanttxt {
    grid-column-end: span 3;
    transform: translateY(-1517pt) translateX(457pt);
    line-height: 17.5pt;
}

/* Avant Examples */

.avantcovers {
    grid-template-rows: repeat(12, 1fr);
}

.avantex1 {
    grid-column-end: span 4;
    grid-column-start: 9;
    grid-row-end: span 3;
}

.avantex2 {
    grid-column-end: span 4;
    grid-column-start: 6;
    grid-row-end: span 3;
}

.avantex3 {
    grid-column-end: span 4;
    grid-column-start: 3;
    grid-row-end: span 3;
}

.avantex4 {
    grid-column-end: span 4;
    grid-column-start: 1;
    grid-row-end: span 3;
}

/* EROS */

.eroscontainer{
    justify-self: end;
    padding-right: 50pt;
    width: 600px;
    grid-gap: 10pt;
}

.erostitle {
    font-size: 200pt;
    margin: 0;
    justify-self: center;
}

/* Quote 2 */

.quote2box {
    height: 700px;
    margin-top: 50px;
    
}

.quote2 {
    align-content: center;
    font-size: 33pt;
     
    transform: translateY(-116pt) translateX(4pt);
}

.qmark2 {
    font-size: 224pt;
    margin: 0;
    transform: translateY(116pt) translateX(22pt);
}

.quote2A {
    font-size: 75pt;
    letter-spacing: -6pt;
    margin: -5pt;
    font-weight: 500;
}

.quote2B {
    font-size: 55pt;
    letter-spacing: 1pt;
    margin: 0;
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* contributions */

.contrigrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    height: 1000px;
}

.contrib {
    grid-column-start: 8;
    grid-column-end: span 5;
    grid-row-end: span 11;
    grid-row-start: 2;
}

.contribtitle {
    grid-column-start: 5;
    grid-column-end: span 8;
    grid-row-end: span 1;
    grid-row-start: 1;
    height: 100%;
}

.fonttitle {
    font-weight: 600;
    margin: 0;
    margin-top: 25pt;
}

.fontdesc {
    line-height: 18pt;
    margin: 0;
    margin-bottom: 18pt;
}

.herbfontsiv {
    grid-row-end: span 12;
    grid-column-end: span 4;
}