/* Generic Base CSS */


/* Initial settings */
button { all: unset; }

* {
    box-sizing: border-box;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-align: inherit;
}


/* Text decoration */
.underline { text-decoration: underline; }
.italic { font-style: italic; }

/* Text alignment */
.txLeft { text-align: left; }
.txCenter { text-align: center; }
.txRight { text-align: right; }
.txJustify { text-align: justify; }

/* Widths */
.maxWidth15 { max-width: 15rem; }
.maxWidth20 { max-width: 20rem; }
.maxWidth25 { max-width: 25rem; }
.maxWidth25 { max-width: 25rem; }

.width100pc { width: 100%;}

/* Heights */
.minHeight100vh { min-height: 100vh; }

/* Margins and padding */
.marg0-5 { margin: 0.5rem; }
.margT0-5 { margin-top: 0.5rem; }
.margR0-5 { margin-right: 0.5rem; }
.margB0-5 { margin-bottom: 0.5rem; }
.margL0-5 { margin-left: 0.5rem; }
.margTB0-5 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.margRL0-5 { margin-right: 0.5rem; margin-left: 0.5rem; }

.marg1 { margin: 1rem; }
.margT1 { margin-top: 1rem; }
.margR1 { margin-right: 1rem; }
.margB1 { margin-bottom: 1rem; }
.margL1 { margin-left: 1rem; }
.margTB1 { margin-top: 1rem; margin-bottom: 1rem; }
.margRL1 { margin-right: 1rem; margin-left: 1rem; }

.pad0-5 { padding: 0.5rem; }
.padT0-5 { padding-top: 0.5rem; }
.padR0-5 { padding-right: 0.5rem; }
.padB0-5 { padding-bottom: 0.5rem; }
.padL0-5 { padding-left: 0.5rem; }
.padTB0-5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.padRL0-5 { padding-right: 0.5rem; padding-left: 0.5rem; }

.pad1 { padding: 1rem; }
.padT1 { padding-top: 1rem; }
.padR1 { padding-right: 1rem; }
.padB1 { padding-bottom: 1rem; }
.padL1 { padding-left: 1rem; }
.padTB1 { padding-top: 1rem; padding-bottom: 1rem; }
.padRL1 { padding-right: 1rem; padding-left: 1rem; }

.pad2 { padding: 2rem; }
.padT2 { padding-top: 2rem; }
.padR2 { padding-right: 2rem; }
.padB2 { padding-bottom: 2rem; }
.padL2 { padding-left: 2rem; }
.padTB2 { padding-top: 2rem; padding-bottom: 2rem; }
.padRL2 { padding-right: 2rem; padding-left: 2rem; }


/* ---- Flex Containers ---- */
.flexbox { display: flex; }

/* flex-direction: */
/*.flxRow { flex-direction: row; } /* default */
.flxCol { flex-direction: column; }
.flxRowReverse { flex-direction: row-reverse; }
.flxColReverse { flex-direction: column-reverse; }

/* flex-wrap: */
/*.flxNoWrap { flex-wrap: nowrap; } /* default */
.flxWrap { flex-wrap: wrap; }
.flxWrapReverse { flex-wrap: wrap-reverse; }

/* justify-content: */
/*.jcStart { justify-content: flex-start; } /* default */
.jcEnd { justify-content: flex-end; }
.jcCenter { justify-content: center; }
.jcSpaceEvenly { justify-content: space-evenly; }
.jcSpaceAround { justify-content: space-around; }
.jcSpaceBetween { justify-content: space-between; }

/* align-items: */
/*.aiStretch { align-items: stretch; } /* default */
.aiCenter { align-items: center; }
.aiStart { align-items: flex-start; }
.aiEnd { align-items: flex-end; }
.aiBaseline { align-items: baseline; }

/* flex-grow, flex-shrink, flex-basis */
.flxGrow { flex-grow: 1; }


/* ---- Grid ---- */
.grid2Cols { grid-column: span 2; }
.grid3Cols { grid-column: span 3; }
.grid4Cols { grid-column: span 4; }

/* For Dev */
.r { border: 1px solid #f00; }
.g { border: 1px solid #0f0; }
.b { border: 1px solid #00f; }
.y { border: 1px solid #ff0; }
.c { border: 1px solid #0ff; }
.m { border: 1px solid #f0f; }



/* CSS for DJG portfolio website */

:root {
    /* Colours */
    --bgOverlay: rgba( 0, 0, 0, 0.2 );
    --bgSolid: #181818; /* rgba( 24, 24, 24, 1 ) */
    --bgPrimary: #00502c; /* rgba( 0, 80, 44, 1 ) */
    --bgSecondary: rgba( 217, 203, 140, 0.4 );
    --bgSecondary0: rgba( 217, 203, 140, 0 );
    --frame: #d9cb8c; /* rgba( 217, 203, 140, 1 ) */
    --shadow: #000000;
    --shadowWithOpacity: rgba(0,0,0,0.5);

    --tx: #d8d8d8; /* rgba( 216, 216, 216, 1 ) */
    /*--tx0: rgba( 216, 216, 216, 0.1 );*/
    --txSubtle: #b8b8b8;
    --txLink: #ffe090; /* rgba( 255, 224, 144, 1 ) */

    --atBg: #f9f2d7; /* rgba( 249, 242, 215, 1 ) */
    --atMenuBg: #282828;
    /*--atFr0: #d6c99c; /* atFr0 rgba( 214, 201, 156, 1 ) */
    --atFr: #beb486; /* atFr1 rgba( 190, 180, 134, 1 ) */
    --atTx: #303030;
    --atLink: #008a4e;
    --atShow: #005028; /* rgb( 0, 80, 40 ); */
    --atStep: #004848; /* rgb( 0, 72, 72 ); */
    --atIndp: #000878; /* rgb( 0, 8, 120 ); */

    --eRayBg: #060d13;

    --plBtnLight: #484848;
    --plBtnDark: #202020;

    /* Minimum Header and Footer heights */
    --hHeight: 0rem;
    --fHeight: 8.25rem;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    :root {
        --hHeight: 0rem;
        --fHeight: 3.625rem;
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root {
        --hHeight: 4.4375rem;
        --fHeight: 8.8125rem;
    }
}
:root { --hfHeight: calc(var(--hHeight) + var(--fHeight)); }

/* Site Fonts */
@font-face { /* open-sans-300 - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-300.woff2') format('woff2');
}
@font-face { /* open-sans-300italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-300italic.woff2') format('woff2');
}
@font-face { /* open-sans-regular - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2');
}
@font-face { /* open-sans-italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2');
}
@font-face { /* open-sans-700 - latin */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2');
}
@font-face { /* open-sans-700italic - latin */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2');
}
@font-face { /* roboto-mono-300 - latin */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/roboto0-mono-v23-latin-300.woff2') format('woff2');
}
@font-face { /* roboto-mono-regular - latin */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto0-mono-v23-latin-regular.woff2') format('woff2');
}


/* Background and text */
html {
    width: 100vw;
    height: 100vh;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tx);
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}
body { display: block; }
.bg {
    width: 100vw;
    height: 100vh;
    background-color: var(--bgSolid);
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle at 40% 0%, var(--bgSecondary), 35%, var(--bgSecondary0)),
        linear-gradient(175deg, var(--bgSolid), var(--bgPrimary));
}
.bgSolid { background-color: var(--bgSolid); }

h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p { font-size: 1rem; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
    h5 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
    p { font-size: 1.25rem; }
}

a:hover, a:active { color: var(--txLink); }
a:hover, a:active, button:hover, button:active { cursor: default; }
@media (hover: hover) {
    a:hover, button:hover { cursor: pointer; }
}


/* Site structure */
div#siteWrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1 1 100%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
section {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    overflow-x: hidden;
    overflow-y: auto;
}


/* Main Menu */
button#openMenu {
    z-index: 15;
    position: fixed;
    top: 0;
    right: 0;
    width: 3.75rem;
    border-radius: 0 0 0 0.625rem;
    padding: 0.5rem 0;
    background-color: var(--bgOverlay);
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.openMenu { width: 2.5rem; height: 1.75rem; }
nav#sideNav {
    z-index: 20;
    position: fixed;
    top: 0;
    width: 14rem;
    border-radius: 0 0 0 0.75rem;
    padding: 0.5rem;
    background-color: var(--bgSolid);
    box-shadow: var(--shadow) 0 0 0.5rem;
    display: flex;
    flex-direction: column;
}
nav.sideNavOff { right: -15rem; }
button#closeMenu {
    z-index: 25;
    align-self: flex-end;
    margin: 0 0 -0.75rem 0;
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.closeMenu { width: 1.5rem; height: 1.5rem; }
nav#sideNav > a {
    padding: 0.5rem 1rem;
    font-weight: 300;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    nav#sideNav {
        width: 24rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    nav.sideNavOff { right: -25rem; }
    button#closeMenu, div.menuHeading { grid-column: span 2; }
    button#closeMenu {
        align-self: stretch;
        justify-self: end;
    }
    nav#sideNav > a {
        padding: 0.25rem 1rem;
        text-align: center;
    }
}
nav.sideNavOn { right: 0; }
div#topNavWrapper { display: none }
@media (width > 65rem) and (height > 36rem) { /* When wide enough for top menu with no text wrap */
    button#openMenu, nav#sideNav { display: none; }
    div#topNavWrapper {
        z-index: 10;
        padding: 0.5rem 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.25;
    }
    nav#topNav {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, 6rem) repeat(6, auto);
    }
    nav#topNav > a {
        padding: 0.5rem 0.75rem 1rem;
        font-size: 1.125rem;
        font-weight: 300;
        text-align: center;
    }
}
a.currentView { color: var(--txLink); }
div.menuHeading {
    min-width: 10rem;
    display: flex;
    align-items: center;
}
h6.menuHeading {
    padding: 0 0 0 0.125rem;
    color: var(--frame);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.125rem;
}
div.menuLineL, div.menuLineR {
    flex-grow: 1;
    height: 0.0625rem;
}
div.menuLineL {
    background-image: linear-gradient(270deg, var(--bgSecondary), var(--bgSecondary0) );
}
div.menuLineR {
    background-image: linear-gradient(90deg, var(--bgSecondary), var(--bgSecondary0) );
}


/* Separator Lines */
.separatorT, .separatorTB, .separatorB {
    border-image-source: linear-gradient( 90deg, var(--bgSecondary0), var(--bgSecondary), var(--bgSecondary0) );
}
.separatorT {
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-image-slice: 100 0 0 0;
}
.separatorTB {
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-bottom-width: 0.0625rem;
    border-bottom-style: solid;
    border-image-slice: 50 0 50 0;
}
.separatorB {
    border-bottom-width: 0.0625rem;
    border-bottom-style: solid;
    border-image-slice: 0 0 100 0;
}

/* Section Titles */
div.sectionTitle {
    padding: 2rem 1rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
img.sectionTitle {
    width: 4rem; height: 4rem;
    border-radius: 0.8rem;
    background-color: var(--frame);
    box-shadow: var(--frame) 0 0 0.5rem;
}
img.minorTitle { width: 3rem; height: 3rem; }
h1.sectionTitle, h2.sectionTitle {
    padding: 0.75rem 0 0 0;
    text-align: center;
}
div.longerTitle {
    padding: 1rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.25;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    div.sectionTitle {
        margin: 0 3rem;
        padding: 1.5rem 1rem;
        flex-direction: row;
    }
    h1.sectionTitle, h2.sectionTitle { padding: 0 0 0 1rem; }
    div.longerTitle { padding: 0 0 0 1rem; }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.sectionTitle {
        margin: 0 4rem;
        padding: 1.5rem;
        flex-direction: row;
    }
    img.sectionTitle {
        width: 5rem; height: 5rem;
        border-radius: 1rem;
    }
    h1.sectionTitle, h2.sectionTitle {
        padding: 0 0 0 1.25rem;
        text-align: left;
    }
    div.longerTitle { padding: 0 0 0 1rem; }
}


/* App Store Badges */
div.appStoreWrapper {
    width: min(80%, 32rem);
    padding: 0.75rem 0;
    display: flex;
    justify-content: space-between;
}
a.appleBadge, a.googleBadge {
    margin: 0.75rem 0;
    width: 100%;
    display: flex;
}
img.appBadge { width: 100%; }
h6.appStoreLegal {
    width: 70%;
    padding: 0 0.75rem 1rem 0.75rem;
    text-align: center;
    text-wrap: balance; /* Experimental */
}
a.appleBadge { width: 42%; }
a.googleBadge { width: 47%; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.appStoreWrapper { width: min(80%, 36rem); }
    h6.appStoreLegal {
        width: min(70%, 48rem);
    }
}


/* Footer */
footer {
    z-index: 9;
    margin-top: auto;
    width: 100%;
    border-top-width: 0.0625rem;
    border-top-style: solid;
    border-image-slice: 100 0 0 0;
    border-image-source: linear-gradient( 90deg, var(--bgSecondary), var(--bgSecondary0) );
    padding: 0.5rem 0 1.5rem 0.5rem;
    color: var(--txSubtle); 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
a.miniMenu {
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
}
img.miniMenu {
    margin-right: 0.375rem;
    width: 1rem; height: 1rem;
    text-align: center;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    footer {
        padding: 0.5rem 0 1rem 0.5rem;
        flex-direction: row;
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    footer { padding: 0.75rem 0 1.25rem 1rem; }
}

/* CSS specifically for the home page */

section#home {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

div.spacer { flex: 0.5 1 0; }

/* DJG Hero Mug and Sig */
div#djgHero {
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
img#mug {
    width: min(90vw, 60vh, 7.5rem);
    height: min(90vw, 60vh, 7.5rem);
    border-radius: 50%;
}
img#sig {
    width: min(90vw, 200vh, 25rem);
    height: min(18vw, 40vh, 5rem);
}
h6.djgPortfolio {
    padding: 0 0 0.5rem 0;
    color: var(--frame);
    text-align: center;
}
span.djgPortfolio { letter-spacing: 0.75rem; }
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    div#djgHero { flex-direction: row; }
    img#mug { width: min(25vw, 30vh, 6rem); height: min(25vw, 30vh, 6rem); }
    img#sig { width: min(75vw, 125vh, 25rem);  height: min(15vw, 25vh, 5rem); }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    img#mug { width: 11.25rem; height: 11.25rem; }
    img#sig { width: 33.75rem; height: 6.75rem; }
}

/* Site menu */
div#homeNavWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
nav#homeNav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

a.majorLink {
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (width <= 32rem) {
    nav#homeNav { grid-template-columns: repeat(3, 1fr); }
    a.majorLink:last-child { grid-column-start: 2; }
}
img.majorLink {
    margin: 0.5rem;
    width: 3rem; height: 3rem;
    border-radius: 0.6rem;
    box-shadow: var(--shadowWithOpacity) 0 0 0.5rem;
}
a.majorLink:hover > img.majorLink, a.majorLink:active > img.majorLink {
    box-shadow: var(--txLink) 0 0 0.5rem;
}
h5.majorLink {
    padding: 0.25rem;
    text-align: center;
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    a.majorLink { padding: 0.5rem 0 0; }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    img.majorLink {
        width: 4rem; height: 4rem;
        border-radius: 0.8rem;
    }
}


/* CSS common to the main articles */


/* Hero elements */
div.hero {
    flex-shrink: 0;
    width: 100%;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
p.hero {
    max-width: min(40rem, 90%);
}
p.heroTx {
    font-size: 1.5rem;
    text-align: center;
    text-wrap: balance; /* Experimental */
}
img.hero {
    width: 100%;
    display: block;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.hero { padding: 5rem 0; }
    p.heroTx { font-size: 1.75rem; }
}

/* Block paragraphs */
div.blockPara {
    flex-grow: 1;
    flex-shrink: 0;

    padding: 2rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h3.blockPara, p.blockPara {
    max-width: min(85%, 25rem);
    padding: 0.5rem 0;
}
h3.blockPara {
    text-align: center;
}
p.blockPara {
    text-align: justify;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    h3.blockPara, p.blockPara { max-width: min(85%, 30rem); }
}

/* Hero image banners */
div.heroImgs2 {
    flex-shrink: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
}
@media (width > 48rem) { /* Too wide for single full width img */
    div.heroImgs2 { flex-direction: row; }
    div.heroImgs2 > img { width: 50%; }
}



/* CSS for the About view */

section#ab {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.aboutArticle {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
p.aboutPara {
    width: min(90vw, 36rem);
    padding: 1rem 0;
    text-align: justify;
}
div.aboutArticle > h4 { padding: 1rem 0 0.25rem; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    p.aboutPara { width: min(90vw, 46rem); }
}

/* CSS for Algebra Tutor article */


section#at {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* F12 parallax */
:root { --w: min(100vw, 100vh); }
div.f12Container {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: calc((var(--w) * 0.75) + 0.125rem);
    overflow-x: visible;
    overflow-y: clip;
    /*background-color: var(--bgSolid);/*#6c645e;*/
}
div.f12Container > img { display: block; }
img.mrG {
    position: relative;
    left: calc((100vw - var(--w)) / 2);
    width: var(--w);
    height: calc(var(--w) * 0.75);
}
img.room, img.pupils {
    position: absolute;
    left: calc(((100vw - var(--w)) / 2) - (var(--w) * 0.15));
    width: calc(var(--w) * 1.3);
}
img.room { top: calc(var(--w) * -0.075); }
img.pupils { top: 0; }
@supports (animation-timeline: view()) {
    img.room, img.pupils {
        animation-timing-function: ease-in-out;
        animation-timeline: view(); /* Experimental */
    }
    img.room { animation-name: parallaxRoom; }
    img.pupils { animation-name: parallaxPupils; }
    @keyframes parallaxRoom {
        0% { transform: translateY(calc(var(--w) * -0.075)); }
        100% { transform: translateY(calc(var(--w) * 0.075)); }
    }
    @keyframes parallaxPupils {
        0% { transform: translateY(calc(var(--w) * 0.075)); }
        100% { transform: translateY(calc(var(--w) * -0.075)); }
    }
}

/* Students choose */
div#studentsChoose {
    flex-shrink: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}
p#choosePara {
    max-width: min(40rem, 90%);
    padding: 4rem 0 3.5rem 0;
}
div#chooseEgs {
    position: relative;
    padding: 0 0 3rem 1rem;

    display: flex;
    justify-content: center;
}
img#chooseA, img#chooseB {
    width: min(50%, 30rem, 70vh);
    box-shadow: var(--shadow) 0 0 0.5rem;
}
img#chooseB {
    position: relative;
    top: 1rem;
    left: -1rem;
}


/* Algebra Tutor Modes and Revision */
:root { --modeIconWidth: 10rem; }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root { --modeIconWidth: 14rem; }
}
div#showIcon, div#stepIcon, div#indpIcon, div#revBadges {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
div#showIcon, div#stepIcon, div#indpIcon {
    background-repeat: no-repeat;
    background-size: var(--modeIconWidth);
    background-attachment: fixed;
    background-position: center;
    color: #fff;
}
div#showIcon {
    background-color: var(--atShow);
    background-image: url('/imgs/at/Eye.svg');
}
div#stepIcon {
    background-color: var(--atStep);
    background-image: url('/imgs/at/Steps.svg');
}
div#indpIcon {
    background-color: var(--atIndp);
    background-image: url('/imgs/at/Bird.svg');
}
p#showPara, p#stepPara, p#indpPara, p#revPara {
    align-self: center;
    max-width: min(40rem, 90%);
    padding: 7rem 0;
}

/* Videos and img animation */
:root {
    --showVideoRatio: 150vh;
    --stepVideoRatio: 80vh;
    --indpVideoRatio: 119vh;
    --revImgRatio: 150vh;
}
div#showVideoWrapper, div#indpVideoWrapper { background-color: var(--atBg); }
div#stepVideoWrapper { background-color: var(--bgSolid); }
div#revImgWrapper {
    background-color: var(--atMenuBg);
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    place-items: center;
}
div#revImgWrapper > img {
    grid-area: 1 / 1;
}
video.modeVideo {
    width: 100%;
    display: block;
}
@media (width > 36rem) { /* Too wide for full width video */
    div#showIcon, div#stepIcon, div#indpIcon, div#revBadges {
        justify-content: center;
    }
    div#showIcon, div#indpIcon { flex-direction: row-reverse; }
    div#stepIcon, div#revBadges { flex-direction: row; }
    div#showIcon { background-position: calc((100% + min(50% + (var(--modeIconWidth) / 2), 36rem, var(--showVideoRatio))) / 2) 50%; }
    div#stepIcon { background-position: calc((100% - min(50% + (var(--modeIconWidth) / 2), 36rem, var(--stepVideoRatio))) / 2) 50%; }
    div#indpIcon { background-position: calc((100% + min(50% + (var(--modeIconWidth) / 2), 36rem, var(--indpVideoRatio))) / 2) 50%; }
    p#showPara, p#stepPara, p#indpPara, p#revPara {
        flex: 1 1 50%;
        padding: 2rem;
    }
    p#showPara { max-width: calc(72rem - min(50%, 36rem, var(--showVideoRatio))); }
    p#stepPara { max-width: calc(72rem - min(50%, 36rem, var(--stepVideoRatio))); }
    p#indpPara { max-width: calc(72rem - min(50%, 36rem, var(--indpVideoRatio))); }
    p#revPara { max-width: calc(72rem - min(50%, 36rem, var(--revImgRatio))); }
    div#showVideoWrapper, div#stepVideoWrapper, div#indpVideoWrapper {
        display: flex;
        align-items: center;
    }
    div#showVideoWrapper { width: min(50%, 36rem, var(--showVideoRatio)); }
    div#stepVideoWrapper { width: min(50%, 36rem, var(--stepVideoRatio)); }
    div#indpVideoWrapper { width: min(50%, 36rem, var(--indpVideoRatio)); }
    div#revImgWrapper { width: min(50%, 36rem, var(--revImgRatio)); }
}

/* Revision animation */
img.revisionFader {
    animation-name: revisionFading;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes revisionFading {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* Algebra Tutor rendered logo */
div.atxyz { min-height: calc(100vh - var(--hfHeight)); }
img.atxyz {
    margin: 2rem 0 0 0;
    width: min(50%, 40.75rem);
}
@media (width > 36rem) and (height <= 36rem) { /* Landscape mobile */
    img.atxyz {
        margin: 1rem 0 0 0;
        width: min(30%, 40.75rem);
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    img.atxyz {
        margin: 1rem 0 0 0;
        width: min(20%, 40.75rem);
    }
}

/* CSS for Vocab Maestro view */

section#vm {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* VM Flags */
div#vmFlags {
    width: min(90vw, 36rem);
    padding: 3rem 0;
    display: flex;
    justify-content: space-between;
}
img.vmFlag {
    width: min(18vw, 5.625rem);
    height: min(12vw, 3.75rem);
    box-shadow: var(--shadowWithOpacity) 0 0 0.5rem 0;
}

/* Paragraphs */
p.vmPara {
    width: min(90vw, 48rem);
}

/* VM Screenshots */
:root { /* 1 Screenshot in width */
    --screenshotEntryTime: 0.75s; /* Must match vm.js value */
    --vmShotGridWidth: min(90vw, 160vh, 96rem);
    --vmShotRadius: calc(min(90vw, 160vh, 96rem) * 16 / 525);
}
@media (width > 48rem) { /* 2 Screenshots in width */
    :root {
        --vmShotGridWidth: min(90vw, 320vh, 96rem);
        --vmShotRadius: calc((min(90vw, 320vh, 96rem) - 1.5rem) * 8 / 525);
    }
}
div.vmShotPair {
    width: var(--vmShotGridWidth);
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}
@media (width > 48rem) { /* Too wide for single full with img */
    div.vmShotPair {
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5rem;
    }
}
img.vmInvisible { opacity: 0; }
img.vmScreenshot {
    width: 100%;
    aspect-ratio: 21 / 13;
    border-radius: var(--vmShotRadius);
}
img.vmScreenshotEntryL {
    animation-name: animVmFadein, animVmSlideInL;
    animation-duration: var(--screenshotEntryTime);
    animation-timing-function: ease-in, ease-out;
    animation-fill-mode: forwards;
}
img.vmScreenshotEntryR {
    animation-name: animVmFadein, animVmSlideInR;
    animation-duration: var(--screenshotEntryTime);
    animation-timing-function: ease-in, ease-out;
    animation-fill-mode: forwards;
}
@keyframes animVmFadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes animVmSlideInL {
    0% { transform: translateX(-6rem); }
    100% { transform: translateX(0); }
}
@keyframes animVmSlideInR {
    0% { transform: translateX(6rem); }
    100% { transform: translateX(0); }
}

/* eRay */
div.eRay {
    width: 100%;
    min-height: calc(100vh - var(--hfHeight));
    padding: 1rem 0;
    background-color: var(--eRayBg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
a.eRayHeader {
    display: block;
    width: min(90%, 180vh, 36rem);
}
img.eRayHeader {
    width: 100%;
    aspect-ratio: 80 / 27;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    a.eRayHeader { width: min(90%, 180vh, 48rem); }
}
/* CSS for Art Store article */

section#as {
    display: flex;
    flex-direction: column;
    align-items: center;
}

:root { --artParaWidth: min(90vw, 36rem); }
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root { --artParaWidth: min(90vw, 46rem); }
}

div.artArticle {
    width: 100%;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
p.artPara {
    width: var(--artParaWidth);
    padding: 1rem 0;
    text-align: justify;
}
a.artLogo, a.autumnWoodland {
    width: var(--artParaWidth);
    display: flex;
    flex-direction: column;
    align-items: center;
}
a.artLogo {
    margin: 1rem 0;
    padding: calc(var(--artParaWidth) * 0.03125) 0;
    background-color: #33a370;
}
img.artLogo, img.autumnWoodland { display: block; }
img.artLogo {
    width: calc(var(--artParaWidth) * 0.9375);
    aspect-ratio: 135 / 19;
}
a.autumnWoodland { margin: 2rem 0 4rem; }
img.autumnWoodland {
    width: 100%;
    aspect-ratio: 27 / 20;
    box-shadow: var(--shadowWithOpacity) 0.125rem 0.5rem 0.875rem;
}
@media (width > 37.5rem) {
    img.autumnWoodland { box-shadow: var(--shadowWithOpacity) 0.25rem 0.75rem 1.25rem; }
}


/* CSS for Prime Sieve article  */

section#ps {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#ps > *:nth-child(2) { margin-top: 1rem; }
section#ps > *:last-child { margin: 3rem 0 0; }

p.psArticle {
    width: min(90vw, 40rem);
    padding: 1rem 0;
    text-align: justify;
}

img.psShot1, img.psShot2 {
    margin: 1rem 0;
    width: min( 41.25rem, 95vw );
    height: min( 41.25rem, 95vw );
    border-radius: min(1rem, 2.303vw);
}
img.psShot1 { height: min( 41.25rem, 95vw ); }
img.psShot2 { height: min( 53.25rem, 122.6364vw ); }



/* CSS for Premier League points dropped table */

section#pl {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#pl > *:nth-child(2) { margin-top: 1rem; }
section#pl > h4 { 
    padding: 1rem 0.5rem 0.5rem;
    text-align: center;
}
section#pl > *:last-child { margin: 3rem 0 0; }

p.plPara {
    width: min(90%, 32rem);
    padding: 0.5rem 0;
    text-align: justify;
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    section#pl > *:nth-child(2) { margin-top: 1.25rem; }
    section#pl > h4 { padding: 1.25rem 0 0.625rem; }
    p.plPara {
        width: min(90%, 44rem);
        padding: 0.625rem 0;
    }
}


/* PL Table */
:root {
    --plRowHeight: 2.0625rem;

    --plTx: 1rem;
    --plTxLine: 1.25rem;
    --plSmallTx: 0.8125rem;
    --plTinyTx: 0.6875rem;

    --txGood: #70d878;
    --txNotGood: #f0b860;
    --txBad: #ffa0a0;
}
@media (width > 29rem) {
    :root {
        --plRowHeight: 1.5rem;
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root {
        --plRowHeight: 1.5625rem;

        --plTx: 1.25rem;
        --plTxLine: 1.5625rem;
        --plSmallTx: 1rem;
        --plTinyTx: 0.875rem;
    }
}
div.plTable {
    margin: 1.25rem 0;
    width: min(95%, 32rem);
    border-radius: 0.375rem;
    padding: 0.0625rem;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto Mono', monospace;
    font-size: var(--plTx);
    line-height: var(--plTxLine);
    text-align: center;
}
div#plTabs {
    padding: 0.125rem 0.125rem 0.25rem;
    display: flex;
    justify-content: space-evenly;
}
button.plTab { width: 7rem; }
div#plHeader { padding: 0.25rem 0; }
div#plHeader, div.plRow {
    display: grid;
    align-items: center;
    grid-template-columns: 2.125rem 1fr 1.5rem repeat(3, 1.25rem) 1fr 1.5rem repeat(2, 2.125rem) repeat(2, 1.5rem);
    grid-template-areas:
        'pos tea tea tea tea tea tea tea pdr pts dif dif'
        'pos  .  pld won drw los  .  psr ppg ppg for aga';
}
div.noGridPSR div#plHeader, div.noGridPSR div.plRow {
    display: grid;
    align-items: center;
    grid-template-columns: 2.125rem 1fr 1.5rem repeat(3, 1.25rem) 1fr 0rem repeat(2, 2.125rem) repeat(2, 1.5rem);
    grid-template-areas:
        'pos tea tea tea tea tea tea  .  pdr pts dif dif'
        'pos  .  pld won drw los  .  psr ppg ppg for aga';
}
div#plHeader > button, div#plTabs > button {
    align-self: stretch;
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    background-image: linear-gradient(170deg, var(--plBtnLight), var(--plBtnDark));
}
div#plHeader > button:active, div#plTabs > button:active {
    background-image: linear-gradient(350deg, var(--plBtnLight), var(--plBtnDark));
}
button.plSelected {
    background-image:
        url('/imgs/pl/PointerTop.svg'),
        url('/imgs/pl/PointerBottom.svg'),
        linear-gradient(170deg, var(--plBtnLight), var(--plBtnDark)) !important;
    background-size: 0.5625rem 0.25rem, 0.5625rem 0.25rem, cover;
    background-position: top, bottom, center;
    background-repeat: no-repeat;
}
div.plPSR { overflow: hidden; }
.plWon, .plGF { color: var(--txGood); }
.plDrw { color: var(--txNotGood); }
.plLos, .plGA, .plPSR { color: var(--txBad); }
div.plPos { grid-area: pos; }
div.plTeam {
    grid-area: tea;
    align-self: stretch;
    border-radius: 0.25rem;
    display: grid;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-areas: 'team';
}
div.plLongTeam, div.plShortTeam { grid-area: team; }
div.plLongTeam { display: none; }
div.plShortTeam { display: block; }
.plPD { grid-area: pdr; }
.plPPG { grid-area: ppg; }
.plPts { grid-area: pts; }
div.plPSR { grid-area: psr; }
div.plPld { grid-area: pld; }
div.plWon { grid-area: won; }
div.plDrw { grid-area: drw; }
div.plLos { grid-area: los; }
.plGD { grid-area: dif; }
.plGF { grid-area: for; }
.plGA { grid-area: aga; }
div.plPPG, div.plPSR, div.plPld, .plGD {
    font-size: var(--plSmallTx);
    line-height: var(--plSmallTx);
    font-weight: 300;
}
div.plWon, div.plDrw, div.plLos, div.plGF, button.plGF, div.plGA, button.plGA {
    font-size: var(--plTinyTx);
    line-height: var(--plTinyTx);
    font-weight: 300;
}
div.plKey {
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-family: 'Open Sans', sans-serif;
    font-size: var(--plSmallTx);
    line-height: 1.5;
    font-weight: 300;
    text-align: left;
}
@media (width > 19rem) {
    div#plHeader, div.plRow {
        grid-template-columns: 2.125rem 1fr repeat(2, 2.125rem) 1.5rem repeat(3, 1.25rem) repeat(2, 1.5rem);
        grid-template-areas:
            'pos tea pdr pts psr pld pld pld dif dif'
            'pos tea ppg ppg ppg won drw los for aga';
    }
    div.noGridPSR div#plHeader, div.noGridPSR div.plRow {
        grid-template-columns: 2.125rem 1fr repeat(2, 2.125rem) 0rem repeat(3, 1.25rem) repeat(2, 1.5rem);
        grid-template-areas:
            'pos tea pdr pts psr pld pld pld dif dif'
            'pos tea ppg ppg  .  won drw los for aga';
    }
}
@media (width > 24.75rem) {
    div.plLongTeam { display: block; }
    div.plShortTeam { display: none; }
}
@media (width > 29rem) {
    div#plHeader, div.plRow {
        grid-template-columns: 2.125rem 1fr 2.25rem 3.5rem 2.25rem 1.5rem repeat(3, 1.25rem) repeat(2, 1.75rem);
        grid-template-areas:
            'pos tea pdr ppg pts psr pld pld pld dif dif'
            'pos tea pdr ppg pts psr won drw los for aga';
    }
    div.noGridPSR div#plHeader, div.noGridPSR div.plRow {
        grid-template-columns: 2.125rem 1fr 2.25rem 3.5rem 2.25rem 0rem repeat(3, 1.25rem) repeat(2, 1.75rem);
        grid-template-areas:
            'pos tea pdr ppg pts psr pld pld pld dif dif'
            'pos tea pdr ppg pts psr won drw los for aga';
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div.plTable {
        margin: 1.5rem 0;
        width: min(95%, 44rem);
        border-radius: 0.5rem;
    }
    div#plHeader, div.plRow {
        grid-template-columns: 2.75rem 1fr 2.75rem 4.375rem 2.75rem 1.875rem 2rem repeat(3, 1.5625rem) 3rem repeat(2, 2.1875rem);
        grid-template-areas: 'pos tea pdr ppg pts psr pld won drw los dif for aga';
    }
    div.noGridPSR div#plHeader, div.noGridPSR div.plRow {
        grid-template-columns: 2.75rem 1fr 2.75rem 4.375rem 2.75rem 0rem 2rem repeat(3, 1.5625rem) 3rem repeat(2, 2.1875rem);
        grid-template-areas: 'pos tea pdr ppg pts psr pld won drw los dif for aga';
    }
    div#plHeader > button { padding: 0.3125rem 0; }
    div.plKey { padding: 0.625rem 0.75rem; }
}

/* Table row positioning */
div#plRows {
    position: relative;
    height: calc( var(--plRowHeight) * 20 );
}
div.plRow {
    position: absolute;
    width: 100%;
    transition-property: top, opacity;
    transition-duration: 0.5s, 0.5s;
    transition-timing-function: ease-in-out, ease-in;
}
div.hideRow {
    opacity: 0;
    transition-timing-function: ease-in-out, ease-out;
}
div.pos1 { top: 0; }
div.pos2 { top: var(--plRowHeight); }
div.pos3 { top: calc( var(--plRowHeight) * 2 ); }
div.pos4 { top: calc( var(--plRowHeight) * 3 ); }
div.pos5 { top: calc( var(--plRowHeight) * 4 ); }
div.pos6 { top: calc( var(--plRowHeight) * 5 ); }
div.pos7 { top: calc( var(--plRowHeight) * 6 ); }
div.pos8 { top: calc( var(--plRowHeight) * 7 ); }
div.pos9 { top: calc( var(--plRowHeight) * 8 ); }
div.pos10 { top: calc( var(--plRowHeight) * 9 ); }
div.pos11 { top: calc( var(--plRowHeight) * 10 ); }
div.pos12 { top: calc( var(--plRowHeight) * 11 ); }
div.pos13 { top: calc( var(--plRowHeight) * 12 ); }
div.pos14 { top: calc( var(--plRowHeight) * 13 ); }
div.pos15 { top: calc( var(--plRowHeight) * 14 ); }
div.pos16 { top: calc( var(--plRowHeight) * 15 ); }
div.pos17 { top: calc( var(--plRowHeight) * 16 ); }
div.pos18 { top: calc( var(--plRowHeight) * 17 ); }
div.pos19 { top: calc( var(--plRowHeight) * 18 ); }
div.pos20 { top: calc( var(--plRowHeight) * 19 ); }


/* Team and row colours */
div.plRow {
    background-image: linear-gradient(180deg, #282828, #080808);
}


/* 2025-26
Bizarrely, Burnley got id 3 ?!
1 Arsenal
2 Aston Villa
3 Burnley
4 Bournemouth
5 Brentford
6 Brighton
7 Chelsea
8 Crystal Palace
9 Everton
10 Fulham
11 Leeds Utd
12 Liverpool
13 Man City
14 Man Utd
15 Newcastle
16 Nottm Forest
17 Sunderland
18 Tottenham
19 West Ham
20 Wolves
*/
div#pl0Team1 > div.teamBg {
    background-image:
        linear-gradient(135deg, #ffffff 5%, #ffffff00 15%),
        linear-gradient(225deg, #ffffff 5%, #ffffff00 15%),
        linear-gradient(180deg, #ff3030, #c01010);
}
div#pl0Team2 > div.teamBg {
    background-image:
        linear-gradient(135deg, #a3c9f9 7%, #a3c9f900 13%),
        linear-gradient(225deg, #a3c9f9 7%, #a3c9f900 13%),
        linear-gradient(180deg, #ae042f, #521224);
}
div#pl0Team3 > div.teamBg {
    background-image: linear-gradient(180deg, #872d62, #4b1936);
    color: #80e0ff;
}
div#pl0Team4 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff28, #00000038),
        linear-gradient(90deg, #080808 8%, #f00000 10% 18%, #080808 20% 26%, #f00000 28% 36%, #080808 38% 44%, #f00000 46% 54%, #080808 56% 62%, #f00000 64% 72%, #080808 74% 80%, #f00000 82% 90%, #080808 92%);
    color: #ffe090;
}
div#pl0Team5 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff30, #ffffff00 50%, #00000000 50%, #00000030),
        linear-gradient(90deg, #f0f0f0 13%, #f00000 17% 23%, #f0f0f0 27% 33%, #f00000 37% 43%, #f0f0f0 47% 53%, #f00000 57% 63%, #f0f0f0 67% 73%, #f00000 77% 83%, #f0f0f0 87%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl0Team6 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff30, #00000028),
        linear-gradient(90deg, #0020f0 13%, #f0f0f0 17% 27%, #0020f0 31% 41%, #f0f0f0 45% 55%, #0020f0 59% 69%, #f0f0f0 73% 83%, #0020f0 87%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #006, 0 0 0.2rem #006;
}
div#pl0Team7 > div.teamBg {
    background-image: linear-gradient(180deg, #1050f0, #0828a0);
}
div#pl0Team8 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff40, #ffffff00 50%, #00000000 50%, #00000050),
        linear-gradient(90deg, #f11 4%, #03f 6% 14%, #f11 16% 24%, #03f 26% 34%, #f11 36% 44%, #03f 46% 54%, #f11 56% 64%, #03f 66% 74%, #f11 76% 84%, #03f 86% 94%, #f11 96%);
}
div#pl0Team9 > div.teamBg {
    background-image: linear-gradient(180deg, #0050f0, #0020b0);
}
div#pl0Team10 > div.teamBg {
    background-image: linear-gradient(180deg, #ffffff, #b0b0b0);
    color: #000000;
}
div#pl0Team11 > div.teamBg {
    background-image: linear-gradient(180deg, #fff, #b0b0b0);
    color: #0000ff;
}
div#pl0Team12 > div.teamBg {
    background-image: linear-gradient(180deg, #ff2018, #b00000);
}
div#pl0Team13 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff40, #0c102850),
        linear-gradient(135deg, #40a0e0 41%, #f0f0f0 46% 54%, #40a0e0 59%);
    color: #182050;
}
div#pl0Team14 > div.teamBg {
    background-image: linear-gradient(180deg, #ff2020, #901010);
}
div#pl0Team15 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff30, #00000028),
        linear-gradient(90deg, #f0f0f0 13%, #080808 17% 27%, #f0f0f0 31% 41%, #080808 45% 55%, #f0f0f0 59% 69%, #080808 73% 83%, #f0f0f0 87%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl0Team16 > div.teamBg {
    background-image: linear-gradient(180deg, #f01818, #b01010);
}
div#pl0Team17 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff30, #00000060),
        linear-gradient(90deg, #f00808 13%, #f0f0f0 17% 23%, #f00808 27% 33%, #f0f0f0 37% 43%, #f00808 47% 53%, #f0f0f0 57% 63%, #f00808 67% 73%, #f0f0f0 77% 83%, #f00808 87%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl0Team18 > div.teamBg {
    background-image:
        linear-gradient(110deg, #00105000 2%, #001050 6%, #00105000 10%),
        linear-gradient(250deg, #00105000 2%, #001050 6%, #00105000 10%),
        linear-gradient(180deg, #fff, #b0b0b0);
    color: #001050;
}
div#pl0Team19 > div.teamBg{
    background-image: linear-gradient(180deg, #862e43, #431721);
}
div#pl0Team20 > div.teamBg {
    background-image: linear-gradient(180deg, #f9bb20, #cc9200);
    color: #000000;
}


/* 2024-25
1 Arsenal
2 Aston Villa
3 Bournemouth
4 Brentford
5 Brighton
6 Chelsea
7 Crystal Palace
8 Everton
9 Fulham
10 Ipswich Town
11 Leicester
12 Liverpool
13 Man City
14 Man Utd
15 Newcastle
16 Nottm Forest
17 Southampton
18 Tottenham
19 West Ham
20 Wolves
*/
div#pl1Team1 > div.teamBg {
    background-image:
        linear-gradient(135deg, #ffffff 5%, #ffffff00 15%),
        linear-gradient(225deg, #ffffff 5%, #ffffff00 15%),
        linear-gradient(180deg, #f02020, #c01010);
}
div#pl1Team2 > div.teamBg {
    background-image:
        linear-gradient(135deg, #a3c9f9 5%, #a3c9f900 15%),
        linear-gradient(225deg, #a3c9f9 5%, #a3c9f900 15%),
        linear-gradient(180deg, #9a2244, #4b0214);
}
div#pl1Team3 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff28, #00000038),
        linear-gradient(90deg, #080808 18%, #f00000 22% 38%, #080808 42% 58%, #f00000 62% 78%, #080808 82%);
    color: #ffe090;
}
div#pl1Team4 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff28, #00000020),
        linear-gradient(90deg, #d80810 6%, #080808 10% 18%, #f0f0f0 22% 30%, #d80810 34% 42%, #f0f0f0 46% 54%, #d80810 58% 66%, #f0f0f0 70% 78%, #080808 82% 90%, #d80810 94%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl1Team5 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff18, #00000020),
        linear-gradient(90deg, #f8f8f8 10%, #03f 14% 18%, #f8f8f8 22% 27%, #03f 31% 35%, #f8f8f8 39% 44%, #03f 48% 52%, #f8f8f8 56% 61%, #03f 65% 69%, #f8f8f8 73% 78%, #03f 82% 86%, #f8f8f8 90%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #03f, 0 0 0.2rem #03f;
}
div#pl1Team6 > div.teamBg {
    background-image: linear-gradient(180deg, #10a8ff, 15%, #002080);
}
div#pl1Team7 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff20, #00000030),
        linear-gradient(90deg, #03f, #0650ff, #03f, #c00, #f11, #c00, #03f, #0650ff, #03f, #c00, #f11, #c00, #03f, #0650ff, #03f, #c00, #f11, #c00, #03f, #0650ff, #03f);
}
div#pl1Team8 > div.teamBg {
    background-image: linear-gradient(180deg, #0860f0, #0020b0);
}
div#pl1Team9 > div.teamBg {
    background-image: linear-gradient(180deg, #ffffff, #b0b0b0);
    color: #000000;
}
div#pl1Team10 > div.teamBg {
    background-image: linear-gradient(180deg, #2040ff, #1020a0);
}
div#pl1Team11 > div.teamBg {
    background-image: linear-gradient(180deg, #2040ff, #081890);
}
div#pl1Team12 > div.teamBg {
    background-image: linear-gradient(180deg, #ff2818, #c00000);
}
div#pl1Team13 > div.teamBg {
    background-image: linear-gradient(180deg, #a0e0ff, #40a0e0 );
    color: #182050;
}
div#pl1Team14 > div.teamBg {
    background-image: linear-gradient(180deg, #ff2020, #901010);
}
div#pl1Team15 > div.teamBg {
    background-image:
        linear-gradient(180deg, #ffffff30, #00000028),
        linear-gradient(90deg, #080808 18%, #f0f0f0 22% 38%, #080808 42% 58%, #f0f0f0 62% 78%, #080808 82%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl1Team16 > div.teamBg {
    background-image: linear-gradient(180deg, #f01818, #b01010);
}
div#pl1Team17 > div.teamBg { 
    background-image:
        linear-gradient(180deg, #ffffff30, #00000038),
        linear-gradient(90deg, #f00808 13%, #f0f0f0 17% 27%, #f00808 31% 41%, #f0f0f0 45% 55%, #f00808 59% 69%, #f0f0f0 73% 83%, #f00808 87%);
    color: #f0f0f0;
    text-shadow: 0 0 0.2rem #000, 0 0 0.2rem #000;
}
div#pl1Team18 > div.teamBg {
    background-image:
        linear-gradient(110deg, #001050 5%, #00105000 15%),
        linear-gradient(250deg, #001050 5%, #00105000 15%),
        linear-gradient(180deg, #fff, #b0b0b0);
    color: #001050;
}
div#pl1Team19 > div.teamBg {
    background-image:
        linear-gradient(110deg, #a0d0f0 5%, #a0d0f000 15%),
        linear-gradient(250deg, #a0d0f0 5%, #a0d0f000 15%),
        linear-gradient(180deg, #b81820, #780818);
}
div#pl1Team20 > div.teamBg {
    background-image: linear-gradient(180deg, #f9bb20, #cc9200);
    color: #000000;
}


/* 2023-24
1 Arsenal
2 Aston Villa
3 Bournemouth
4 Brentford
5 Brighton
6 Burnley
7 Chelsea
8 Crystal Palace
9 Everton
10 Fulham
11 Liverpool
12 Luton
13 Man City
14 Man Utd
15 Newcastle
16 Nottm Forest
17 Sheff Utd
18 Tottenham
19 West Ham
20 Wolves
*/
div#pl2Team1 > div.teamBg {
    background-image: linear-gradient(180deg, #f02020, #c01010);
}
div#pl2Team2 > div.teamBg {
    background-image: linear-gradient(180deg, #ae042f, #4b0214);
    color: #a3c9f9;
}
div#pl2Team3 > div.teamBg {
    background-image: linear-gradient(180deg, #f01010, 30%, #101010);
}
div#pl2Team4 > div.teamBg {
    background-image: linear-gradient(180deg, #f81010, 55%, #101010);
}
div#pl2Team5 > div.teamBg {
    background-image: linear-gradient(180deg, #1030f8, #101080);
}
div#pl2Team6 > div.teamBg {
    background-image: linear-gradient(180deg, #ae0426, #660015);
    color: #81c0ff;
}
div#pl2Team7 > div.teamBg {
    background-image: linear-gradient(180deg, #0030f0, #0010a0);
}
div#pl2Team8 > div.teamBg {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(90deg, #ff0000, #ff0000, #0020ff, #0020ff);
}
div#pl2Team9 > div.teamBg {
    background-image: linear-gradient(180deg, #0040f0, #0020a0);
}
div#pl2Team10 > div.teamBg {
    background-image: linear-gradient(180deg, #ffffff, #b0b0b0);
    color: #000000;
}
div#pl2Team11 > div.teamBg {
    background-image: linear-gradient(180deg, #f01018, #a00000);
}
div#pl2Team12 > div.teamBg {
    background-image: linear-gradient(180deg, #ff4800, 75%, #00051d);
}
div#pl2Team13 > div.teamBg {
    background-image: linear-gradient(180deg, #ffffff, 10%, #98c5e9, #57a0db);
    color: #0a4067;
}
div#pl2Team14 > div.teamBg {
    background-image: linear-gradient(180deg, #f01010, 75%, #101010);
}
div#pl2Team15 > div.teamBg {
    background-image: linear-gradient(180deg, #606060, 15%, #000000);
}
div#pl2Team16 > div.teamBg {
    background-image: linear-gradient(180deg, #f01010, #b81010);
}
div#pl2Team17 > div.teamBg { 
    background-image: linear-gradient(180deg, #f81010, 60%, #101010);
}
div#pl2Team18 > div.teamBg {
    background-image: linear-gradient(180deg, #ffffff, #b0b0b0);
    color: #00164d;
}
div#pl2Team19 > div.teamBg {
    background-image: linear-gradient(180deg, #aa0916, #790610);
    color: #a0ccec;
}
div#pl2Team20 > div.teamBg {
    background-image: linear-gradient(180deg, #f9bb20, #cc9200);
    color: #000000;
}

/* CSS specific to Noughts and Crosses section */

section#ox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Phone imgs, article paras, and link */
:root {
    --phoneWidth: min(40vw, 15rem, 30vh);
    --phoneHeight: min(60vw, 22.5rem, 45vh);
    --oxParaWidth: min(85vw, 25rem);
    --oxLinkHeight: 5rem;
}
@media (width > 36rem) { /* Screen wide enough for img, text, img */
    :root {
        --phoneWidth: min(calc(25vw - 1rem), 15rem, calc((100vh - var(--fHeight)) * 2 / 3));
        --phoneHeight: min(calc(37.5vw - 1.5rem), 22.5rem, calc(100vh - var(--fHeight)));
        --oxParaWidth: min(calc(50vw - 4rem), 25rem);
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    :root {
        --oxParaWidth: min(calc(50vw - 4rem), 30rem);
        --oxLinkHeight: 6.875rem;
    }
}
div#oxTitle, div#phones { z-index: 2; }
div#phones {
    position: sticky;
    top: -2rem;
    width: 100%;
    padding: 2rem 1rem;
    display: flex;
    justify-content: space-evenly;
    pointer-events: none;
}
div#phoneA, div#phoneB {
    width: var(--phoneWidth);
    height: var(--phoneHeight);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
div#oxParas, a#oxLink { width: var(--oxParaWidth); }
p.oxPara {
    width: 100%;
    padding: 0.5rem 0;
    text-align: justify;
}
a#oxLink {
    display: block;
    margin: 1.5rem 0 4rem;
    border-radius: 1.5rem;
    padding: 1rem;
    background-color: var(--atBg);
    background-image: linear-gradient(170deg, var(--atBg), var(--atFr) );
}
a#oxLink > h1 {
    font-weight: normal;
    color: var(--atTx);
    text-align: center;
}
a#oxLink:hover > h1, a#oxLink:active > h1 { color: var(--atLink); }
div#oxParasMask { display: none; }
@supports (mask-image: linear-gradient(black, transparent)) {
    div#oxParasMask {
        display: block;
        position: fixed;
        top: 0; left: 0;
        pointer-events: none;
        mask-image: linear-gradient(
            rgba(0,0,0,1) calc(var(--phoneHeight) - 2rem),
            rgba(0,0,0,0) calc(var(--phoneHeight) + 2rem) calc(100% - 4rem),
            rgba(0,0,0,1) 100%);
        mask-repeat: no-repeat;
        mask-size: calc(50vw + (var(--oxParaWidth) * 0.5) + 0.125rem) 100vh;
        mask-position: 0% 0%;
    }
}
@media (width > 36rem) { /* Screen wide enough for img, text, img */
    div#phones { justify-content: center; }
    div#phoneA { margin-right: min(calc(50vw - 2rem), 27rem); }
    div#oxParas { margin-top: calc((var(--phoneHeight) + 2.5rem ) * -1); }
    a#oxLink { margin: 1.5rem 0 max(calc((100vh - var(--oxLinkHeight) - var(--hfHeight)) / 2), 2rem); }
    @supports (mask-image: linear-gradient(black, transparent)) {
        div#oxParasMask {
            mask-image: linear-gradient(
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0) 2rem calc(100% - 2rem),
                rgba(0,0,0,1) 100%);
        }
    }
}
@media (width > 48rem) and (height > 36rem) { /* Desktop */
    div#phoneA { margin-right: min(calc(50vw - 2rem), 32rem); }
    a#oxLink { border-radius: 2rem; }
    @supports (mask-image: linear-gradient(black, transparent)) {
        div#oxParasMask {
            mask-image: linear-gradient(
                rgba(0,0,0,1) var(--hHeight),
                rgba(0,0,0,0) calc(var(--hHeight) + 3rem) calc(100% - 3rem),
                rgba(0,0,0,1) 100%);
        }
    }
}


/* OX Game Animation */
:root { --oxGameTime: 50s; }
img.phone {
    width: 100%;
    grid-area: 1 / 1;

    animation-duration: var(--oxGameTime);
    animation-fill-mode: forwards;
    animation-timing-function: step-end;
}
/* Phone times */
img.t712 { animation-name: animT712; }
@keyframes animT712 {
    0% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}
img.t713 { animation-name: animT713; }
@keyframes animT713 {
    0% { opacity: 0; }
    60% { opacity: 1; }
    100% { opacity: 1; }
}
/* Arrows */
img#arrowAA, img#arrowAB, img#arrowBA, img#arrowBB {
    animation-duration: var(--oxGameTime), 0.4s;
    animation-timing-function: step-end, ease-in;
    animation-direction: normal, alternate;
    animation-iteration-count: 1, infinite;
}
img#arrowAA { animation-name: animArrowAA, arrowBounce; }
@keyframes animArrowAA {
    0% { opacity: 1; }
    11.6% { opacity: 0; }
    32% { opacity: 1; }
    45% { opacity: 0; }
    58% { opacity: 1; }
    69.5% { opacity: 0; }
    82.5% { opacity: 1; }
    91% { opacity: 0; }
    100% { opacity: 0; }
}
img#arrowAB { animation-name: animArrowAB, arrowBounce; }
@keyframes animArrowAB {
    0% { opacity: 0; }
    11.6% { opacity: 1; }
    32% { opacity: 0; }
    45% { opacity: 1; }
    58% { opacity: 0; }
    69.5% { opacity: 1; }
    82.5% { opacity: 0; }
    91% { opacity: 1; }
    100% { opacity: 0; }
}
img#arrowBA { animation-name: animArrowBA, arrowBounce; }
@keyframes animArrowBA {
    0% { opacity: 1; }
    12.6% { opacity: 0; }
    31% { opacity: 1; }
    46% { opacity: 0; }
    57% { opacity: 1; }
    70.5% { opacity: 0; }
    81.5% { opacity: 1; }
    92% { opacity: 0; }
    100% { opacity: 0; }
}
img#arrowBB { animation-name: animArrowBB, arrowBounce; }
@keyframes animArrowBB {
    0% { opacity: 0; }
    12.6% { opacity: 1; }
    31% { opacity: 0; }
    46% { opacity: 1; }
    57% { opacity: 0; }
    70.5% { opacity: 1; }
    81.5% { opacity: 0; }
    92% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes arrowBounce {
    0% { transform: translateX(-0.125rem); }
    100% { transform: translateX(0.125rem); }
}
/* Prompts and Go! Buttons */
img#yoursA { animation-name: animYoursA; }
@keyframes animYoursA {
    0% { opacity: 1; }
    2% { opacity: 0; }
    32% { opacity: 1; }
    36% { opacity: 0; }
    58% { opacity: 1; }
    62% { opacity: 0; }
    82.5% { opacity: 1; }
    85.5% { opacity: 0; }
    100% { opacity: 0; }
}
img#yoursB { animation-name: animYoursB; }
@keyframes animYoursB {
    0% { opacity: 0; }
    12.6% { opacity: 1; }
    17.6% { opacity: 0; }
    46% { opacity: 1; }
    49.5% { opacity: 0; }
    70.5% { opacity: 1; }
    74.5% { opacity: 0; }
    92% { opacity: 1; }
    94.5% { opacity: 0; }
    100% { opacity: 0; }
}
img#friendA { animation-name: animFriendA; }
@keyframes animFriendA {
    0% { opacity: 0; }
    11.6% { opacity: 1; }
    32% { opacity: 0; }
    45% { opacity: 1; }
    58% { opacity: 0; }
    69.5% { opacity: 1; }
    82.5% { opacity: 0; }
    91% { opacity: 1; }
    100% { opacity: 0; }
}
img#friendB { animation-name: animFriendB; }
@keyframes animFriendB {
    0% { opacity: 1; }
    12.6% { opacity: 0; }
    31% { opacity: 1; }
    46% { opacity: 0; }
    57% { opacity: 1; }
    70.5% { opacity: 0; }
    81.5% { opacity: 1; }
    92% { opacity: 0; }
    100% { opacity: 0; }
}
img#goBtnA { animation-name: animGoBtnA; }
@keyframes animGoBtnA {
    0% { opacity: 0; }
    2% { opacity: 1; }
    11% { opacity: 0; }
    36% { opacity: 1; }
    44.5% { opacity: 0; }
    62% { opacity: 1; }
    69% { opacity: 0; }
    85.5% { opacity: 1; }
    90.5% { opacity: 0; }
    100% { opacity: 0; }
}
img#goOnA { animation-name: animGoOnA; }
@keyframes animGoOnA {
    0% { opacity: 0; }
    11% { opacity: 1; }
    11.6% { opacity: 0; }
    44.5% { opacity: 1; }
    45% { opacity: 0; }
    69% { opacity: 1; }
    69.5% { opacity: 0; }
    90.5% { opacity: 1; }
    91% { opacity: 0; }
    100% { opacity: 0; }
}
img#goBtnB { animation-name: animGoBtnB; }
@keyframes animGoBtnB {
    0% { opacity: 0; }
    17.6% { opacity: 1; }
    30.5% { opacity: 0; }
    49.5% { opacity: 1; }
    56.5% { opacity: 0; }
    74.5% { opacity: 1; }
    81% { opacity: 0; }
    94.5% { opacity: 1; }
    98.5% { opacity: 0; }
    100% { opacity: 0; }
}
img#goOnB { animation-name: animGoOnB; }
@keyframes animGoOnB {
    0% { opacity: 0; }
    30.5% { opacity: 1; }
    31% { opacity: 0; }
    56.5% { opacity: 1; }
    57% { opacity: 0; }
    81% { opacity: 1; }
    81.5% { opacity: 0; }
    98.5% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; }
}
img#drawA { animation-name: animDrawA; }
@keyframes animDrawA {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
img#drawB { animation-name: animDrawB; }
@keyframes animDrawB {
    0% { opacity: 0; }
    99% { opacity: 1; }
    100% { opacity: 1; }
}
/* OX Board */
img#go1A { animation-name: animGo1A; }
@keyframes animGo1A {
    0% { opacity: 0; }
    2% { opacity: 1; animation-timing-function: linear; }
    3% { opacity: 0.2; animation-timing-function: linear; }
    4% { opacity: 1; animation-timing-function: linear; }
    5% { opacity: 0.2; animation-timing-function: linear; }
    6% { opacity: 1; animation-timing-function: linear; }
    7% { opacity: 0.2; animation-timing-function: linear; }
    8% { opacity: 1; animation-timing-function: linear; }
    9% { opacity: 0.2; animation-timing-function: linear; }
    10% { opacity: 1; animation-timing-function: linear; }
    11% { opacity: 0.2; animation-timing-function: linear; }
    11.59% { opacity: 0.67; }
    11.6% { opacity: 1; }
    100% { opacity: 1; }
}
img#go1B { animation-name: animGo1B; }
@keyframes animGo1B {
    0% { opacity: 0; }
    12.6% { opacity: 1; }
    100% { opacity: 1; }
}
img#go2A { animation-name: animGo2A; }
@keyframes animGo2A {
    0% { opacity: 0; }
    32% { opacity: 1; }
    100% { opacity: 1; }
}
img#go2B { animation-name: animGo2B; }
@keyframes animGo2B {
    0% { opacity: 0; }
    24% { opacity: 1; animation-timing-function: linear; }
    25% { opacity: 0.2; animation-timing-function: linear; }
    26% { opacity: 1; animation-timing-function: linear; }
    27% { opacity: 0.2; animation-timing-function: linear; }
    28% { opacity: 1; animation-timing-function: linear; }
    29% { opacity: 0.2; animation-timing-function: linear; }
    30% { opacity: 1; animation-timing-function: linear; }
    30.99% { opacity: 0.21; }
    31% { opacity: 1; }
    100% { opacity: 1; }
}
img#go3A { animation-name: animGo3A; }
@keyframes animGo3A {
    0% { opacity: 0; }
    36% { opacity: 1; animation-timing-function: linear; }
    37% { opacity: 0.2; animation-timing-function: linear; }
    38% { opacity: 1; animation-timing-function: linear; }
    39% { opacity: 0.2; animation-timing-function: linear; }
    40% { opacity: 1; animation-timing-function: linear; }
    41% { opacity: 0.2; animation-timing-function: linear; }
    42% { opacity: 1; animation-timing-function: linear; }
    43% { opacity: 0.2; animation-timing-function: linear; }
    44% { opacity: 1; animation-timing-function: linear; }
    44.99% { opacity: 0.21; }
    45% { opacity: 1; }
    100% { opacity: 1; }
}
img#go3B { animation-name: animGo3B; }
@keyframes animGo3B {
    0% { opacity: 0; }
    46% { opacity: 1; }
    100% { opacity: 1; }
}
img#go4A { animation-name: animGo4A; }
@keyframes animGo4A {
    0% { opacity: 0; }
    58% { opacity: 1; }
    100% { opacity: 1; }
}
img#go4B { animation-name: animGo4B; }
@keyframes animGo4B {
    0% { opacity: 0; }
    17.6% { opacity: 1; animation-timing-function: linear; }
    18.6% { opacity: 0.2; animation-timing-function: linear; }
    19.6% { opacity: 1; animation-timing-function: linear; }
    20.6% { opacity: 0.2; animation-timing-function: linear; }
    21.6% { opacity: 1; animation-timing-function: linear; }
    22.6% { opacity: 0.2; animation-timing-function: linear; }
    23.6% { opacity: 1; animation-timing-function: linear; }
    23.99% { opacity: 0.69; }
    24% { opacity: 0; }
    49.5% { opacity: 1; animation-timing-function: linear; }
    50.5% { opacity: 0.2; animation-timing-function: linear; }
    51.5% { opacity: 1; animation-timing-function: linear; }
    52.5% { opacity: 0.2; animation-timing-function: linear; }
    53.5% { opacity: 1; animation-timing-function: linear; }
    54.5% { opacity: 0.2; animation-timing-function: linear; }
    55.5% { opacity: 1; animation-timing-function: linear; }
    56.5% { opacity: 0.2; animation-timing-function: linear; }
    56.99% { opacity: 0.59; }
    57% { opacity: 1; }
    100% { opacity: 1; }
}
img#go5A { animation-name: animGo5A; }
@keyframes animGo5A {
    0% { opacity: 0; }
    62% { opacity: 1; animation-timing-function: linear; }
    63% { opacity: 0.2; animation-timing-function: linear; }
    64% { opacity: 1; animation-timing-function: linear; }
    65% { opacity: 0.2; animation-timing-function: linear; }
    66% { opacity: 1; animation-timing-function: linear; }
    67% { opacity: 0.2; animation-timing-function: linear; }
    68% { opacity: 1; animation-timing-function: linear; }
    69% { opacity: 0.2; animation-timing-function: linear; }
    69.49% { opacity: 0.59; }
    69.5% { opacity: 1; }
    100% { opacity: 1; }
}
img#go5B { animation-name: animGo5B; }
@keyframes animGo5B {
    0% { opacity: 0; }
    70.5% { opacity: 1; }
    100% { opacity: 1; }
}
img#go6A { animation-name: animGo6A; }
@keyframes animGo6A {
    0% { opacity: 0; }
    82.5% { opacity: 1; }
    100% { opacity: 1; }
}
img#go6B { animation-name: animGo6B; }
@keyframes animGo6B {
    0% { opacity: 0; }
    74.5% { opacity: 1; animation-timing-function: linear; }
    75.5% { opacity: 0.2; animation-timing-function: linear; }
    76.5% { opacity: 1; animation-timing-function: linear; }
    77.5% { opacity: 0.2; animation-timing-function: linear; }
    78.5% { opacity: 1; animation-timing-function: linear; }
    79.5% { opacity: 0.2; animation-timing-function: linear; }
    80.5% { opacity: 1; animation-timing-function: linear; }
    81.49% { opacity: 0.21; }
    81.5% { opacity: 1; }
    100% { opacity: 1; }
}
img#go7A { animation-name: animGo7A; }
@keyframes animGo7A {
    0% { opacity: 0; }
    85.5% { opacity: 1; animation-timing-function: linear; }
    86.5% { opacity: 0.2; animation-timing-function: linear; }
    87.5% { opacity: 1; animation-timing-function: linear; }
    88.5% { opacity: 0.2; animation-timing-function: linear; }
    89.5% { opacity: 1; animation-timing-function: linear; }
    90.5% { opacity: 0.2; animation-timing-function: linear; }
    90.99% { opacity: 0.59; }
    91% { opacity: 1; }
    100% { opacity: 1; }
}
img#go7B { animation-name: animGo7B; }
@keyframes animGo7B {
    0% { opacity: 0; }
    92% { opacity: 1; }
    100% { opacity: 1; }
}
img#go8A { animation-name: animGo8A; }
@keyframes animGo8A {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
img#go8B { animation-name: animGo8B; }
@keyframes animGo8B {
    0% { opacity: 0; }
    94.5% { opacity: 1; animation-timing-function: linear; }
    95.5% { opacity: 0.2; animation-timing-function: linear; }
    96.5% { opacity: 1; animation-timing-function: linear; }
    97.5% { opacity: 0.2; animation-timing-function: linear; }
    98.5% { opacity: 1; animation-timing-function: linear; }
    98.99% { opacity: 0.61; }
    99% { opacity: 1; }
    100% { opacity: 1; }
}


/* CSS for animations */

/* Animation times need to match anims.js values. */
:root {
    --menuSlideTime: 0.5s;
    --fadeTime: 0.5s;
    --fadeSlowTime: 1s;
    --fadeSlowerTime: 1.5s;
    --prePopInDelay: 0.25s;
    --popInTime: 0.5s;
    --popOffsetTime: 0.08s;
}

/* Fade in or out for views */
.fadeIn { animation-name: animFadeIn; }
.fadeOut { animation-name: animFadeOut; }
.fadeIn, .fadeOut {
    animation-duration: var(--fadeTime);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes animFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes animFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


/* Mobile menu slide in and out anims */
nav.menuSlide {
    transition-property: right;
    transition-duration: var(--menuSlideTime);
    transition-timing-function: ease-in-out;
}


/* Extra landing animations, removed by removeInitialAnims() in anim.js. */
.popIn1, .popIn2, .popIn3, .popIn4, .popIn5, .popIn6, .popIn7 {
    transform: scale(0);
    animation-name: animPopIn;
    animation-duration: var(--popInTime);
    animation-timing-function: cubic-bezier(0.4, 1.6, 0.6, 1);
    animation-fill-mode: both;
}
.popIn1 {
    animation-delay: calc(var(--fadeSlowTime) + var(--prePopInDelay));
}
.popIn2 {
    animation-delay: calc(var(--fadeSlowTime) + var(--prePopInDelay) + var(--popOffsetTime));
}
.popIn3 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (2 * var(--popOffsetTime)));
}
.popIn4 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (3 * var(--popOffsetTime)));
}
.popIn5 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (4 * var(--popOffsetTime)));
}
.popIn6 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (5 * var(--popOffsetTime)));
}
.popIn7 {
    animation-delay: calc( var(--fadeSlowTime) + var(--prePopInDelay) + (6 * var(--popOffsetTime)));
}
@keyframes animPopIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
.fadeInSlow, .fadeInLate {
    opacity: 0;
    animation-name: animFadeIn;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.fadeInSlow { animation-duration: var(--fadeSlowTime); }
.fadeInLate {
    animation-delay: calc(
        var(--fadeSlowTime) +
        var(--prePopInDelay) +
        var(--popInTime) +
        (6 * var(--popOffsetTime)));
    animation-duration: var(--fadeSlowerTime);
}



/* Important classes for hiding */
.hide { display: none !important; }
.invisible { opacity: 0 !important; }