@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rosarivo:ital@0;1&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');


@font-face {
	font-family: 'Chaplin';
	src: 
    url('Chaplin-Regular.otf') format(OpenType);
}


:root {
    font-size: 150%;
}

html{
    background-color: rgb(250, 249, 247);
    scroll-behavior: smooth;
    
}


body {

/* body font size */
    p {       
        font-family: "Rosarivo", serif;
        /* color: rgb(30, 29, 29); */
        line-height: 2em;     
    }
/* font size of subheads and pull quote */
    hgroup, blockquote {
         p, time {
            font-size: 1 rem;
         }    
    }

    margin-block-end: 7%;
}


/* typefaces */

/* for article */
.headings{
    font-family: "Dosis", sans-serif;
    text-transform: uppercase;

}


/* heading style, quote, footnote--> font family*/
hgroup, blockquote, aside {
    p, time {
        font-family: "Dosis", sans-serif;
    }    
}

/* space between block elements */
/* *:not(:first-child) { 
    margin-block-start: 2rem; 
} */


/* nav bar */
header {
    position: sticky;
    inset-block-start: 0rem;
    background-color:  rgba(245, 244, 244, 0.69);
        /*bg blur  */
    backdrop-filter: blur(6px);
        /* make it the foreground */
    z-index: 10;
    

    hgroup{
        max-width: 1600px;
        margin-inline: auto;
        padding-block: 0.8rem; 
        padding-inline: 5rem;
        
    }
   
}



main {
    max-width: 1600px;
    margin-inline: auto;
    padding-block-start: 1.5rem;
    z-index: 5;    
}


#navbar {  
    color: rgb(0, 0, 0);
    display: flex; 
    justify-content: space-between;

/* navbar position left and right */    
    #tni {
        font-size: 0.8em;
        margin-inline-end: 0;

    }
}




/* spacing */

#maincontainer {

    padding-inline: 5rem;
    max-inline-size: 72ch;

        /* spacing between sections heading and content */
        section:not(:first-child) {
        margin-block-start: 8%;
        }


        /* space between article and response */
        article:not(:first-child){
        margin-block-start: 15%;
        }

        footer {
            margin-block-start: 2.5rem;
            text-align: left;
        }    
/* spacing between ps */
        section p:not(:first-child){
            margin-block-start: 7%;             
        }
/* spacing between h1 and author */
        #italicleft, #responseright {
            .authornametime{
                margin-block-start: 2%;
            
            } 
        }

        #italicleft {           
            hgroup{
/* spacing between within the box*/                
            .authorinfo{
                   p {
                    margin-block-start: 1%;
                   }
            }
         }

            blockquote{
            
                #quote {
                    margin-block-start: 1.5rem;
                }

                #quoteauthor {
                    margin-block-start: 0.75rem;
                }

                margin-block: 2.5rem;
                padding-inline-start: 20%;
    
            }
        }


/* spacing between article and response*/
        #responseright {
             margin-block-start: 30%; 
        }

/* spacing between the border line and related content*/
        #related{
            p{
             margin-block-start: 3%;
            }
        }

}






/* sidebar */
/* todo: add a box around? */

.jumplinks {
    /* display: block; */
    position: fixed;
    
    font-size: 0.8rem;
    line-height: 1.5rem;
    width: 100%;
    max-width: 1600px;
    padding-inline: 5rem;
    color:rgb(255, 255, 255);

    display: flex; 
    align-items: right;
    justify-content: right;

    ul {

        background-color: rgb(0, 51, 220);
        padding-inline: 2%;
        padding-block: 1%;
        border-radius: 0.4rem;
    }

    
}




/* main content */

#italicleft {
    .authornametime {
        text-transform: uppercase;
        p {
             font-family: "Dosis", sans-serif;
        }
       
        font-size: 0.8rem;
        color: rgb(99, 99, 99);
}
}

#responseright {
   background-color:  rgba(232, 233, 245, 0.54);
   padding-inline: 8%;
   padding-block: 10%;
   color: rgba(0, 0, 0);
   border-radius: 0.4rem;

   section p{
        font-family: 'Chaplin';
        font-size-adjust: 90%;
    }

    .authornametime {
        text-transform: uppercase;
        p {
             font-family: "Dosis", sans-serif;
        }
       
        font-size: 0.8rem;
        color: rgb(99, 99, 99);
        margin-left: 0;
}

}



/* main title */
h1, #tni {
    font-size: 1rem;
    line-height: 1.5rem;
}


/* article/response title */
h2 {
    font-size: 2rem;
    position: sticky;   
}

/* section title */
h3 {
    font-size: 1rem;
    color: rgb(0, 0, 0);
    padding-block: 0.8ex;
    border-bottom: dotted;
    border-color: black;
    /* position: sticky;
    inset-block-start: 4rem; */
    background-color: rgb(250, 249, 247);
    backdrop-filter: blur(3px);
}

/* pullquote title */
h4, nav {font-size: 1.2rem;}





/* about author section
 */
.authorinfo {
  
    font-size: 0.8rem;
    line-height: 1.5rem;
    font-family: "Dosis", sans-serif;
    color:rgb(0, 0, 0);
    /* border-color: black;
    border-style: dotted; */
    background-color: rgb(255, 255, 255);
    padding-inline: 4%;
    padding-block: 3%;
    border-radius: 0.4rem;
    margin-block-start: 3rem;
 

    #moreauthorhead {
        margin-left: 0rem;
        border-bottom: dotted;
        border-color: black;
        text-transform: uppercase;  
        font-size: 0.5rem;
        line-height: 0.8rem;
        font-weight:700;
        padding-block-end: 1%;
    }

    .authorcontent{
        line-height: 1.2rem;
        padding-block-start: 0.5rem;
        }

    .moreauthorlinks{
        padding-block-start: 1.5rem;
    }

    }


#related {
    border-block-start: solid;
    border-width: 0.05rem;
    border-block-start-color: rgb(148, 148, 148);
    margin-block-start: 3rem;
    font-size: 0.8rem;
    line-height: 1.5rem;

    p {
        font-family: "Dosis", sana-serif;
        color:rgb(148, 148, 148);
        margin-block-start: 1%;
    }
    
}

#related:hover {
    transform: skew(2deg);
}

/* quote */
/* how to make a hanging list? */

blockquote {

    color: rgb(99, 34, 34);  
    #quote
       {font-style: italic; 
        font-size: 0.8rem;  
        color: rgb(0, 0, 0);     
    }  
}  



/* footnotes */

aside p{
    padding-block-start: 1rem;
    padding-inline-start: 0%;
    font-size: 0.8rem;
    padding-inline-end: 20%;
    color: rgb(0, 51, 220);
}

sup {
    vertical-align: super; /* Elevates the text above the baseline */
    font-size: 0.8em;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 51, 220);
    font-family: "Newsreader", serif;
    display: inline;
	margin-block-start: 0rem;
    padding-inline: 0.6ex;
    padding-block: 0.2ex;
    border-radius: 0.4rem;
}



/* special font styples */
strong {
    font-weight: 600;
}


/* cta styles */

#starter {
    font-size:2em;
    line-height: 1.5em;
    display: block;
    color: white;
    background-color: rgb(0, 0, 0);
    padding-inline: 2ex;
    padding-block: 1ex;
    border-radius: 0.4rem;
    
}

.glyphs {
    font-size:0.8em;
    display: inline;
    color: rgb(0, 0, 0);
    background-color: rgb(224, 224, 224);
    padding-inline: 1ex;
    padding-block: 0.8ex;
    border-radius: 0.4rem;
    margin-inline-end: 0.2ex;
}


#rotation span{
    transform: rotate(20deg);
    display: inline-block;
}


.makeitalic {
    font-style: italic;
}

.makeunderline {
    text-decoration: underline;
}

/* this line not working */


.makeslanted p{ 
    transform: skew(4deg);
    display: inline-block;
}

.makeslanted p:hover{ 
    transform: skew(-4deg);
    display: inline-block;
}



.makeiranic {
    transform: skew(4deg);
}

.makeblackletter {  
    font-family: "UnifrakturCook", cursive;
    font-weight: 700;
}

#trio {
    font-family: "Dosis", sans-serif;
    font-weight: 600;
}   


.smalltype, #chaplin {
    font-family: "Dosis", sans-serif;
    font-size: 0.6em;
}

footer {

    font-style: italic;
    color: rgb(148, 148, 148);
}

/* underline cta */
a {
    font-family: "Dosis", sans-serif;
    text-size-adjust: 115%;
    text-decoration: underline dotted;
    text-decoration-color:rgb(0, 51, 220);
    color:  rgb(0, 51, 220);
    /* padding-block: 0.3ex;
    padding-inline: 0.4ex;  
    background-color: rgb(255, 208, 0);  */
}


a:hover {
    font-style: italic;
    color: rgb(0, 51, 220);
    text-decoration-color:rgb(0, 51, 220);
    background-color: transparent;
    border-radius: 0.2em;
}

/* main ctas */
a:not(.underlinecta)  {
    font-style: italic;
    display: inline;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 51, 220);
	margin-block-start: 0rem;
    font-size: 1em;
    padding-inline: 1ex;
    padding-block: 0.3ex;
    border-radius: 0.2rem;
    font-style: normal;
}

a:not(.underlinecta):hover {
    color: rgb(255, 255, 255);
    font-style: Italic;
    background-color: rgb(0, 0, 0);
    text-decoration-color:rgb(255, 255, 255);
}


#tni, #navtop{
    color: rgb(0, 0, 0);
    background-color: transparent;
    text-decoration: none;
}

#navtop:hover:, #tni:hover {
    color: rgb(0, 0, 0);
    background-color: transparent;
}