:root {
    background-color: rgb(238, 238, 237); 
    font-family: 'Open Sans', sans-serif;
    color: rgb(35, 33, 33);
    font-size: 125%;
    padding-inline: 10rem;
}


h1 {
    font-size: 5.5rem;
    font-weight:500;
    width: 100%;
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 500;
    border-inline-start-color: black;
	border-inline-start-style: solid;
	border-inline-start-width: 0.25rem;
    background-color: rgb(240, 238, 237, 0.9);
    padding-inline: 4rem;
    padding-block: 1rem;
    padding-left:1rem;
    /* margin-block: 3rem; */
    inline-size: 80%;
	inset-block-start: 1rem;
	inset-inline-start: 3rem;
	position: sticky;
}


p { 
    max-width: 75ch; 
      padding-inline: 5rem;
   margin-block: 1.8rem;
    
 }


em {
color:rgb(53, 53, 165);
}


/* link */
a {
	background-color: rgb(214, 227, 243);
    color:  royalblue;
    float: right;  
    text-align: center;
	margin-inline-end: 1rem;
	padding: 1rem;
    text-decoration: underline; 
    border-radius: 2rem;
    display: block; 
}


.dottedlink {
    font-family: 'Playfair Display', serif;
    background-color: rgb(240, 224, 236);
    color:rgb(150, 49, 54);
    font-style:italic;
   float:right;
	/* inline-size: 10rem; */
    text-align: center;
    display: block; 
	/* margin-inline-end: 1rem; */

}


/* class */
.note {
    font-family: 'Playfair Display', serif;
    font-size: .5 rem;
    font-weight: 400;
    line-height: 150%;
    background-color: whitesmoke;
    border-radius: 1rem;
    padding: 1rem;
    
}

.original-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-block: 1.25rem;
    max-width: 70ch;
}

/* ornamentation to symbolize "style" in the title */
.style {
    font-family: 'Open sans', sans-serif;
    font-size: 6rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1rem;
 }

 .style:hover{
     font-family: 'Playfair Display', serif;
    color: rgb(38, 38, 207);
    font-size: 6.5rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: .75 rem;
 }


/* my response */
.response-heading {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color:brown;
    background-color: rgb(240, 224, 236, 0.9);
    border-left: 0.3rem dotted rgb(174, 98, 121); 
    padding-block: 1rem;
    margin-top: 8rem;
     margin-bottom: 2rem;
}  


.browntext {
    font-family: 'Playfair Display', serif; 
    color:rgb(72, 50, 49);
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 70ch;
    padding-inline: 5rem;

}


nav {
margin-block: 2rem;
margin-bottom: 10rem;
}



blockquote { 
    font-size: 1.4rem;
    text-align: left;
}

.reading-q {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 600;
    margin-inline: 3rem;
    margin-block: 4rem;
}


.name {
    font-size:  1rem;
    font-weight: 300;
    margin-block: 0.5rem;
    display:block;
}

.response-quote {
    font-family: 'Playfair Display', serif;
    color: rgb(61, 15, 15);
    font-size: 1.8rem;
    padding-inline: 1rem;
    padding-block: 1rem;
    border-left: 0.3rem dotted rgb(174, 98, 121); 
    margin-right: 11rem;
    margin-block: 2rem;
}


.orginal-quote{
    font-family: 'Playfair Display', serif;
    color: rgb(61, 15, 15);
    font-size: 1.4rem;
    text-align: left;
    background-color: rgb(235, 213, 230);
    padding-inline: 1rem;
    padding-block: 1rem;
    border-left: 0.3rem dotted rgb(174, 98, 121); 
    margin-inline: 7rem;
}


footer { 
    color: rgb(238, 238, 238);
    text-align:right;
    background-color: rgb(0, 0, 0);
    font-size: 1.2rem;
    color: lightgray;
    padding-inline: 10rem;
    padding-block: 5rem;
    margin-inline: -10rem;
    margin-top: 5rem;
}