@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=Quicksand:wght@300..700&display=swap');


/* five years later */
@import url(https://db.onlinewebfonts.com/c/cae463692f633b35ed7a23be7d1bc90a?family=Five+Years+Later+Rotated);

@import url(https://db.onlinewebfonts.com/c/f24e7ed7dbada07bc770b0f135f6f57f?family=FiveYearsLater);

/* font face mdn https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face */
@font-face {
	font-family: 'Chaplin';
	src: 
    url('Chaplin-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Mono Iranic';
	src: 
    url('PanamaMonospaceIranic.woff') format('woff');
}

@font-face {
    font-family: 'Mono Italic';
	src: 
    url('PanamaMonospaceItalic.woff') format('woff');
}
@font-face {
    font-family: 'Proportional Iranic';
	src: 
    url('PanamaProportionalIranic.woff') format('woff');
}
@font-face {
    font-family: 'Proportional Italic';
	src: 
    url('PanamaProportionalItalic.woff') format('woff');
}


:root {
    font-size: 130%;
}

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;     
        text-wrap: pretty;
    }
/* font size of subheads and pull quote */
    hgroup, blockquote {
         p, time {
            font-size: 1rem;

            /* gg search for making the rag look good: https://www.google.com/search?q=how+to+get+rid+of+widow+words+in+css&rlz=1C5CHFA_enUS1176US1176&oq=how+to+get+rid+of+widow+words+in+css&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigAdIBCTEwODkyajBqNKgCA7ACAfEFA0lxLON8L47xBQNJcSzjfC-O&sourceid=chrome&ie=UTF-8 */
            text-wrap: pretty;
            
         }    
    }

    margin-block-end: 5rem;
}


/* 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(236, 236, 236, 0.69);
        /*bg blur  */
    backdrop-filter: blur(6px);
        /* make it the foreground ref:
        https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter */
    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: 2rem;
  
}


#navbar {  
   
    display: flex; 
    justify-content: space-between;
}




/* spacing */

#maincontainer {
    padding-inline: 5rem;
    max-inline-size: 83ch;

/* spacing between sections. heading and content */
        section:not(:first-child) {
        padding-block-start: 5rem;
        
            .examples{
                padding-block-start: 3rem;
            }
        }


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

       
        footer {
            margin-block-start: 2.5rem;
            text-align: left;
        }    
/* spacing between ps */
        section p:not(:first-child){
            margin-block-start: 3rem;             
        } 
        
        

/* spacing between h1 and author */
        #italicleft, #responseright {
            .authornametime{
                padding-block-start: 0.8rem;          
            } 

            .examplesdes {
                margin: 0;
            }
        }

        #italicleft {           
            hgroup{

/* spacing between within the box*/                
            .authorinfo{
                    /* spacing betwee authornametime and box */
                margin-block-start: 1.6rem;
                padding-block-start: 1rem;

                   p {
                    margin-block-start: 0.3rem;
                   }
                }

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

            .originalarticle {
                 margin-block-start: 1.6rem;
                 padding-block-start: 0;
            }
            
         }

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

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

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



        #related{

            p{
             margin-block-start: 0rem;
            }
            }
        }


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

}



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

.sidebar {
/* positoin research :https://developer.mozilla.org/en-US/docs/Web/CSS/position */
    position: sticky;
    top: 5rem;
    line-height: 2rem;
    float: right;
    padding-inline: 5rem;
    color:rgb(255, 255, 255);

/* align-items reference https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container */

/* display:grid; https://developer.mozilla.org/en-US/docs/Web/CSS/display */
    /* display: flex; 
    align-items: right;
    justify-content: right; */

    section {

        background-color: rgba(236, 236, 236, 0.69);;
        padding-inline: 1.5rem;
        padding-block: 1.3rem;
        border-radius: 0.4rem;

        summary {
                border-bottom: dotted;
                border-color: black;
                font-weight:700;
                padding-block-end: 0.5rem;
                margin-block-end: 1.5rem;
            }
            p {
                text-indent: 1rem;
            }

            p:first-child {
                padding-block-start:2rem;
                }

        details:first-child {
            margin-block-end: 2rem;
        }
       
    }

    
}




/* 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(228, 249, 228, 0.775);
   padding-inline: 8%;
   padding-block: 10%;
   color: black;
   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;
        margin-left: 0;
    }

    #chaplin {
        font-family: "Dosis", sans-serif;
        font-size: 0.8em;
        margin-block-start: 2rem;
    }

}



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


/* article/response title */
h2 {
    font-size: 3rem;
    font-weight: 600;
}

/* section title */
h3 {
    font-size: 2rem;
    color: rgb(0, 0, 0);
    padding-block: 0.8ex;
    border-bottom: dotted;
    border-color: black;
}

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





/* about author section
 */
.authorinfo {
  
    
    line-height: 1.5rem;
    font-family: "Dosis", sans-serif;
    color:rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    padding-inline: 1.5rem;
    padding-block: 1.8rem;
    border-radius: 0.4rem;

 

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

    .authorcontent{
        font-size: 0.8rem;
        line-height: 1.4rem;
        padding-block-start: 0.45rem;
        }

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

    }


#related {
    font-size: 0.8rem;
    line-height: 1.5rem;
    
    section {
        padding-block-start: 1rem;
        border-block-start: solid;
        border-width: 0.05rem;
        border-block-start-color: rgb(148, 148, 148);
    }
    p {
       
        font-family: "Dosis", sans-serif;
        color:rgb(78,78,78);
    }
    
}

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

blockquote {

    color: rgb(78, 78, 78);  

    #quote
       {   
        font-family: "Quicksand", sans-serif; 
        font-size: 0.8rem;   
        line-height: 1.6rem; 
    }  
}  



/* footnotes */

aside p{
    padding-block-start: 0.5rem;
    padding-inline-start: 0;
    font-size: 0.8rem;
    line-height: 1.4rem;
    padding-inline-end: 30%;
    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 */
.makebold {
    font-weight: bold;
}

.makehighlight {
    background-color:rgb(228, 249, 228);
    padding-block: 0.3rem;
}


.makehighlight-response {
    background-color:rgb(205, 233, 205);
    color: black;
    padding-block: 0.6rem;
}


#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;
}



#slanted {
    
    .makeiranic:hover{ 
    transform: skew(0deg);
    display: inline-block;
}

}


/* transform does not apply to inline objects */
.makeiranic {
    display: inline-block;
    transform: skew(6deg);
}


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

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


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

#switchtype {
    font-family:  "Quicksand", sans-serif;
}


footer {

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

/* panama fonts*/
#monoitalic {
    font-family: "Mono Italic", sans-serif;
}

#monoiranic {
    font-family: "Mono Iranic", sans-serif;
}
#proitalic {
    font-family: "Proportional Italic", sans-serif;
}
#proiranic {
    font-family: "Proportional Iranic", sans-serif;
}



/* 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: black;
    text-decoration-color:black;
    background-color: transparent;
    
}

/* 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-style: normal;
    padding-inline: 1rem;
    padding-block: 0.4rem;
    border-radius: 0.15rem;
    text-decoration: none;
}

a:not(.underlinecta):hover {
    font-style: Italic;
    background-color:rgba(0, 51, 220, 0.85);
}


.italicta {
    color: rgb(0, 0, 0);
    background-color: transparent;
    text-decoration: none;
}

.italicta:hover {
    color: dimgrey;
    background-color: transparent;
    text-decoration: none;
    font-style: normal;
}


.examples {
    
    display: grid;

    p {
        transform: none;
    }

    .examplesdes {
            font-family: "Dosis", sans-serif;
            color: dimgray;
            font-size: 0.8rem;
        }
/* soap example */

    .soap {
        display: grid;
        
        #soaproman, #soapfake, #soaptrue {
        font-family: Helvetica, sans-serif;
        font-size: 8rem;
        line-height: 8rem; 
        }
        #soapfake {
            transform: skew(-8deg);
        }
        #soaptrue {
            font-style: bold italic;
        }    
    }
    


/* five years later rotation example */


    #fiveyearslaterreg{
        font-family: "FiveYearsLater";
        font-size: 6em;
        line-height: 6rem;
    }

    #fiveyearslaterrotate{
        font-family: "Five Years Later Rotated";
        font-size: 6em;
        line-height: 6rem;

    }
 

/* chinese example */

/* chinese fonts research https://gist.github.com/alex1504/112b462fbc08722a33a8915254410e22 */
    #chineseitalic {
        font-family: "STHeiti";
        font-size:3em;
        display: inline-block;
        transform: skew(-7deg);
       
    }

    #chinesekai {
        /* font-family: "STHeiti"; */
        alignment-baseline: central;
        font-size:2em;
        #kaiti {
            font-family: "STKaiti","楷体_GB2312";;
        }
    }

/* panama updates */
    #panamaupdates{
        font-size: 0.8rem;
        font-family: "Dosis", sans-serif;
        background-color: rgb(224, 224, 224);
        padding-inline: 3ex;
        padding-block: 2ex;
        border-radius: 0.4rem;
        margin-inline-end: 0.2ex;
        /* list style research: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
        list-style: square inside;
        line-height: 4ex;
    }
    

}