<style>


html {
        margin: 0;
}

body {
    margin: 0px !important;
    /* margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important; */
    height: 100%;
    width: 100%;
    /* margin-bottom: 30px; */
    background-color: rgb(255, 255, 250);
}

/* ------------TITLE-------------------------- */

#waterBG {
    background-image: url("100yr_port_water_IMG_2571_crop1.png");
    background-size: 200%;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle;
}

#sandyTitle {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    color: rgb(255, 255, 242);
    font-family: Figtree;
    /* font-size: 2rem; */
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 50;
    text-align: center;
    /* vertical-align: middle; */
    letter-spacing: 2px;
    text-shadow: 0px 0px 2px #005a6a;
}

/* #sTitleOne {} */

#sTitleTwo {
    transform: rotate(180deg);
    opacity: 0.7;
}

#sTitleTwo h2, #sTitleOne h2{
    margin: 0;
}

.sandyIcon {
    height: 2.5rem;
}

.sandyTRule {
    border-top: 3px dotted rgb(255, 255, 248);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    width: 90%;
    margin: 5px auto;
}

.sandySub {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 3px;
    margin: 5% 0 5% 0;
}

/* ------------INTRO-------------------------- */

#introText {
    color: rgb(110 33 0);
    margin: auto;
    /* pt was 20px */
    padding: 1.25rem 0;
    font-size: 1.25rem;
    line-height: 1.8;
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    text-wrap: pretty;
    width: 90%;
    max-width: 650px;
}

.introLead {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 1.3rem;
    color: #005a6a;
}

.sandyRule {
    border-top: 1px dotted #58585b;
    width: 90%;
    max-width: 650px;
}

#sandyKey {
    margin: auto;
    
    padding: 20px 0px 20px 0px;
    width: 90%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 40% 60%;
    /* align-items: center; */
    border-top: 1px dotted #58585b;
    border-bottom: 1px dotted #58585b;
}

#keyCard: {
    aspect-ratio: 1/.66;
}

.keyText {
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400; font-size: 1.1rem; line-height: 1.3;
    color: #58585b;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.keyLead {
    font-weight: 600;
}

/* ------------INTRO MAP and BORO MAPS-------------------------- */

#fullSandyMap {
    width: 90%;
    max-width: 650px;
    aspect-ratio: 1/0.9;
    margin: auto;
}

.svgSandy {
    top: 0px;
    z-index: 200;
    filter: drop-shadow(0px 0px 2px rgba(143, 188, 139, 0.6));
    align-items: center;
    width: 100%;
    /* aspect-ratio: 1; */
aspect-ratio: 1/0.9;    
max-width: 650px;
}


.svgNeighbor {
    top: 0px;
    z-index: 200;
    filter: drop-shadow(0px 0px 2px rgba(143, 188, 139, 0.6));
    align-items: center;
    width: 100%;
    /* aspect-ratio: 1; */
/* aspect-ratio: 1/0.9;     */
max-width: 650px;
}

.neighbor {
    stroke: #58585b;
    fill: #9bcbe2;
    stroke-width: .5px;
    box-shadow: inset 0px 0px 10px 10px #000000;
}

.neighborOut {
    stroke: #58585b;
    stroke-width: .5px;
    fill: rgb(110, 33, 0);
    fill-opacity: 0;
    pointer-events: all;
}

.flood {
    fill: #005a6a;
    pointer-events: none;
    /* z-index: 100; */
}

.neighborGreen {
    stroke: green;
    fill: green;
    stroke-width: .5px;
    box-shadow: inset 0px 0px 10px 10px #000000;
}

.neighborOutRed {
    stroke: red;
    stroke-width: .5px;
    fill: rgb(110, 33, 0);
    fill-opacity: 0;
    pointer-events: all;
}

.floodRed {
    fill: red;
    pointer-events: none;
    /* z-index: 100; */
}


#NTATip {
    background-color: rgba(255,255,248,0.9) !important;
   width: 90px; padding-right: 10px !important;
   /* max-width: 100px; */
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    font-size: .8em !important; text-transform: uppercase;
    font-weight: 400; pointer-events: none;
    color: #58585b;
    border: none !important;
}

.tipNum{
    /* font-weight: 400;
    font-size: .65em !important;  */
}
.tipName {
    font-weight: 700;

}
.tipWater {
        color: #005a6a;
        font-weight: 700;
}

/* ------------RUNNING TEXT-------------------------- */

.runningText {
    color: #444444;
    margin: auto;
    /* padding-top: 20px; */
    padding: 1.25rem 0;
    font-size: 1.25rem;
    line-height: 1.8;
    font-family: 'Georgia', serif;
    text-wrap: pretty;
    width: 90%;
    max-width: 650px;
}

/* ------------LINE OF CARDS-------------------------- */

.allNTAs {
    margin: auto;
    padding-top: 8px;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Georgia', serif;
    font-weight: 600;
    letter-spacing: 2px;
    width: 100%;
    /* width: 90%; */
    /* max-width: 1000px; */
    text-align: center;
    color: rgb(110 33 0);
    border-top: 1px dotted #58585b;
}

.instHold {
    /* position: absolute; */
        text-align: center;
        position: relative;
    top: calc(50% - .75rem);
        text-transform: uppercase;
            letter-spacing: 1px;


    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* transform: translateX(50%); */
}

.instructNTA {
        /* margin: auto;
    text-align: center; */
    font-size: 1rem;
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.35;
    color: #58585b;
    margin: 1.5rem 0 1.5rem 0;
}


.linOCardHolder {
    width: 100%;
    overflow-x: auto;

  white-space: nowrap; /* Prevents text wrapping */
  position: relative; /* For arrow positioning */
    border-bottom: 1px dotted #58585b;

}



#bronx {
    width: 5970px;
        /* width: 100%; */

}

#bklyn {
    /* NEED TO ADDRESS THIS WDTH AT SOME POINT */
    width: 8200px;
        /* width: 100%; */

    /* width: 42000px; */
    /* overflow-x: hidden; */
}

#manh {
        /* width: 100%; */

    width: 4500px;
}

#queens {
        /* width: 100%; */

    width: 9760px;
}

#staten {
    /* NEED TO ADDRESS THIS WDTH AT SOME POINT */
        /* width: 100%; */
    width: 2760px;
    /* width: 42000px; */
    /* overflow-x: hidden; */
}


/* PUT COMMON BELOW IN LINOCARDS AND HEIGHT AND WIDTH IN INDIVIDUALS */

.linOCards {
    /* FOR PRINTING CHANGE THESE TWO */
    height: 170px;
    box-sizing: content-box;
    /* TO THESE TWO */
    /* height: auto;
    width: 100vw; */
    /* AND THEN TURN OFF FUNCTION FOR CARD PLACEMENT -- and make margin on testCard 20px 20px*/
    /* position: absolute; */
    /* margin: 60px auto; */
    /* display: inline-block; */
    vertical-align: top;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    /*THIS Creates HORIZONTAL*/
    overflow: scroll;
    overflow-y: hidden;
    /* display: flex; */
    flex-direction: row;
    justify-content: left;
    /* align-items: flex-start; */


  display: inline-block; 
  /* Allows content to stretch horizontally */


}

.scrollHold {
    height: 100%;
    position: relative;
    top: 0px;
    left: 0px;
      /* display: inline-block;  */
      /* Allows content to stretch horizontally */

}


.scroll-left, .scroll-right {
    color: whitesmoke;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  /* background-color: #eee; */
    background-color: #91b4ba;
    /* opacity: 50%; */
  border: none;
  cursor: pointer;
  z-index: 100;
  border-radius: 2px;
width: 30px;
height: 30px
}

.scroll-left {
  left: 20px;
}

.scroll-right {
  right: 20px;
}




.testCard {
    /* width: 600px;
    height: 400px; */
    display: inline-block;
    vertical-align: top;
    /*THIS Creates HORIZONTAL*/
    /* flex: none; */
    background-color: whitesmoke;
    box-shadow: 0px 0px 5px darkslategrey;
    /* margin: 20px 20px; */
    /* margin: 20px auto; */
    position: relative;
    /* top: 80px: */
    z-index: 100;
}

/* CHNAGE TO INNERCARD  */
.testInnerCard {
    /* width: 580px;
    height: 380px; */
    box-sizing: border-box;
    /* padding: 2% 2% 2% 2%; */
    /* margin: 2% auto; */
    /* position: absolute;
    left: 10px; */
}

/* CHANGE TO SKY */
.testSky {
    background-color: #9bcbe2;
    /* background-color: #A0C7DA; */
    /* margin: 10px auto 0px auto; */
    margin: 0px;
    /* border: 2px solid whitesmoke;
    box-sizing: border-box; */
    /* width: 100%; */
    /* FOR PRINTING - JUST TESTING IF REMOVING SECOND SHADOW HELPS WITH SOFT BLUE EDGE IN PRINT
    IT DOES NOT */
    /* box-shadow: inset 0px 3px 5px 3px whitesmoke, inset 0px 0px 50px lightskyblue; */
    /* box-shadow: inset 0px 2px 5px 5px whitesmoke, inset 0px 0px 50px 5px lightskyblue; */
    box-shadow: inset 0px 0px 2px 1px whitesmoke, inset 0px 0px 50px 5px lightskyblue;
    /* position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end; */
    /* opacity: 0.5; */
}

.holdSky {
    /* background-color: lightblue; */
    /* margin: 10px auto 0px auto; */
    margin: 0px;
    height: 100%;
    /* width: 100%; */
    /* box-shadow: inset 0px 3px 5px 5px whitesmoke, inset 0px 0px 50px 5px lightskyblue; */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    opacity: 0.8;
    /* opacity: 0.5; */
}


/* ------------CARD FIELDS-------------------------- */

.boroHolder {
    margin: auto;
    padding: 20px 0px 20px 0px;
    width: 90%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 40% 60%;
    /* justify-items: start; */
    align-items: center;
        /* border-top: 1px dotted #58585b; */
    border-bottom: 1px dotted #58585b;
}

.boroTitle {
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    font-weight: 500; font-size: .9rem; line-height: 1.3;
    text-transform: uppercase; letter-spacing: 1px; 
    color: #58585b;
}

.boroTitle h3 {
    font-size: 1.75rem;
    letter-spacing: 2px; margin: 0px; line-height: 1;
}
.boroSup {
    font-weight: 400;
    vertical-align: top; 
    position: relative;
    top:  0.2rem; 
    font-size: 1rem
}

.boroSupSm {
    font-weight: 400;
    vertical-align: top; 
    position: relative;
    top:  0rem; 
    font-size: .6rem
}

.boroMap {
    /* background-color: grey; */
}

.singCard {
    /* background-color: none; */
    background-color: rgb(239, 239, 228);
    /* height: 400px; */
width: 100%;
aspect-ratio: 1/.66;
    /* text-align: center; */
    position: relative;
    text-wrap: balance !important;
}

.notes {
    margin: auto;
    padding: 1rem 0;
    width: 90%;
    max-width: 650px;
    /* border-top: 1px dotted #58585b; */
    border-bottom: 1px dotted #58585b;
    font-family: "Figtree", Arial, sans-serif;
    font-size: .85rem;
}

.notes p {
    margin-block-start: 0px;
        margin-block-end: .5rem;
}

/* #bronxNotesTest {
    margin-left: 0;
    grid-column: 1 / span 2;
    border-bottom: none;
    padding: 0;
} */

#bronxNotes, #bklynNotes, #manhNotes, #queensNotes, #statenNotes {
        margin-left: 0;
    grid-column: 1 / span 2;
    border-bottom: none;
    padding: 0;
}

/* CHANGE TO CARD AT SOME POINT */

.soloCard {
    display: inline-block;
    vertical-align: top;
    background-color: whitesmoke;
    box-shadow: 0px 0px 5px darkslategrey;
    position: relative;
    z-index: 100;
    text-align: left;
}

.soloInnerCard {
    box-sizing: border-box;
}

.soloSky {
    background-color: #9bcbe2;
    margin: 0px;
    box-shadow: inset 0px 3px 3px 3px whitesmoke, inset 0px 0px 50px 5px lightskyblue;
}

.soloHoldSky {
    margin: 0px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    opacity: 0.8;
}


/* CHANGE TO WATER */
.testWater {
    /* background-color: darkseagreen; */
    background-color: #005a6a;
    /* margin: 10px auto 0px auto; */
    margin: 0px;
    /* ***THIS USE OF MARGIN SEEMS INELEGANT AND TROUBELSOME - MAY NEED TO LOOK AT IT AGAIN */
    /* box-shadow: inset 0px -2px 5px 5px whitesmoke, inset 0px 0px 30px 5px mediumseagreen; */
    /* border: 2px solid whitesmoke;
    box-sizing: border-box; */
    box-shadow: inset 0px 0px 2px 1px whitesmoke;
    /* box-shadow: inset 0px -2px 5px 5px whitesmoke; */
    /* border: none; */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    /* ORIGINAL VERSION HAD THE BELOW SETTINGS
    margin: auto;
    position: relative;
    align-items: center;
    display: flex;
    align-items: flex-start;
    justify-content: center; */
}


.soloWater {
    background-color: #005a6a;
    margin: 0px;
    box-shadow: inset 0px 0px 3px 3px whitesmoke;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.refWater {
    /* background-color: darkseagreen; */
    /* background-color: rgba(143, 188, 139, .6); */
    /* margin: 10px auto 0px auto; */
    /* ***THIS USE OF MARGIN SEEMS INELEGANT AND TROUBELSOME - MAY NEED TO LOOK AT IT AGAIN */
    /* box-shadow: inset 0px -4px 5px 5px whitesmoke, inset 0px 2px 30px 5px mediumseagreen; */
    /* border: none; */
    transform: scaleY(-1);
    height: 100%;
    position: relative;
    top: 0;
    /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end; */

    opacity: 0.6;
    /* ORIGINAL VERSION HAD THE BELOW SETTINGS
    margin: auto;
    position: relative;
    align-items: center;
    display: flex;
    align-items: flex-start;
    justify-content: center; */
}


.popCol {
    flex: 0 0 1.5%;
    height: 100%;
    text-align: center;
    /* opacity: 0.5; */
}

.soloPopCol {
    flex: 0 0 1.5%;
    height: 100%;
    text-align: center;
    /* opacity: 0.5; */
}

.refWater .popCol img.skyFig {
    height: 60%;
}

.refWater .soloPopCol img.soloSkyFig {
    height: 60%;
}


/* HAD BEEN - MAYBE LOOK AT FLEX THERE? - THINK TEXT-ALIGN MAY BE SVG SPECIFIC IN ITS EFFECTIVENESS
.figField {
    width: 100%;
    height: 40px;
    z-index: 100;
    margin-left: 0px;
    opacity: 0.2;
    position: absolute;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.skyFig {
    position: absolute;
    bottom: 0px;
    /* width: 20px; */
    width: 3px;
    transform: translate(-50%, 0%);
    filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4));
}

.soloSkyFig {
    position: absolute;
    bottom: 0px;
    /* width: 20px; */
    width: 15px;
    transform: translate(-50%, 0%);
    filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4));
}






/* HAD BEEN
.figure {
    width: 20px;
    height: 40px;
    margin-left: 0px;
    margin-right: -5px;
} */

.watFig {
    position: absolute;
    top: 0px;
    width: 20px;
    height: 70%;
    /* height: 20%; */
    transform: translate(-50%, 0%) scaleY(-1);
    filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4));
    /* transform: scaleY(-1);
    width: 20px;
    height: 70%;
    z-index: 100;
    margin-left: 0px;
    margin-right: -5px; */
}

.watField {
    position: relative;
    top: 0px;
    width: 100%;
    height: 80%;
    /* height: 20%; */
    transform: scaleY(-1);
    /* filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4)); */
    /* transform: scaleY(-1);
    width: 20px;
    height: 70%;
    z-index: 100;
    margin-left: 0px;
    margin-right: -5px; */
}


/* Keeping old versions commented out - for use in larger cards */
.titleCard {
    color: #58585b;
    position: absolute;
    top: 0px;
    margin: 8px;
    /* margin: 30px; */
    width: 80%;
    height: auto;
    text-wrap-style: pretty;
    pointer-events: none;
}

.titleCardWht {
    color: white;
    position: absolute;
    bottom: 0px;
    margin: 8px;
    /* margin: 30px; */
    width: 80%;
    height: auto;
    text-wrap-style: pretty;
    pointer-events: none;
}

.titleCard h4,
.titleCardWht h4 {
    /* font-size: 24px; */
    /* font-size: 33px; */
    font-size: .88rem;
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
}

.titleCard p,
.titleCardWht p {
    font-size: 1.5rem;
    /* font-size: 12px; */
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0px;
}

.justNum h4 {
    /* font-size: 36px; */
    font-size: 14px;
    font-weight: 700;
    /* font-size: 44px; */
    /* color: grey; */
    /* text-shadow: 0px 0px 10px cornflowerblue; */
}


.soloTitleCard {
    color: #58585b;
    position: absolute;
    top: 0px;
    /* margin: 15px; */
    margin: 24px;
    width: 80%;
    height: auto;
    text-wrap-style: pretty;
    pointer-events: none;
}

.soloTitleCardWht {
    color: white;
    position: absolute;
    bottom: 0px;
    /* margin: 15px; */
    margin: 24px;
    width: 80%;
    height: auto;
    text-wrap-style: pretty;
    pointer-events: none;
}

.soloTitleCard h4,
.soloTitleCardWht h4 {
    /* font-size: 24px; */
    font-size: 2rem;
    /* font-size: 14px; */
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
}

.soloTitleCard p,
.soloTitleCardWht p {
    font-size: 1rem;
    /* font-size: 12px; */
    font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0px;
}


/* HAD NOTE IN ORIGINAL - */
/* will mkae these constants in d3 */
/* REFERRING TO FIG FIELD AND FLIP FIGURE, ETC. which are now popCol, skyfig, etc. DOES THAT MAKE SENSE TO DO??? */


/* NOT USED? */
.flipFigField {
    width: 100%;
    height: 100%;
    z-index: 100;
    margin-left: 0px;
    opacity: 0.05;
    position: absolute;
    top: 0px;
    /* text-align: center; */
    display: flex;
    align-items: top;
    justify-content: center;
}


.flipFigure {
    transform: scaleY(-1);
    width: 20px;
    height: 70%;
    z-index: 100;
    /* opacity: 0.05; */
    margin-left: 0px;
    margin-right: -5px;
}



@media (max-width: 750px) {

#waterBG {
    background-image: url("100yr_port_water_IMG_2571_crop1.png");
    background-size: 330%;
    /* height: 75vh; */
    /* width: 100vw;
    overflow: hidden;
    object-fit: cover;
    vertical-align: middle; */
}

#sandyTitle {
    /* margin: auto;
    position: relative; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    color: rgb(255, 255, 242);
    font-family: Figtree; */
    font-size: 1.9rem;
    /* font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 50;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 2px;
    text-shadow: 0px 0px 2px #005a6a; */
}


.sandySub {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 3px;
    margin: 5% 0 5% 0;
}

#sandyKey {
    /* margin: auto;
    padding: 20px 0px 20px 0px;
    /* width: 90%; */
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    /* align-items: center; */
    /* border-top: 1px dotted #58585b;
    border-bottom: 1px dotted #58585b; */
}

.keyText {
    width: 100%;
    /* font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    font-weight: 400; font-size: 1.1rem; line-height: 1.3;
    color: #58585b; */
    padding-right: 0;
    /* padding-bottom: 1.5rem; */
}


.boroHolder {
    /* margin: auto;
    padding: 20px 0px 20px 0px;
    width: 90%;
    max-width: 1000px;
    display: grid; */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    /* justify-items: start; */
    /* align-items: center;
        /* border-top: 1px dotted #58585b; */
    /* border-bottom: 1px dotted #58585b; */ */
}


.notes {
    margin: auto;
    padding: 1rem 0;
    width: 100%;
    max-width: 650px;
    /* border-top: 1px dotted #58585b; */
    border-bottom: 1px dotted #58585b;
    font-family: "Figtree", Arial, sans-serif;
    font-size: .85rem;
}

.notes p {
    margin-block-start: 0px;
        margin-block-end: .5rem;
}


#bronxNotes, #bklynNotes, #manhNotes, #queensNotes, #statenNotes {
        /* margin-left: 0; */
    grid-column: 1 / span 1;
    /* border-bottom: none; */
    padding: 1rem 0 0 0;
}

.soloTitleCard h4,
.soloTitleCardWht h4 {
    font-size: 1.5rem;
    /* font-family: 'Figtree', 'Arial Narrow', Arial, sans-serif;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px; */
}

.runningText {
    /* color: #444444;
    margin: auto; */
    /* padding-top: 20px; */
    /* padding: 1.25rem 0; */
    font-size: 1.1rem;
    line-height: 1.7;
    /* font-family: 'Georgia', serif;
    text-wrap: pretty;
    width: 90%;
    max-width: 650px; */
}



}





</style>
