/*css.css*/

:root  {
     color-scheme:		light only;

	--trans:			transparent ; 
	--colour-red:  		rgb(186, 52, 63) ;
	--colour-orange:	rgb(234, 147, 17) ;
    --colour-red:  		rgb(122, 0, 15) ;
	--colour-orange:	rgb(215, 0, 70) ;

	--colour-black:		rgb(0,0,0);
	--colour-white:		#FEFEFE;

	--font:				"Outfit","Libre Baskerville", serif ;
	--font-hdr:			"Special Gothic Expanded One" , serif ;
	--font-size:		 1.1875rem ;
	--font-size:		 1.5rem ;

	--gap-dd: calc(var(--gap) * 4)  ;
	--minus-h: calc( 0px - ( var(--gap) * 2 ) );
	--gap-d: calc(var(--gap) * 2)  ;
	--gap: 1rem ;
	--minus: calc( 0px - var(--gap) );
	--gap-h: calc(var(--gap) / 2)  ;
	--minus-h: calc( 0px - ( var(--gap) / 2 ) );
	--gap-hh: calc(var(--gap) / 4)  ;

}


@media screen and (min-width: 990px ) and (min-aspect-ratio: 4/3) {
	:root  {
		--gap: 1.5rem ;
}
}
@media screen and (min-width: 990px ) and (max-aspect-ratio: 4/3) {
	:root  {
		--gap: 1.5rem ;
}
}


*  { box-sizing: border-box ; outline: 0px dashed white ; outline-offset: -1px ; } 
a  { transition: 0.5s color ease-out , 0.5s background-color ease-out; }
html  { overflow-y: scroll ; } 
body  { display: flex ; flex-flow: column wrap ; place-content: center ; place-items: center ;   color: var(--colour-black) ; background:  var(--colour-orange) url(/_css/_i/red-85.jpg) 50% 50% / 50%  repeat ; margin: 0 ; padding: 0 ; }

#load.on  { display: grid ; }
#load  { display: none ;  place-items: center; place-content: center ; position: absolute ; top: 0 ; bottom: 0 ; right: 0 ; left: 0 ; z-index: 100 ; background-color: var(--colour-orange) ; }
#load > *   { opacity: 1 !important; } 
#load img  { transition: transform 0.25s ease-in-out ; position: relative ; max-width: 80dvw ; aspect-ratio: 1 / 1;}
#load .img_off  { position: absolute ; top: 0 ; bottom: 0 ; right: 0 ; left: 0 ; z-index: 130 ; display: grid ;  place-items: center; place-content: center ;  }
#load .img_on   { position: absolute ; top: 0 ; bottom: 0 ; right: 0 ; left: 0 ; z-index: 120 ; display: grid ;  place-items: center; place-content: center ;  }
#load .img_off img  { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);  transition: 0.25s all ease-in-out ; }
#load .txt  { background-color: rgb(from var(--colour-orange) r g b / 0.8) ; height: 3em ; width: 3em ; display: grid ; place-items: center; place-content: center ; border: 0.125em solid var(--colour-black) ; border-radius: 2em ; font-size: 1.5rem ; position: relative ; z-index: 140 ;  }

#load.on ~  #cnt *  { display: none ; opacity: 1;}
#load:not(.on) ~  #cnt > *  { opacity: 1 !important ;}
#cnt   { display: grid ; place-items: center ; place-content: center ; min-height: calc(100dvh - var(--gap-d)) ; width: clamp(320px,calc(100dvw - var(--gap-d)),1600px) ;  margin: var(--gap) auto ; padding: var(--gap) ; gap: var(--gap) ; border-radius: var(--gap) ; background-color: rgb(from var(--colour-red) r g b / 0.325 ); }
#cnt #head   { grid-area: head ; display: contents ; }
#cnt #head > .hdr  { grid-area: head-hdr ; container: head-hdr / inline-size ; height: 100% ; width: 100% ; border-radius: var(--gap-h) ; background-color: var(--colour-orange) ; color: var(--colour-black) ; }
    #cnt #head > .hdr  { padding: var(--gap) ; overflow-wrap: break-word; text-transform: uppercase ;  font-family: var(--font-hdr) ; }
    #cnt #head > .hdr h1  { margin: 0 0 0.5em ; padding: 0 ; line-height: 85% ; }
    #cnt #head > .hdr h1  { font-size: clamp(16px,9cqw,100cqw) ; }
    #cnt #head > .hdr h1 span { display: block ; margin: 0 ; }
    #cnt #head > .hdr p  {  line-height: 100% ;  margin: 0; padding: 0 ;  }
    #cnt #head > .hdr p  { font-size: clamp(12px,2.5cqw,100cqw) ; }
    #cnt #head > .hdr p:first-of-type  { margin: 0.5em 0; }
#cnt #head > .cnt  { grid-area: head-cnt ; container: head-cnt / inline-size ; height: 100% ; width: 100% ; border-radius: var(--gap-h) ; background-color: var(--colour-orange) ; color: var(--colour-black) ; }
    #cnt #head > .cnt  { display: grid ; grid-template: auto / 2fr 3fr ; align-items: center; padding: var(--gap) ; gap: var(--gap) ; }
    #cnt #head > .cnt .img img  { display: block ; width: 100% ; border-radius: var(--gap-h) ; overflow: hidden ; outline: 1px solid var(--colour-black) ; outline-offset: -1px ; }
    #cnt #head > .cnt .txt   { display: grid ; place-items: center ; place-content: center ;}
    #cnt #head > .cnt .txt p  { margin: 0 ; padding: 0 ; font-size: clamp(9px,4.5cqw,100cqw) ; line-height: 1.25em;}
#cnt #head > .img  { grid-area: head-img ; container: head-img / inline-size ; height: 100% ; width: 100% ; border-radius: var(--gap) ; background-color: var(--colour-orange) ; color: var(--colour-black) ;gap: 0 ;   }
	#cnt #head > .img #play   { display: grid ; grid-template: "lets" auto "imgs" max-content "play" auto / auto ;  place-content: stretch ; place-items: stretch ; height: 100% ; width: 100% ; gap: 0 ; }
	#cnt #head > .img #play ul  { display: grid ; position: relative ; width: 100% ; aspect-ratio: 1 / 1 ; margin: 0 ; padding: 0 ; list-style-type: none ; }
	#cnt #head > .img #play ul li  { position: absolute ; top: 0 ; left: 0 ; bottom: 0 ; right: 0 ;  display: flex ; opacity: 0 ; z-index: 5 ; width: 100% ;  place-content: center ; place-items: center ; margin: 0 ; padding: 0 ; list-style-type: none ; aspect-ratio: 1 / 1 ; transition: opacity .5s linear ; }
	#cnt #head > .img #play ul li.on  { opacity: 1 ; }
	#cnt #head > .img #play ul li:nth-of-type(odd).on  { animation: glitch1a 0.5s linear ; }
	#cnt #head > .img #play ul li:nth-of-type(even).on  { animation: glitch1a 0.5s linear ; }
	#cnt #head > .img #play ul li:nth-of-type(odd):nth-last-child(-n + 12).on  { animation: glitch1a 0.5s linear ; }
	#cnt #head > .img #play ul li:nth-of-type(even):nth-last-child(-n + 12).on  { animation: glitch1a 0.5s linear ; }
	#cnt #head > .img #play ul li img   { max-width: calc(100% - var(--gap) ) ; aspect-ratio: 1 / 1 ; display: block ; border-radius: var(--gap-h) ; margin: 0 ; border: 0 solid rgb( from var(--colour-red) r g b / 0.2) ; }
	#cnt #head > .img #play .word    { position: relative ; height: 100%  ; width: 100% ; align-self: stretch ; justify-self: stretch ; background-color: var(--colour-orange) ; }
	#cnt #head > .img #play .word:first-of-type   { grid-area: lets ;}
	#cnt #head > .img #play .word:last-of-type    { grid-area: play ;}
	#cnt #head > .img #play .word span   { display: block ; aspect-ratio: 3 / 1 ; text-indent: -5555px ; }
	#cnt #head > .img #play .word img   { display: none ; }
	#cnt #head > .img #play .word:first-of-type    {  background:  var(--colour-orange) url(/_css/_i/lets.png) 50% 100% / calc(100% - var(--gap))  no-repeat; border-radius: var(--gap-h) var(--gap-h) 0 0 ; }
	#cnt #head > .img #play .word:last-of-type   { background:  var(--colour-orange) url(/_css/_i/play.png) 50% 0% / calc(100% - var(--gap))  no-repeat ; border-radius: 0 0 var(--gap-h) var(--gap-h) ; }
#cnt #head > .doc  { grid-area: head-doc ; container: head-doc / inline-size ; height: 100% ; width: 100% ; border-radius: var(--gap-h) ; background-color: var(--colour-orange) ; color: var(--colour-black) ;gap: 0 ;   }
	#cnt #head > .doc .int   { display: flex ; height: 100% ; width: 100% ; place-items: center ; place-content: center ; }
	#cnt #head > .doc .int a   { display: grid ; grid-template: auto / 1fr 1fr ; gap: var(--gap) ; height: 100% ; max-width: calc( 100% - var(--gap-dd) ) ; place-items: center ; place-content: center ; text-decoration: none ; transition: 0.5s transform ease-out ;}
	#cnt #head > .doc .int a:hover   { transform: scale(1.125) ; }
	#cnt #head > .doc .int a img {  width: 100% ; }
	#cnt #head > .doc .int a > span  {  display: flex ; flex-flow: column wrap ; place-items: start ; color: var(--colour-black) ; font-size: clamp(16px,9cqw,100cqw) ; font-size: clamp(16px,12cqw,100cqw) ;  text-transform: uppercase ;  font-family: var(--font-hdr) ; line-height: 85% ; }

#cnt #head > .ftr  { grid-area: head-ftr ; container: head-ftr / inline-size ; height: 100% ; width: 100% ; }
    #cnt #head > .ftr ul   { display: grid ; grid-template-columns: auto ; grid-template-rows: auto ; gap: var(--gap-h) ; margin: 0 ; padding: 0 ; list-style-type: none ; height: 100%; align-content: start; }
    #cnt.home #head > .ftr ul   { align-content: stretch; }
    #cnt #head > .ftr ul li   { display: contents ; }
    #cnt #head > .ftr ul li a  { display: flex; flex-flow: column wrap ; background-color: var(--colour-black) ; color: var(--colour-white) ; padding: var(--gap-d) var(--gap) ; place-items: center ; place-content: center ; text-align: center ; border-radius: var(--gap-h) ; text-transform: uppercase ; text-decoration: none ; font-family: var(--font-hdr) ; font-size: 0.825em ; line-height: 100% ;}
    #cnt.home #head > .ftr ul a  { padding: var(--gap) var(--gap-h) ; }
    #cnt #head > .ftr ul li a:hover  { background-color: var(--colour-red) ; color: var(--colour-white) ; }
    #cnt #head > .ftr ul li.on a   { cursor: default ; background-color: var(--colour-white) ; color: var(--colour-black) ; }
    #cnt #head > .ftr ul li.on a:hover  { background-color: var(--colour-white) ; color: var(--colour-black) ; }
    #cnt #head > .ftr ul li.off a  { display: none ; opacity: 0.2 ; cursor: default ; }
    #cnt #head > .ftr ul li.off a:hover  { background-color: var(--colour-black) ; color: var(--colour-white) ; }
#cnt #main   { grid-area: main ; display: contents ;  }
#cnt #main > .hdr  { grid-area: main-hdr ; container: main-hdr / inline-size ; border-radius: var(--gap-h) ; background-color: var(--colour-orange) ; color: var(--colour-black) ; padding: var(--gap) ; font-family: var(--font-hdr) ;  width: 100% ; }
    #cnt #main > .hdr h2  { margin: 0 ; padding: 0 ; font-size: clamp(16px,9cqw,100cqw) ; line-height: 85% ; text-transform: uppercase ; }
#cnt #main > .cnt  { grid-area: main-cnt ; }
    #cnt #main > .cnt p   { margin: 0 0 var(--gap)  ; text-shadow: -1px -1px 2px rgb(from var(--colour-red) r g b / 0.65) , 1px 1px 1px rgb(from var(--colour-white) r g b / 0.325) ;  }
    #cnt #main > .cnt p:last-of-type   { margin-bottom: 0 ; }
    #cnt #main > .cnt .projects  { margin: 0 ; padding: 0 ; list-style-type: none ; }
    #cnt #main > .cnt .projects li  { margin: 0 0 1em ; padding: 0 ; list-style-type: none ; text-shadow: -1px -1px 2px rgb(from var(--colour-red) r g b / 0.65) , 1px 1px 1px rgb(from var(--colour-white) r g b / 0.325) ; }
    #cnt #main > .cnt .projects li span  { display: block ; font-size: 0.825em ;  font-style: italic ; }
    #cnt #main > .cnt .imgs   { display: grid; grid-template-columns: 1fr 1fr 1fr ; grid-template-rows: auto ; gap: 0.5rem ; margin: var(--gap) 0 ; }
    #cnt #main > .cnt .imgs .img img  { margin: 0 ; }
    #cnt #main > .cnt .img   { max-width: 100% ; display: block; }
    #cnt #main > .cnt .img img  { display: block; width: 100% ; border-radius: var(--gap-h) ; overflow: hidden ; outline: 1px solid var(--colour-black) ; outline-offset: -1px ; margin: 0 0 var(--gap) ; }
#cnt #main > .img  { grid-area: main-img ; }
    #cnt #main > .img .img   { max-width: 100% ; margin: 0 ; padding: 0 ; }
    #cnt #main > .img .img img  { display: block ; width: 100% ; border-radius: var(--gap-h) ; overflow: hidden ; outline: 1px solid var(--colour-black) ; outline-offset: -1px ; }
#cnt #main > .ftr  { grid-area: main-ftr ; }
#cnt #foot   { grid-area: foot ; display: contents ; }
#cnt #foot > .hdr  { grid-area: foot-hdr ; }
#cnt #foot > .cnt  { grid-area: foot-cnt ; container: foot-hdr / inline-size ; height: 100% ; width: 100% ; border-radius: var(--gap-h) ;  }
    #cnt #foot > .cnt p  { display: none ;  }
    #cnt #foot > .cnt ul  { display: grid ; grid-template: auto / auto; place-content: center ; place-items: center ; gap: var(--gap-h) ; margin: 0 ; padding: 0 ; list-style-type: none ;}
    #cnt #foot > .cnt ul li   { height: 100% ; }
    #cnt #foot > .cnt ul li a   {  height: 100% ; display: flex ; flex-flow: row nowrap ; padding: 10px ; gap: 0 ; place-content: center ; place-items: center ; border-radius: var(--gap-h) ; outline: var(--gap-hh) solid var(--colour-orange) ; outline-offset: var(--minus-h) ; text-decoration: none ; }
    #cnt #foot > .cnt ul li a:hover   { background-color: var(--colour-orange) ; }
    #cnt #foot > .cnt ul li a img  { height: var(--gap-d) ; display: block ; margin: var(--gap-h) ; }
    #cnt #foot > .cnt ul li a p  { color: var(--colour-black) ; display: inline-block ; margin-right: var(--gap-h) ; }

#cnt #foot > .img  { grid-area: foot-img ; }
#cnt #foot > .ftr  { grid-area: foot-ftr ; }
#cnt #logo   { grid-area: logo ; display: contents ; }
#cnt #logo > .hdr  { grid-area: logo-hdr ; container: logo-hdr / inline-size ;  place-content: center; place-items: center;  height: 100% ; width: 100% ; border-radius: var(--gap-h) ;  text-indent: -5555px ; }
#cnt #logo > .img  { grid-area: logo-img ; container: logo-img / inline-size ; width: 100%;  height: 100% ; border-radius: var(--gap-h) ; background-color: var(--colour-orange) ; position: relative ; }
	#cnt #logo > .img #play   { display: grid ; grid-template: "imgs"  100% / 100% ; place-content: center; place-items: center; place-content: stretch ; place-items: stretch ; height: 100%; width: 100% ; gap: 0 ; overflow: hidden ;}
	#cnt #logo > .img #play ul  { display: grid ; grid-template-columns: repeat(3, 1fr) ;place-content: center; place-items: center; position: relative ; height: 100% ; width: 100% ; margin: 0 ; padding: 0 ; list-style-type: none ; }
    #cnt #logo > .img #play ul li  { display: none ; opacity: 0.325 ; z-index: 5 ; width: 100%;  place-content: center ; place-items: center ; margin: 0 ; padding: 0 ; list-style-type: none ; aspect-ratio: 1 / 1 ; }
   	#cnt #logo > .img #play ul li:nth-of-type(3),
   	#cnt #logo > .img #play ul li:nth-of-type(4),
    #cnt #logo > .img #play ul li:nth-of-type(5)  { display: flex ; }
    #cnt #logo > .img #play ul li.on  { opacity: 1 ; animation: glitch1a 0.5s linear ; }
	#cnt #logo > .img #play ul li img   { max-width: calc(100% - var(--gap-h) ) ; aspect-ratio: 1 / 1 ; display: block ; border-radius: var(--gap-h) ; margin: 0 ; border: 0 solid rgb( from var(--colour-red) r g b / 0.2) ; }
	#cnt #logo > .img #play .word    { position: relative ; height: 100%  ; width: 100% ; align-self: stretch ; justify-self: stretch ; }
	#cnt #logo > .img #play .word:first-of-type   { position: absolute; top: 0 ; bottom: 0 ; left: 0 ; width: 50% ; z-index: 200 ;  }
	#cnt #logo > .img #play .word:last-of-type    { position: absolute; top: 0 ; bottom: 0 ; right: 0 ; width: 50% ; z-index: 200 ; }
	#cnt #logo > .img #play .word span   { display: block ; aspect-ratio: 3 / 1 ; text-indent: -5555px ; text-shadow: 0 0 0.2em rgb(from var(--colour-white) r g b / 0.2) ; }
	#cnt #logo > .img #play .word img   { display: none ; }
	#cnt #logo > .img #play .word:first-of-type    {  background:  url(/_css/_i/lets.png) 50% 50% / calc(100% - var(--gap))  no-repeat;  }
	#cnt #logo > .img #play .word:last-of-type    {background:   url(/_css/_i/play.png) 50% 50% / calc(100% - var(--gap))  no-repeat ; }
	


#cnt #logo > .cnt  { grid-area: logo-cnt ; }
#cnt #logo > .ftr  { grid-area: logo-ftr ; }


#cnt   { 
    --gap: 1rem ; 
    --row: auto ; 
    --row-ftr: auto ; 
    --row-logo: auto ; 
    --row-head-img: minmax(calc(100dvh - (var(--gap) * 4)),auto) ; 
    --row-main: minmax(32rem,auto)  ;  
    font-family: var(--font) ; font-size: var(--font-size) ; line-height: 150% ; letter-spacing: 0.0075em ;  
}
    
#cnt.page #main   { 
    display: grid ; place-items: stretch ; place-content: start ; padding: 0 ; gap: var(--gap)  ; width: 100%; height: 100% ;
    grid-template: 
    "main-img" auto 
    "main-hdr" auto
    "main-cnt" auto / 100% ; 
}
#cnt.page #main > .ftr   { display: none ; }

#cnt.make #main   { 
    display: grid ; place-items: center ; place-content: start ; padding: 0 ; gap: var(--gap) ; width: 100%; height: 100% ;
    grid-template: 
    "main-hdr" auto 
    "main-cnt" auto / 100% ; 
}
#cnt.make #head > .cnt   { display: none ; }
#cnt.make #head > .img   { display: none ; }
#cnt.make #main > .img   { display: none ; }

#cnt.case #main   { 
    display: grid ; place-items: center ; place-content: start ; padding: 0; gap: var(--gap) ; width: 100%; height: 100% ;
    grid-template: 
    "main-hdr" "main-cnt" auto / 1fr; 
}
#cnt.case #main > .ftr   { display: none ; }

#cnt.home   {
    grid-template: 
    "head-img head-img" var(--row-head-img)
    "head-hdr head-hdr" var(--row)
    "head-cnt head-cnt" var(--row) 
    "head-ftr head-ftr" var(--row)
    "foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr ;
}
#cnt.home #main   { display: none ; }
#cnt.home #head > .doc     { display: none ; }

#cnt.page   { 
    grid-template: 
    "head-hdr head-hdr" var(--row) 
    "main     main    " var(--row)
    "head-ftr head-ftr" var(--row) 
    "foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr ;  
}
#cnt.page #logo > .hdr   { display: none ; }
#cnt.page #head > .cnt   { display: none ; }
#cnt.page #head > .img   { display: none ; }

#cnt.make   { 
    grid-template: 
    "head-hdr head-hdr" var(--row) 
    "logo-img logo-img" var(--row-logo)
    "main     main    " var(--row) 
    "head-ftr head-ftr" var(--row)
    "foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr ; 
}



#cnt.case   { 
    grid-template: 
    "head-hdr head-hdr" var(--row) 
    "logo-hdr logo-hdr" var(--row-logo)
    "main     main    " var(--row) 
    "head-ftr head-ftr" var(--row)
    "foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr ; 
}
#cnt.case :is( #head > .cnt ,#head > .img , #foot > .hdr , #foot > .img , #foot > .ftr  )   { display: none ; }



@media screen and (min-width: 560px )  {
    #cnt  {
        --gap: 1.25rem ;
    }
	#cnt #logo > .img #play ul  { grid-template-columns: repeat(5, 1fr) ; }
   	#cnt #logo > .img #play ul li:nth-of-type(2),
   	#cnt #logo > .img #play ul li:nth-of-type(6),
   	#cnt #logo > .img #play ul li:nth-of-type(3),
   	#cnt #logo > .img #play ul li:nth-of-type(4),
    #cnt #logo > .img #play ul li:nth-of-type(5)  { display: flex ; }


    #cnt.home   { 
        grid-template: 
        "head-img head-img head-img" var(--row-head-img)
        "head-hdr head-hdr head-hdr" var(--row)
        "head-cnt head-cnt head-ftr" var(--row)
        "foot-cnt foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr; 
    }

    #cnt.page   { 
        grid-template: 
        "head-hdr head-hdr head-doc" var(--row) 
        "main     main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt foot-cnt" var(--row-ftr)  / 1fr 1fr 1fr ; 
    }

    #cnt.make   { 
        grid-template: 
        "head-hdr head-hdr head-doc" var(--row) 
        "logo-img logo-img logo-img" var(--row-logo)
        "main     main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt foot-cnt" var(--row-ftr)  / 1fr 1fr 1fr ; 
    }

    #cnt.case   { 
        grid-template: 
        "head-hdr head-hdr head-doc" var(--row)
        "main     main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt foot-cnt" var(--row-ftr)  / 1fr 1fr 1fr ; 
    }
}



@media screen and (min-width: 800px )  {
    #cnt  {
        --gap: 1.5rem ;
         
    }
    #cnt.home   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-doc" var(--row)
        "head-img head-img  head-cnt head-cnt" var(--row)
        "head-img head-img  head-ftr head-ftr" var(--row)
        "foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr)  / 1fr 1fr 1fr 1fr; 
    }

    #cnt.page   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-doc" var(--row) 
        "main     main      main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr ; 
    }
    #cnt.page #logo > .hdr   { display: flex ; }

    #cnt.make   { 
         
        grid-template: 
        "head-hdr head-hdr  head-hdr head-doc" var(--row) 
        "logo-img logo-img  logo-img logo-img" var(--row-logo)
        "main     main      main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr ; 
    }

    #cnt.case   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-doc" var(--row) 
        "main     main      main     head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr ; 
    }
}




@media screen and (min-width: 1240px )  {
    #cnt  {
        --gap: 2rem ;
    }
	#cnt #logo > .img #play ul  { grid-template-columns: repeat(7, 1fr) ;}
   	#cnt #logo > .img #play ul li  { display: flex ; }

    #cnt.home   { 
        grid-template: 
        "head-img head-img  head-hdr head-hdr  head-hdr head-hdr" var(--row)
        "head-img head-img  head-cnt head-cnt  head-cnt head-ftr" var(--row) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr 1fr 1fr; 
    }

    #cnt.page   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-hdr  head-doc head-doc" var(--row) 
        "main     main      main      main     head-ftr head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr 1fr 1fr ;  
    }

    #cnt.make   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-hdr  head-doc head-doc" var(--row) 
        "logo-img logo-img  logo-img logo-img  logo-img logo-img" var(--row-logo) 
        "main     main      main      main     head-ftr head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr 1fr 1fr ;  
    }

    #cnt.case   { 
        grid-template: 
        "head-hdr head-hdr  head-hdr head-hdr  head-doc head-doc" var(--row) 
        "main     main      main      main     head-ftr head-ftr" var(--row-main) 
        "foot-cnt foot-cnt  foot-cnt foot-cnt  foot-cnt foot-cnt" var(--row-ftr) / 1fr 1fr 1fr 1fr 1fr 1fr ;  
    }
}



@media screen and (min-width: 1600px )  {
    #cnt  {
        --gap: 2.5rem ;
    }

}


@keyframes glitch1a
{
	0%  	{ transform: scale(0.001) ; }
	70%    { transform: scale(1.125) ; }
	85%     { transform: scale(0.875) ; }
	100%    { transform: scale(1) ; }
}



#cnt #plea  { display: none ; position: absolute ; top: calc(100dvh - 40px) ; right: var(--pad-half) ; width: 100% ; height: 100% ; max-height: 80px; max-width: 80px; z-index: 200 ; display: flex ; flex-flow: row wrap ; place-items: center; place-content: center ; background-color: rgb(from var(--colour-black) r g b / 0.8) ; border-radius: var(--pad) ; }
#cnt #plea  { opacity: 0.0001 ; }
#cnt #plea img  { width: 100% ; max-width: 60px ; cursor: pointer ; }
#cnt #plea span  { display: none ; }