@font-face {font-family: "Termina-Regular"; src:url(fonts/Termina-Regular.woff2);}


/* I WON'T START FINE-TUNING ANYTHING UNTIL MID-OCT. SIMILAR TO THE EPUBs, I AM USING 'INTEGRAL DESIGN' WITH WEBSITES, RATHER THAN RELYING ON MEDIA QUERIES TO PRODUCE NICE LAYOUTS ACROSS DIFFERENT DEVICES, I'M DOING SOMETHING THAT'S GOING TO LOOK OK ACROSS DEVICES WITH MINIMAL MEDIA QUERIES BY USING FLEX, GRID, AND MIXING A BIT OF ABSOLUTE SIZING WITH RELATIVE SIZING PERCENTAGES, REMS AND EMS (ALL OF WHICH PRODUCE DIFFERENT EFFECTS IN DIFFERENT SITUATIONS). I'M JUST USING TWO MEDIA QUERIES TO TARGET TABLETS AND PHONES AT THE MOMENT, MAYBE I WILL LOOK FOR A THIRD BUT AT THE MOMENT THEY SEEM TO BE PICKING UP DEVICES THE WAY I WANT THEM TO. MINIMAL MEDIA QUERIES AND DESIGNING SOMETHING THAT WILL LOOK OK ACROSS DEVICES WITHOUT THE MEDIA QUERIES IS ACTUALLY A NECESSARY APPROACH IN EPUBS WHERE MEDIA QUERIES ARE POORLY SUPPORETED ON INDEPENDENTLY UPLOADED FILES, I THINK THE APPROACH TRANSLATES WELL INTO WEBSITES. HOWEVER, THE FINAL HTML/CSS FOR THIS WEBSITE WILL BE DIFFERENT TO THE XHTML IN THE EPUBs TO TAKE ACCOUNT OF THEIR DIFFERENT ECOSYSTEMS, eg. I WILL CHANGE TO CSS LOGICAL PROPERTIES ON THIS WEBSITE BEFORE I FINISH AND THE OTHER LATEST WIDELY SUPPORTED PROPERTIES ON THE WEB. FOR MY RESET, I'M JUST GOING TO BUILD SOMETHING UP BASED AROUND THE SPECIFIC ELEMENTS THAT I ALWAYS USE, I AM NOT USING RESETS IN THE EPUBS BECAUSE READING SYSTEMS CAN BE ERRATIC AND SO MUCH MORE IS BAKED INTO THE SETTINGS AND UI. WHILE THE SITE IS UNDER DEVELOPMENT, FOR TYPOGRAPHY I AM USING PX MEASUREMENT ON HTML ELEMENT AND PERCENTAGES ON OTHER ELEMENTS EVEN THOUGH I UNDERSTAND THIS IS NOT INLINE WITH ACCESSIBILITY BEST PRACTICES, I WON'T DECIDE HOW TO SET THE TYPOGRAPHY UNTIL I BEGIN TO TIDY THE SITE UP IN MID-OCTOBER, I AM GOING TO EXPERIMENT WITH CLAMP() AND CALC() BUT I'VE NEVER SEEN THEM WORK IN A WAY THAT MAKES ME THINK THEY ARE ESPECIALLY GOOD METHODS THOUGH I THINK MOST OF THE EXAMPLES I HAVE SEEN HAVE BEEN MACHINE GENERATED, AND IT ALL DEPENDS ON THE CASE I SUPPOSE BUT I THINK A MORE CLASSIC APPROACH WILL WORK JUST AS WELL ON THIS WEBSITE, THE BODY COPY ISN'T REALLY TIED TO THE GRAPHICS, SETTING A NICE READING SIZE IS THE IMPORTANT THING, I'M PRETTY SURE I CAN ACHIEVE THAT ACROSS DEVICES EASILY ENOUGH WITHIN MY EXISTING TWO OR THREE QUERIES, THOUGH THE LARGE TEXT ON THE TABLE OF CONTENTS PAGE IS TIED IN WITH THE GRAPHIC SO I WILL DEFINITELY MAKE THAT TEXT HIGHLY RESPONSIVE WITH CLAMP */

html {box-sizing: border-box; font-size: 18px;}

*, *::before, *::after {box-sizing: inherit;}

/* GENERAL TEXT SETTINGS, CONVERT TO VARIABLES WHEN FINISHED, HORIZONTAL SCROLLBAR HIDDEN */

body {font-family: "Termina-Regular"; margin: 0; padding: 0; line-height: 1.5; overflow-x: hidden; hyphens: auto; margin-block-start: 0; margin-block-end: 0; background-color: rgb(241, 242, 242)    /* rgb(247, 243, 237) */ }

h2, h3 {font-family: "Termina-Regular"; font-weight: normal; font-size: 180%;}
p {font-size: 110%;}

a {color: black; text-decoration-thickness: 1px; -webkit-tap-highlight-color: transparent;}
a:active {background-color: transparent;}

/* using this to target tablets at the moment and it has to go above mobile phone */ 
@media (orientation: portrait) {
p {font-size: 100%;}
h2 {font-size: 150%;}
}

/* mobile, reduce to 500 or 600 after testing */
@media (max-width: 700px) { 


.body {margin: 0; box-sizing: border-box; overflow-x: hidden !important; hyphens: auto; }  
p {font-size: 90%; line-height: 1.45; /* this is actually reducing the line size */ }
h2 {font-size: 130%; font-weight: 600;}
h3 {font-size: 105%; }  
}

/* LANDING PAGES - Now adding the corners as a separate item, hidden on landscape, positioned fixed on mobile/portrait */ 

.alink {background-color: transparent; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;}

#svgLOGO2, #svgLOGOmob, #cTop, #cBot {display: none;}

@media (orientation: portrait) {
#svgLOGOmob {display: block;}
#cTop {display: block; width: 40vw; height: auto; position: fixed; top: 1em; right: 5px; z-index: 5;}
#cBot {display: block; width: 40vw; height: auto; position: fixed; bottom: 1em; right: 5px; z-index: 5;}
}

@media (max-width: 700px) {
#svgLOGOmob {display: block;}
#cTop {display: block; width: 60vw; height: auto; position: fixed; top: 1em; right: 5px; z-index: 5;}
#cBot {display: block; width: 60vw; height: auto; position: fixed; bottom: 1em; right: 5px; z-index: 5;}
}


@media (orientation: landscape) {
#svgLOGO2 {display: block;}
}

.landingBODY { /* overflow-y: hidden; */ width: 100%; height: 100%; position: fixed;}

#landing {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.picture {
    height: 100%;
  width: 100%;
}


.phone {
flex: 1 1 auto;
max-width: 100%;
min-width: 0%;
max-height: 100%;
min-height: 0%;
object-fit: contain;
padding: 0.5em;
}

/* TABLE OF CONTENTS the whole body is in .container1, grid layout page template for whole site also setting default margins. It will be the next object. The main content is also effected by .text1 and .text1a, text1a was just for the underline animation, text1 is a sub-template that sets grid placement of content, content fade in times, and further margins at the top and bottom of the page, at the moment this page shares the same sub-template as the pages with the downloads on. At the moment I'll leave the line animation here separate from the fade in  */


#TOC > h3 {margin-bottom: 2rem;} /*space in between the menu items */
#TOC h3 a {font-size: 130% ;}

@media (orientation: portrait) {
#TOC h3 a {font-size: 100%;}
}

@media (max-width: 700px) {
#TOC > h3 {margin-bottom: 1em;}
#TOC h3 a {font-size: 115%;}
}


/* flex for pages like TOC with minimal text, THE ONLY PAGES I AM DOING flex at the moment is toc and about me but will give the others a class .FooterText for their styling later, I'm placing those footers outside .container1 rather than nesting container1 in flex for the low content pages */

.FooterFlex {display: flex; flex-direction: column; min-height: 100vh; width: 100vw; }
.FooterFlexText {margin-top: auto; }
.FooterFlexText, .FooterText {padding-left: 0.3em;}

/* LINE FADE IN FOR TOC - ALL CSS, NO JAVASCRIPT */
/* remove the default underline and add a custom one. */
.text1a a {
    text-decoration: none; /* Remove the standard underline */
    position: relative; /* Needed for positioning the pseudo-element underline */
}

/* Create the custom underline using the ::after pseudo-element */
.text1a a::after {
    content: '';
    position: absolute;
    bottom: -1.4px; /* Position the underline slightly below the text */
    left: 0;
    width: 100%;
    height: 1.5px; /* Thickness of the underline */
    background-color: currentColor; /* Matches the link color */

    /* Initial state for the drawing effect: 
     * Start with a horizontal scale of 0 (invisible line) */
    transform: scaleX(0); 
    transform-origin: left; /* Ensure the line draws from the left */
    
    /* Apply the animation to the underline.
     * We use a slight delay relative to the main text fade-in. */
    animation: underlineDraw 1000ms ease-out 3290ms forwards; }

/* Define the keyframes for the underline drawing animation */
@keyframes underlineDraw {
    /* The underline starts completely collapsed (invisible) */
    0% {
        transform: scaleX(0);
    }
    /* The underline finishes fully drawn out */
    100% {
        transform: scaleX(1);
    }
}

/* MAIN PAGE TEMPLATES, ONE MAIN TEMPLATE AND 2 SUBTEMPLATES FOR ALL PAGES EXCEPT LANDING PAGE, THIS ALL NEEDS TO BE TIDIED UP */
/* column margin set in % top margin set in em */

.container1 {display: grid; width: 100vw; grid-template-columns: 5% 48% 12% minmax(0px, 35%); grid-template-rows: 1em auto 1fr; } 

.header1 {grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; max-width: 100%; max-height: 100%; min-width: 0%; object-fit: contain; margin-top: 2.5rem;}

.text1 {grid-row-start: 3; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4; ;}
.text2 {grid-row-start: 3; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4; ;}

/* this is all that is setting bottom margins now except on the pages with flex, makes sense as main content block for text and downloads, so margins are consistent. On pages with downloads add an extra rem margin top to footer, need to rationalise bottom margin later */ 
.text1, .text2 {margin-bottom: 5rem;}
.FootMtop {margin-top: 1rem;}


/* setting the top margin for the first child of content blocks and other styling for content blocks */

.text1 > :first-child {margin-top: 5rem;} 
.text2 > :first-child {margin-top: 4rem;} 

.download {margin-top: 1em;} 

.coverT {margin-bottom: 4.5rem;}
.coverB {margin-top: 3.5rem;}


.coverT, .coverB {display: block; width: 45%; height: auto;}

#email1 {width: 80%; height: auto; }
#email2 {width: 80%; height: auto; }

/* bottom grid for download */
/* coverB already has top margin set on it in block context and a width of 45% of its previous containing box, inline styling in html has to be moved here */

.grid2 {display: grid; width: 100%; grid-template-columns: 45% 55%;}
.coverB {grid-column-start: 1; grid-column-end: 2; width: 100%; height: auto; }
.button {width: 7em; height: auto; grid-column-start: 2; grid-column-end: 3; margin-left: 20%; margin-top: 50%;}
.buttonIMG {width: 100%; height: auto; object-fit: contain;}

/* tablet version */
@media (orientation: portrait) {
.container1 {display: grid; width: 100vw; grid-template-columns: 5% 60% 20% 15%; grid-template-rows: 1em auto 1fr; }

.text1 > :first-child {margin-top: 3.5rem;} 
.text2 > :first-child {margin-top: 2.5rem;} 
.text1, .text2 {margin-bottom: 5rem;}

.coverT {margin-bottom: 2.5rem;}
.coverB {margin-top: 2rem;}
}

/* phone version, needs to be tidied up a lot, negative margin-left on header1 and reduced padding right on container 1 given to text 1 and 2 to try to get the logo bigger, it's better but need to look at the whole issue more properly, padding-right was set at 1.5em on container and not on text1 or text2, the logo is getting bigger but setting extra padding isn't working on text1 and text2 even though it worked on header1, maybe try extra margin on those elements on that side */
@media (max-width: 700px) { 
.container1 {display: block; padding-left: 1em; padding-right: 0.5em;}
.container1 {margin-block-start: 0; margin-block-end: 0; margin-top: 4em;}

.header1 {width: 100%; height: auto; display: block; margin-top: 0; margin-left: -0.25em;}
.text1, .text2 {margin-bottom: 5rem; padding-right: 1em;}

.coverT, .coverB {display: block; width: 75%; height: auto;}
.coverT {margin-bottom: 3rem;}
.coverB {margin-top: 3rem; margin-left: auto; margin-right: auto; margin-bottom: 0;}

.grid2 {display: block}
.button {height: auto; width: 5em; display: block; margin-top: 3em; margin-left: auto; margin-right: auto; }

.text1 > :first-child {margin-top: 3.5rem;} 
.text2 > :first-child {margin-top: 2.5rem;} 

#email1 {width: 90%; height: auto; }
#email2 {width: 90%; height: auto; }
}

/* CONTENT FADE IN */

.text1, .text2 {
   
    opacity: 0;
    /* transform: translateY(20px); */ 
    animation: textFadeIn 5s ease 1s forwards;
}
@keyframes textFadeIn {
    0% {
        opacity: 0;
       /* transform: translateY(20px);  */
    }
    
    100% {
        opacity: 1;
        /* transform: translateY(0);  Move back to its original position */
    }
}



/* NAVIGATION NAVIGATION NAVIGATION now I'm removing the menu and just dont the arrows */

/* menu styling - menuHead was the headline of menu, not using at moment. */

.arrows {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s linear;
width: 100%; 
height: auto; 
/* display: block; */ 
object-fit: contain;
z-index: 25;
}

.arrows.active {
  pointer-events: auto;
  opacity: 1;
}


#left, #right {
  position: fixed;
  z-index: 25;
  /* touch-action: manipulation; */ 
}

#left {
  left: 0;
  top: 55vh;
  width: 5em;
  height: auto;
}

#right {
  right: 0;
  top: 55vh;
  width: 5em;
  height: auto;

}

.arrowTOC {z-index: 0;}

.arrowsUL > a {text-decoration-line: none;}

.arrowIMG { width: 100%; height: auto; object-fit: contain;}

/* portrait version */ 
@media (orientation: portrait) {

#left {position: fixed; left: 1px; top: 50vh;}

#right {position: fixed; right: 1px; top: 50vh;}

}

/* mobile version */
@media (max-width: 700px) { 

#left {position: fixed; left: 0; top: 60vh; }

#right {position: fixed; right: 0; top: 60vh; }

#right, #left {width: 4em;}

} 

/* Menu Image and Menu */

#container1id {transition: filter 0.5s ease;}
.blur {filter: blur(8px);}

.menuImageC {position: fixed; top: 2em; right: 3em; opacity: 0; pointer-events: none; width: 5em; height: auto; z-index: 21; cursor: pointer;
transition: opacity 0.5s linear; object-fit: contain; -webkit-tap-highlight-color: transparent;  }
.menuImage2 {width: 100%; height: auto; object-fit: contain;}

.menuImageC.active {pointer-events: auto; opacity: 1; }

.menuC1 {display: grid; grid-template-columns: 1fr minmax(min-content, max-content); grid-template-rows: minmax(min-content, max-content) 1fr;
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
overflow-y: visible;
z-index: 20;
pointer-events: none;
}

.menuC2 {grid-row: 1 / 2; grid-column: 2 / 3;
  max-height: 100vh;
  overflow-y: auto;
  opacity: 0; pointer-events: none; z-index: 20; transition: opacity 1s linear; border: 8px solid rgb(0, 0, 0); border-radius: 42px; background-color: rgb(71, 71, 71); object-fit: cover; padding-left: 2.5em; padding-bottom: 2em; padding-right: 3em;
margin-top: 1em; margin-right: 1em;}
/* border-radius of the phone corners is 42 px */ 

div.menuC2 p {margin-block-start: 0.5em; margin-block-end: 0.5em;}
div.menuC2 p:nth-child(2) {margin-block-start: 1em;}

#menuLogoC {width: 15em; height: auto; margin-left: auto; margin-right: auto; margin-block-start: 2em; margin-block-end: 0;}

#menuLogo {width: 100%; height: auto; object-fit: contain;}

.menuC2.active {pointer-events: auto; opacity: 1;}

.menuCurrent {font-weight: bold; color: rgb(248, 119, 24); margin-block-start: 0; margin-block-end: 0; margin-top: 0; margin-bottom: 0; font-size: 140%;}
a.menuText {font-weight: bold; font-size: 125%; color: rgb(241, 242, 242) !important; }
a.menuText {margin-block-start: 0; margin-block-end: 0; margin-top: 0; margin-bottom: 0;}

.menuCurrent {animation-name: CHANGE;
animation-duration: 30s;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-delay: 5s;
animation-iteration-count: infinite;
}

@keyframes CHANGE {

0% {color: rgb(248, 119, 24);}
4% {color: seagreen; }
24% {color: seagreen;}
28% {color: firebrick;}
48% {color: firebrick;}
52% {color: rebeccapurple;}
72% {color: rebeccapurple;}
76% {color: rgb(248, 119, 24);}
100% {color: rgb(248, 119, 24);}
}


/* portrait version */

@media (orientation: portrait) {

.menuImageC {top: 1em; right: 1em; width: 4em; height: auto;}

.menuC1 {display: flex; height: 100vh; width: 100vw; justify-content: center; align-items: center; padding-bottom: 1em;}

.menuC2 {padding-left: 2em; padding-bottom: 2em; padding-right: 2em;}

.menuCurrent {font-size: 130%;}
a.menuText {font-size: 130%; }
#menuLogoC {width: 15em; margin-block-start: 2.25em;}


 }

/* mobile version */

@media (max-width: 700px) { 

.menuImageC {top: 1em; right: 1em; width: 4em; height: auto;}

.menuC1 {display: flex; height: 100vh; width: 100vw; justify-content: center; align-items: center;}

.menuC2 {padding-left: 1em; padding-bottom: 1.4em; padding-right: 1em;}

.menuCurrent {font-size: 110%;}
a.menuText {font-size: 110%; }
#menuLogoC {width: 13em; margin-block-start: 2.25em;}
div.menuC2 p {margin-block-start: 0.75em; margin-block-end: 0.75em;}
}