/* CSS for Earth Star Graphics site original */

/* <!-- basic globally common stuff --> */
/* <style> */

	* {
        margin: 0; padding: 0;
        text-decoration:none; list-style: none;
        box-sizing: border-box;   border-style: none;
    }

    *, *::before, *::after {
        box-sizing: inherit;
    }
	:root {
		--link-color1:red;
		--link-visit-color1:black;
		--base-color1: rgba(253, 251, 255, 100);
		--base-color2: rgba(247, 245, 249, 100);
		--arrow-outer:teal;
		--font-color1: black;
		--a-hover-color1: teal;
		--closebase:orange;
		--back-link:rgba(255, 99, 71, 0.5);
		--hover-text: white;
		--menu-base: rgba(150, 100, 150, .5);
		/* --animation-duration1:2.78s; */
		--boldcond:"American Typewriter Condensed Bold", 'Courier New', Courier, monospace;
		--norm:"American Typewriter", 'Courier New', Courier, monospace;
		--border-thin: 0.5rem;
		--ani-dur:1s;
	}
	#background {
		grid-column: 1/-1;
        grid-row: 1/-1;
        width:100%;
		height:800dvh ;
		background:rgba(253, 251, 55, .2);
    }

    html {
		font: normal calc(11.2px + 1vw)/16px   'Courier New', Courier, monospace;
        height:100%;
        min-height: 100dvh;
        min-height:-webkit-fill-available;
    }

    body {
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }
    /* above two code blocks are absolutely critical
    to making this iframe page function in the recipient page on an iphone
    */

    html { -webkit-text-size-adjust: 108%; 
	/* background: var(rgba(253, 251, 255, 100)) */
	}
    /* deals with iphone iframe weirdness */

    header, section, footer, aside, nav, main, article, figure {
        display: block;
    }  
	
    h1, h2, h3, h4, h5, h6, p, a {
        margin:0; padding:0;
        text-wrap: balance;
		color:var(--font-color1);
    }
    /* text-wrap makes type eliminates widows but is not fully emplemented across all browsers oct 2023 */

	h2, h3 {
		line-height:100%;
		margin-bottom:.5rem;
	}
	p {
		font-size:95%;
		line-height:1.15em;
		text-wrap: pretty;
	}
	figcaption p {
        font-size:80%; 
		line-height:1.15em; 
    }
	.sml80 {
        font-size:80%; 
		line-height:1.15em; 
		text-wrap: pretty;
    }

	.m-t-one-rem {
		margin-top: 1rem;
	}
	.m-b-half-rem {
		margin-bottom: .5rem;
	}
	.m-b-one-rem {
		margin-bottom: 1rem;
	}
	.m-b-one-half-rem {
		margin-bottom: 1.5rem;
	}
	.m-b-two-rem {
		margin-bottom: 2rem;
	}
	.talent-block p {
		margin-bottom: 1.25rem;
	}
	p.no-b-margin {
		margin-bottom: 0;
	}

	.figclip-container {
		width:100%;
		height:0;
		overflow:hidden;
		position: relative;
		padding-bottom: 76.25%;
		z-index:0;
	}
	/* padding-bottom determines how much of the img is shown ... larger %, the more shown PLUS the img must be contained within a section which is itself a child of figure */

	a { 
		color:var(--font-color1);
		border-bottom:0.1rem solid var(--link-color1);	 
	}
	a:hover, a:focus, a:active { 
		background:var(--a-hover-color1);
		color:var(--base-color1);
	}
	a:link, a:visited {
		color: var(--link-visit-color1); margin:0; padding:0;
    }
	a:hover {
		color: var(--hover-text); margin:0; padding:0;
    }
	a#closebutton:hover {
		background:var(--closebase);
	}
	a.options {
		display:block; 
		padding:.25em;
		background:var(--back-link);
	}
	.color-block a {
		background:var(--menu-base);
		display:block;
		padding:.5rem;
	}
	.color-block a:hover { 
		background:var(--a-hover-color1);
		color:var(--base-color1);
	}

	
	.options li {
		display:grid;
		grid-template-columns: auto 1fr ;
		line-height:1.0em; 
	}
	.options li:before {
        content: "\261E\200A"; 
		font: normal 150%/0em sans-serif; 
		position:relative;
		top:.3em; left:0; 
		color:var(--menu-base);
		padding-right:1dvw;
    }
	.options a {
		margin-bottom:1.25rem;	
		padding-bottom:.25em;
		padding:.25em;	
	}
	.options a:hover {
		background:var(--a-hover-color1);
		color:var(--base-color1);
	}

	.sticky {
		position: sticky;
	}
	.hide {
    display: none;
	}

	.border-thin { 
        border: solid rgba(51, 0, 0, 1) .05em;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
	img {
        display:block;
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        margin:0; padding:0;
        background:rgba(245,240,240,1);
    }
    .img-fill {
        display:block;
        width: 100%;
        object-fit: contain;
    }
	figcaption {
		margin-top:.25rem;
		margin-bottom:.5rem;
		font-size:65%;
		line-height:115%;
	}
	.iframe-container {
        position:relative;
		height:calc(20rem + 1vh);
		display:grid;
    }
    /* margin-bottom seems to only work on the nb-video page's single video - keep tabs on this */

	iframe {
		position:absolute;
		  top:0; left:0; 
		  background:red;
	}
	.fit-iframe {
		object-fit: max-content; 
		background:pink;
	}


	.atbc {
		font-family:var(--boldcond);
	}
	.phone-svg {
        content: url(http://www.earthstargraphics.com/webpix/phone-dial-big-k.svg);
        border: none;
        width:1em;
        position:relative;
        top:.25rem;
        padding:0 .2rem 0 0;
    }
	body {
        display: grid;
		grid-template-columns: 0 1fr 0 ;
        position: relative;
        height:calc(100dvh + 100%);
		background:var(--base-color1);
    }
	article { 
		grid-column: 2/3;
        grid-row: 1/-1;
		display: grid;
		grid-template-columns: .25rem 3rem 1rem 1fr .25rem 3rem .25rem ;
	}
	.logo-banner {
		grid-column: 2/3; 
		grid-row:1/-1;
		align-self: start;
		margin-top: 1.9rem;
		display: grid;
		grid-template-columns: 3rem;
		height:auto;
		position:fixed;	
	}
	/* "position: fixed;" absolutely necessary to make logo-banner stay at top of page  */

	.logo-box { 
		display: grid;
		font-family: "American Typewriter Condensed Bold" ;
		font-size: 3rem;
		line-height:3rem;
		letter-spacing: -.15em;
		z-index: 3;
		text-align:right;
		-webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
	.logo {
		grid-column: 1/-1;
		grid-row:1/-1;
		z-index:2;	
	}
	
	.slogan {
		grid-column: 1;
		grid-row:2;
		margin-top: .2rem;
		margin-right:.4rem;
		align-self: end; justify-self: end;
		font-family: "American Typewriter";
		font-weight: normal;
		font-style: normal;
		font-size: 1rem;
		line-height:1rem;
		/* text-align: end; */
		text-align:right;
		-webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
	}

	.logo-rule {
		grid-column: 2/3;
		grid-row:1/-1; 
		padding-right:2.2rem;
        border-right:.4rem solid var(--link-color1);
		z-index: 0; height:100%;
	}
	
	.graphics, .graphics2 {
		color:var(--font-color1);
	}
	.graphics {
		grid-column: 1/-1;
		grid-row:1/-1;
		z-index:1;
	}
	.a1 {
		padding-left:.035em;
		}
	.e1 {
		letter-spacing: -.185em;
	}
	.p1o {
		-webkit-text-stroke-width: 5px;
		color:var(--base-color1);
		z-index:1;
	}
	/* 3 c logo-box */
	
	
	a.openmenu-burger-center  {
		font: .9rem/ .8rem  var(--norm), 'Courier New', Courier, monospace;
		text-align:center;
		font-weight: 700;
		color:var(--base-color1);
		padding:.3rem 0;
		grid-row: 2/3;
		width:2.3rem;
		align-self:end;
		justify-self: center; 
		bottom: 0;
		z-index:10;
		border: none;
		border-radius: .5rem .5rem .5rem .5rem;
		background: var(--link-visit-color1);
	}
	a.openmenu-burger-center:hover {
		background: var(--link-color1);
	}

	.fb {
		justify-self: center; 
		border-bottom:none;
		align-self:end; 
		width:2rem;
		border-bottom:0.2rem solid var(--link-color1);
		padding-bottom: 6px;
	}
	.copy {
		font-size:x-small;
	}
	
	.content {
		grid-column: 4/5; 
		grid-row:1/-1; 
		font-family: "American Typewriter";
		font-weight: normal;
		font-style: normal;
		font-size: 1.5rem;
		line-height:2rem;
		/* display:grid; */
	}
	/* end content */
	
	.talent-block {
		grid-column: 1/2;
		margin-bottom:2rem; 
		/* background:yellow; */
	}
	/* 2nd c article */
	.header {
		margin-top: 3rem;
		
	}


/* SITEMAP */

	#sitemap {
		grid-column: 4/-2;
	}
	#sitemap {
		padding:0 .25em .5em .5em;
		border: 0.2rem solid var(--arrow-outer);
		margin-bottom:1em;
	}

	#sitemap h5 {
		color:var(--arrow-outer);
		padding:0;
	}
	#sitemap a {
		margin-right:2dvw;
		line-height:1.5em;
		font-size: 62%;
		border-bottom:none; 
		display:grid;
		grid-template-columns: 2em 1fr ;

	}
	.finger:before {
		grid-column: 1/2;
		grid-row: 1/2;
		content: "\261E\200A"; 
		font: normal 150%/0em sans-serif; 
		align-self: center;
		position:relative;
		top:.1em; left:0; 
		color:var(--menu-base); 
	}
	.site-text {
		grid-column: 2/3;
		grid-row: 1/2;
		background:var(--hover-text);
		color:var(--arrow-outer) ;
		border-bottom:0.1rem solid var(--link-color1); 
	}
	#sitemap a:hover {

		#sitemap a:hover {
			background:var(--arrow-outer) ;
		}
 
		.finger {
			background:var(--hover-text);
		}
		.site-text {
			background:var(--arrow-outer);
			color:var(--hover-text) ;
		}
	}

/* end SITEMAP */


	
	

/* MENU START */

/* NAVIGATION MENU PORT */
	
	.menu {
		grid-column: 6/7; 
		grid-row: 1 / -1;
		display:grid;
		grid-template-rows: 2.75rem 2.75rem 1rem;
		align-self: end;
		z-index: 5;
		bottom: 0; 
		animation-duration: var(--ani-dur);
		/* animation-name: from-bottom; */
	}

	a.openmenu-burger-center  {
		font: .9rem/ .8rem  var(--norm), 'Courier New', Courier, monospace;
		text-align:center;
		font-weight: 700;
		color:var(--base-color1);
		padding:.3rem 0;
		grid-row: 2/3;
		width:2.3rem;
		align-self:end;
		justify-self: center; 
		bottom: 0;
		z-index:10;
		border: none;
		border-radius: .5rem .5rem .5rem .5rem;
		background: var(--link-visit-color1);
	}
	a.openmenu-burger-center:hover {
		background: var(--link-color1);
	}

	#menuiframe iframe {
        background: rgba(255, 255, 255,.75);
        border:solid 1px var(--font-color1);
        box-sizing: border-box;
    }
	#popupmenu:target , #popupphone:target {
		grid-column: 3/-2;
        grid-row: 2/-3;
		display: grid; 
		margin-bottom:0;
		grid-template-columns:1fr ;
		grid-template-rows: 1fr ;
		background: var(--base-color1);
		bottom: 0em;
		justify-self: end;
        align-self:end;
    }
    /* above reveals menu iframe and close button */
    /* above makes close button display as block */

#popupmenu.splash:target , #popupphone.splash:target {
		grid-column: 3/0;
		}

    #popupmenu, #popupphone {
		margin:0; padding:0;
        width:100%;
        z-index:6010;
        background:none;
        border-top-left-radius:0.5rem;
        border-top-right-radius:0.5rem;
		animation-duration: var(--ani-dur);
		animation-name: fade-in;
		/* animation-duration: 1.75s; */
		}
	@keyframes fade-in {
		
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(100%) ;
		}
	}
   	

	


	.openmenu:hover, .openmenu:focus, .openmenu:active, #closebutton:hover, #closebutton:focus, #closebutton:active {
		background: var(--base-color1);
        text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
    }
    #menuiframe iframe {
        box-sizing: border-box;
		grid-row: 1 / -1;
		height:50dvh;
		width:100%;
		margin:0;
		padding:0;
		align-self:end;
		left: 0;
		bottom: 0em;
    }
	#popupphone #menuiframe iframe {
		height:0vh;
	}
		
	#menuiframe {
		height:50dvh;
		background: none;
		grid-column: 1 / -2;
		grid-row: 1 / 2;
		align-self:end;
		bottom:0;
		-webkit-overflow-scrolling: touch;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:1fr 3rem;
		border-top-left-radius:0.5rem;
		border-top-right-radius:0.5rem;
    }
	
	#popupphone #menuiframe {
		height:50dvh;
	}

    #closebutton {
        background:  var(--link-color1);
    }
    /* 2nd child of popupmenu, parent of closebuttonholder */

    .closemenubutton:hover, .closemenubutton:focus, .closemenubutton:active {
        cursor:pointer;
    }

    .closemenubutton,
    #close_pre, #close_post {
        font-family:  var(--boldcond) ;
		text-align:center;
        line-height:0;
        color: var(--base-color1);
        border: none;
    }
	.closebuttonholder {
		grid-column:2/3;
		grid-row: 1/-1;
	}
    /* 1st child of closebutton, parent to closemenubutton */

    #close_pre {
		grid-column: 1 / 2;
		grid-row: 1 / 1;
		line-height:1em;
		place-self:end;
    }
    /* 1st child of closemenubutton, holds "CLOSE" */

    #close_post {
		grid-column: 3 / 4;
		grid-row: 1 / 1;
		line-height:1em;
		place-self:start;
	}
    /* 2nd child of closemenubutton, holds "MENU" */

    .closebutton_post {
		opacity:0;
	}
    /* 3rd child of closemenubutton, holds "xed circle" */

    #closebutton:hover .closebuttonholder, #closebutton:focus .closebuttonholder, #closebutton:active .closebuttonholder {
		background:var(--a-hover-color1);
        border-top-left-radius:.5rem;
        border-top-right-radius:.5rem;
        cursor:pointer;
    }

    a#closebutton {
            text-shadow: 0 2px 3px black, -.02rem .2rem .2rem rgba(0, 0, 0, .5);
            border: none;
        }
        /* set general font treatments */

        /* inserts 1st closedcircle x and space */
        #closebutton {
            margin:0; padding:0;
            z-index:5;
            grid-column: 1 / -1;
            grid-row: 2 / -1;
            height:4em;
            align-self:end;
        }
        /* height:3em needed to give close menu bar proper height */

        #closebutton {
            display: grid;
            grid-template-columns:1fr 3em auto 3em 1fr;
            grid-template-rows: 1fr;
            z-index:5;
        }
        /* parent of closebutton_pre, closemenubutton, closebutton_post */

        .closebutton_pre-svg, .closebutton_post-svg {
            content: url(https://www.earthstargraphics/webpix/circled-times-thick.svg);
            border: none;
            grid-row: 1 / 1;
            align-self: center;
            justify-self: center;
        }
        /* inserts space and closedcircle x */
        .closebutton_pre-svg {
            grid-column: 2/3;
        }
        .closebutton_post-svg {
            grid-column: 4/5;
        }

        /*holds "CLOSE MENU" */
        .closemenubutton  {
            grid-column:3/4;
            grid-row: 1/1;
            background:none;
        }
        /* parent of close_pre, close_post */
        #closer  {
            font-size:2rem;
            width:100%;
        }
        /*  child of closebutton */

		.linebreak-after br {
        display: none;
    }


    /* END MENU */

/* <!-- DESK CSS CODE  --> */
/* <style> */
/* DESK CSS CODE  */

@supports (display:grid)
{
    @media only screen  and (min-width: 920px)
    {
		body {
			grid-template-columns:minmax(0vw, 1fr) 24px 820px 50px 24px minmax(0vw, 1fr);
			
		}
		article {
            grid-column: 3/5; 
		}
		.phone {
			grid-column: 4/5; 
			/* background: pink; */
		}
		.basefield-l {
			grid-column: 1/2; 
			grid-row:1/-1;
			background:var(--base-color2);
		}
		.basefield-r {
			grid-column: 6/7; 
			grid-row:1/-1;
			background:var(--base-color2);
		}
	}
}