/* fonts */
@font-face {
  font-family: "Philibert";
  src: url("./fonts/PhiliItaRus.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "NatPark";
  src: url("./fonts/NationalPark-VariableFont_wght.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
}


:root{
    

    --off-white: #FFF1F4;
    --off-black:#2E2D2D;
    --light-gray:#b8b8b8;
    --mid-gray:#4a4949;
    --dusty-rose:#874f6d;
    --dark-pink:#b31e68;
    --mid-pink:#ed72b0;
    --pink:#ffd2f6;
    --light-pink:#fbddf4;

    --small-space: -.03ch;
    --large-space:.05ch;

}




/* big */
body{
    background-color: var(--off-white);
    font-family: 'NatPark';
    font-size: 1.5rem;
    color:var(--off-black);
    
}
main{
    display:flex;
    flex-direction: column;

}
article .reading-section, .response-section{
    @media (790px <= width <= 1100px){
        width:40rem;
        margin-inline:auto;
    }

    @media (width > 1100px){
        width:50rem;
        margin-inline:auto;
    }
}




/* header */
header{
    background: linear-gradient(to top, var(--light-pink), var(--dark-pink));
    text-align: center;
    padding-inline:1rem;
    padding-block:1rem;
    border-block-end:.25rem dashed var(--off-white);
}
h1{
    font-family: 'Philibert';
    font-weight:400;
    line-height:2.75rem;
    font-size:2.5rem;
    text-align: center;
    padding-block:1rem;
    text-wrap:balanced;
    text-transform:uppercase;
    letter-spacing:var(--large-space);


    @media (790px <= width <= 1100px){
        line-height:3.1rem;
        font-size:3rem;
        margin-inline:5rem;
    }
    @media (width > 1100px){
        line-height:3.75rem;
        font-size:3.5rem;
        margin-inline:auto;
        width:60rem;
    }

}
h1::before{
    content:"\201C";
    font-size:4rem;

    @media (790px <= width <= 1100px){
        
        font-size:4.5rem;
        
    }
    @media (width > 1100px){
        
        font-size:5rem;
        
    }

}
h1::after{
    content:"\201D";
    font-size:4rem;

    @media (790px <= width <= 1100px){
        
        font-size:4.5rem;
        
    }
    @media (width > 1100px){
        
        font-size:5rem;
        
    }
}
h2{
    font-family: 'Philibert';
    font-weight:400;
    line-height:2.75rem;
    font-size:2.5rem;
    text-align: center;
    padding-block:1rem;
    text-wrap:balanced;
    text-transform:uppercase;
    letter-spacing:var(--large-space);


    @media (790px <= width <= 1100px){
        line-height:3.1rem;
        font-size:3rem;
        margin-inline:5rem;
    }
    @media (width > 1100px){
        line-height:3.75rem;
        font-size:3.5rem;
        margin-inline:7rem;
    }


}
h2::before{
    content:"\201C";
    font-size:3rem;

    @media (790px <= width <= 1100px){
        
        font-size:4.5rem;
        
    }
    @media (width > 1100px){
        
        font-size:5rem;
        
    }

}
h2::after{
    content:"\201D";
    font-size:3rem;

    @media (790px <= width <= 1100px){
        
        font-size:4.5rem;
        
    }
    @media (width > 1100px){
        
        font-size:5rem;
        
    }
}
h3{
    text-align:left;
    font-weight:400;
    letter-spacing:var(--large-space);
    color: var(--off-black);
    font-size:1.75rem;
    margin-block-end:1.25rem;

    @media (790px <= width <= 1100px){
        
        font-size:2rem;
        
    }
    @media (width > 1100px){
        
        font-size:2.5rem;
        
    }
}
.myresponse h3{
    text-align:left;
    font-weight:400;
    letter-spacing:var(--large-space);
    color: var(--pink);
    font-size:1.75rem;
    margin-block:5rem 1.25rem;

    @media (790px <= width <= 1100px){
        
        font-size:2rem;
        
    }
    @media (width > 1100px){
        
        font-size:2.5rem;
        
    }
}

p{
    font-family: 'NatPark';
    font-size: 1.1rem;
    line-height: 1.75rem;
    text-wrap:pretty;
    letter-spacing: var(--large-space);

    @media (790px <= width <= 1100px){
        
        font-size:1.3rem;
        line-height: 1.9rem;
        
    }
    @media (width > 1100px){
        
        font-size:1.45rem;
        line-height: 2.1rem;
        
    }
    
}
.myresponse p{
    color:var(--off-white);
    font-family: 'NatPark';
    font-size: 1.1rem;
    line-height: 1.75rem;
    text-wrap:pretty;
    letter-spacing: var(--large-space);

    @media (790px <= width <= 1100px){
        
        font-size:1.3rem;
        line-height: 1.9rem;
        
    }
    @media (width > 1100px){
        
        font-size:1.45rem;
        line-height: 2.1rem;
        
    }
}





header .sum{
    text-align:center;
    margin-block-start:2rem;
    font-size:1.3rem;

}
.sum a{
    color:var(--dark-pink);
    font-weight:500;
}
.author{
    text-align:center;
    padding-block-end:2.5rem;
    font-size:1.3rem;

}

.response-header{
    background: linear-gradient(to top, var(--light-gray), var(--off-black));
    text-align:center;
    color: var(--off-white);
    padding-block:4rem;
    margin-block-start:5rem;
    border-block-end:.2rem dashed var(--light-gray);

}
.response-header p{
    text-align:center;
    color: var(--off-white);
}
.response-header .author{
    padding-block-end:0;
}
#intro-small{
    padding-block-start:1rem;
    margin-block-end:3rem;
    letter-spacing:var(--large-space);
    text-align:center;
    font-size:1rem;
    color:var(--off-white);

}

/* nav */
.nav-list{
    color: var(--dark-pink);
    list-style:none;
    display:flex;
    margin-block:2rem 7rem;
    justify-content: space-around;

    
}
.nav-list li{
    font-size:1.2rem;
    letter-spacing: var(--large-space);
    font-weight:500;

    @media (790px <= width <= 1100px){
        
        font-size:1.4rem;
        
    }
    @media (width > 1100px){
        
        font-size:1.55rem;
        
    }
    
}


a{
    color:inherit;
    text-decoration:none;
}

a:hover{
    text-decoration: underline;
    text-underline-offset:.25rem;
    color:var(--mid-pink);
}



/* blockquote + aside */
blockquote{
    background-color: var(--light-pink);
    border-inline-start:.2rem solid #2E2D2D;
    margin-inline:1rem;

    box-sizing:content-box;

    @media (790px <= width <= 1100px){
        width:35rem;
        margin-inline:auto;
    }

    @media (width > 1100px){
        width:45rem;
        margin-inline:auto;
    }
}

blockquote p{
    margin-block-end:0rem;

    font-size: 1.3rem;
    font-weight:300;
    padding:1.5rem ;
    
}
blockquote .heart{
    padding-block:0;
    font-size:1.25rem;
}


blockquote .cite{
    font-family: 'NatPark';
    font-size: 1rem;
    font-style:italic;
    padding-inline:1.5rem ;
    padding-block-end:1.25rem ;

}
.myresponse blockquote{
    background-color: var(--mid-gray);
    border-inline-start:.2rem solid var(--off-white);
    margin-inline:1rem;
    margin-block-start:5rem;

    @media (790px <= width <= 1100px){
        width:35rem;
        margin-inline:auto;
    }

    @media (width > 1100px){
        width:45rem;
        margin-inline:auto;
    }

}


aside{
    background-color:var(--light-pink);
    border:0.1rem dashed var(--off-black);
    padding:1.5rem;
    /* box-sizing:content-box; */
    margin-inline:1.5rem;
    margin-block:5rem;
    text-align:center;

    @media (790px <= width <= 1100px){
        width:35rem;
        margin-inline:auto;
    }

    @media (width > 1100px){
        width:45rem;
        margin-inline:auto;
    }
}
aside h3{
        text-align:center;

}
.myresponse aside h3{
    margin-block:0rem 1.25rem;
    color:var(--off-white);
    text-align:center;


}




/* sections */
.reading-section{
    padding-inline:1.5rem 1rem;
}

.reading-section p{
    margin-block-end:3.5rem;
    
}
.response-section{
    padding-inline:1.5rem 1rem;
}
.response-section p{
    margin-block-end:3.5rem;
    font-weight:200;
    

}





/* reading */

.reading-header{
    text-align:center;
}
.sum{
    font-family:'NatPark';
    font-size:1rem;
    color: var(--off-black);
}
.reading-sum a{
    color:var(--dark-pink);
}




/* marquee list formatting */
.marq-list{
    margin-block:5rem;
    padding-block:1rem .75rem;
    color: var(--pink);
    background: var(--mid-gray);
    border-block:.2rem solid var(--pink);
    margin-inline:0rem;
    overflow:hidden;
}
/* actual word formatting */
.marq-list-inner {
    font-family:"Philibert";
    letter-spacing:var(--large-space);
    display: flex;
    width: max-content;
    /* call in keyframe animation created */
    /* linear for smooth constant stream*/
    animation: marquee 25s linear infinite;
}
/* hover effects */
.marq-list:hover {
      opacity:90%;
}
.marq-list-inner:hover {
      animation-play-state: paused;
}

.marq-list-inner li{
    margin-inline:1rem;
}

/* state the animation keyframes */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}




/* emphasis */
strong{
   font-weight:500;
}



em{
    font-style:italic;
}

span{
    background:var(--light-pink);
}


.myresponse p span{
    background:var(--mid-gray);
}

/* response */
.myresponse{
    background-color: var(--off-black);
    
}

.myresponse aside{
    color:var(--pink);
    background: var(--mid-gray);
    border-color:var(--light-gray);
    margin-block:5rem 0rem;

}

#last-pg{
    padding-block-end:7rem;
}

/* about section */
.about-section{
    font-family: 'Philibert';
    text-align: center;
    padding-block:3rem;
    color:var(--dusty-rose);
}
.about-section h4{
    font-size:2rem;
    letter-spacing: var(--large-space);

    @media (790px <= width <= 1100px){
        
        font-size:2.5rem;
        
    }
    @media (width > 1100px){
        
        font-size:3rem;
        
    }
}
.about-section p{
    margin-block-start:1rem;
    font-family: 'Philibert';
    text-align:center;
    font-size:1.25rem;
    line-height:1.6rem;
    margin-inline:1rem;

    @media (790px <= width <= 1100px){
        margin-inline:auto;
        line-height:2rem;
        width:35rem;

        font-size:1.5rem;
        
    }
    @media (width > 1100px){
        margin-inline:auto;
        line-height:2rem;
        width:50rem;
        font-size:1.75rem;
        
    }
}




/* footer */
footer{
    font-weight: 500;
    font-size:0.75rem;
    background: linear-gradient(to bottom, var(--off-black), var(--pink));
    color:var(--light-gray);
    text-align: center;
}
footer nav ul{
    display:flex;
    flex-direction: row;
    color: var(--mid-gray);
    font-size: 1rem;
    list-style:none;
    padding-block:10rem 1.5rem;
    justify-content: space-around;
}
footer ul li{
    font-size:1.2rem;
    letter-spacing: var(--large-space);
    font-weight:500;

    @media (790px <= width <= 1100px){
        
        font-size:1.4rem;
        
    }
    @media (width > 1100px){
        
        font-size:1.55rem;
        
    }
}
footer nav ul a:hover{
    color: var(--dark-pink);

}

footer p{
    /* background-color: var(--off-black); */
    width:100vw;
    font-size:.85rem;
    letter-spacing:var(--large-space);
    padding-block-end:1.25rem;
    color:var(--mid-gray);
}