/***********************************************************************************************/
/*                                                                                             */
/*                                        VARIABLES                                            */
/*                                                                                             */
/***********************************************************************************************/

/* NEAR BLACK */
@property --black {syntax:"<color>";inherits:false;initial-value:rgb(5 5 5 / 100%);}
@property --black75 {syntax:"<color>";inherits:false;initial-value:rgb(5 5 5 / 75%);}
@property --black50 {syntax:"<color>";inherits:false;initial-value:rgb(5 5 5 / 50%);}
@property --black25 {syntax:"<color>";inherits:false;initial-value:rgb(5 5 5 / 25%);}

/* NEAR WHITE */
@property --white {syntax:"<color>";inherits:false;initial-value:rgb(250 250 250 /100%);}
@property --white75 {syntax:"<color>";inherits:false;initial-value:rgb(250 250 250 /75%);}
@property --white50 {syntax:"<color>";inherits:false;initial-value:rgb(250 250 250 /50%);}
@property --white25 {syntax:"<color>";inherits:false;initial-value:rgb(250 250 250 /25%);}

/* GREYSCALE */
@property --grey90 {syntax:"<color>";inherits:false;initial-value:rgb(25,25,25);}
@property --grey80 {syntax:"<color>";inherits:false;initial-value:rgb(50,50,50);}
@property --grey70 {syntax:"<color>";inherits:false;initial-value:rgb(75,75,75);}
@property --grey60 {syntax:"<color>";inherits:false;initial-value:rgb(100,100,100);}
@property --grey50 {syntax:"<color>";inherits:false;initial-value:rgb(125,125,125);}
@property --grey40 {syntax:"<color>";inherits:false;initial-value:rgb(150,150,150);}
@property --grey30 {syntax:"<color>";inherits:false;initial-value:rgb(175,175,175);}
@property --grey20 {syntax:"<color>";inherits:false;initial-value:rgb(200,200,200);}
@property --grey10 {syntax:"<color>";inherits:false;initial-value:rgb(225,225,225);}



/* Theme Colours */
@property --primary {syntax:"<color>";inherits:false;initial-value:rgb(255 211 8 / 100%);}
@property --primary-light {syntax:"<color>";inherits:false;initial-value:rgb(255 211 8 / 100%);}
@property --primary-dark {syntax:"<color>";inherits:false;initial-value:rgb(255 211 8 / 100%);}
@property --secondary {syntax:"<color>";inherits:false;initial-value:rgb(50 240 240 / 100%);}
@property --secondary-light {syntax:"<color>";inherits:false;initial-value:rgb(150 255 255 / 100%);}
@property --secondary-dark {syntax:"<color>";inherits:false;initial-value:rgb(38 180 180 / 100%);}

/* Star Wars Colours - same as theme colours */
@property --sw-yellow {syntax:"<color>";inherits:false;initial-value:rgb(255 211 8 / 100%);} 
@property --sw-teal {syntax:"<color>";inherits:false;initial-value:rgb(50 240 240 / 100%);} 

/* Star Wars Colours - based on logos and lightsabers */
@property --sw-red {syntax:"<color>";inherits:false;initial-value:rgb(240 45 45 / 100%);}
@property --sw-blue {syntax:"<color>";inherits:false;initial-value:rgb(42 141 222 / 100%);}
@property --sw-green {syntax:"<color>";inherits:false;initial-value:rgb(58 214 44 / 100%);}
@property --sw-purple {syntax:"<color>";inherits:false;initial-value:rgb(194 65 151 / 100%);}
@property --sw-orange {syntax:"<color>";inherits:false;initial-value:rgb(255 125 0 / 100%);}





/* Text Colours */
@property --text-default {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --text-quote {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --text-highlight {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --link-important {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}

/* Link Colours */
@property --link-default {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --link-hover {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --link-active {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --link-visited {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --link-disabled {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}

/* Button Colours */
@property --btn-primary {syntax:"<color>";inherits:false;initial-value:rgb(5,5,5);}
@property --btn-primary-hover {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --btn-primary-active {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --btn-primary-disabled {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}

@property --btn-secondary {syntax:"<color>";inherits:false;initial-value:rgb(247,206,70);}
@property --btn-secondary-hover {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --btn-secondary-active {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}
@property --btn-secondary-disabled {syntax:"<color>";inherits:false;initial-value:rgb(0,0,0);}








/* SHADES OF RED */
@property --red50 {syntax:"<color>";inherits:false;initial-value:rgb(50,0,0);}
@property --red100 {syntax:"<color>";inherits:false;initial-value:rgb(100,0,0);}
@property --red150 {syntax:"<color>";inherits:false;initial-value:rgb(150,0,0);}
@property --red200 {syntax:"<color>";inherits:false;initial-value:rgb(200,0,0);}
@property --red250 {syntax:"<color>";inherits:false;initial-value:rgb(250,0,0);}

/* SHADES OF GREEN */
@property --green50 {syntax:"<color>";inherits:false;initial-value:rgb(0,50,0);}
@property --green100 {syntax:"<color>";inherits:false;initial-value:rgb(0,100,0);}
@property --green150 {syntax:"<color>";inherits:false;initial-value:rgb(0,150,0);}
@property --green200 {syntax:"<color>";inherits:false;initial-value:rgb(0,200,0);}
@property --green250 {syntax:"<color>";inherits:false;initial-value:rgb(0,250,0);}

/* SHADES OF BLUE */
@property --blue50 {syntax:"<color>";inherits:false;initial-value:rgb(0,0,50);}
@property --blue100 {syntax:"<color>";inherits:false;initial-value:rgb(0,0,100);}
@property --blue150 {syntax:"<color>";inherits:false;initial-value:rgb(0,0,150);}
@property --blue200 {syntax:"<color>";inherits:false;initial-value:rgb(0,0,200);}
@property --blue250 {syntax:"<color>";inherits:false;initial-value:rgb(0,0,250);}

/* RED TO PURPLE SCALE - MEDIUM (SM) */
@property --sm-red {syntax:"<color>";inherits:false;initial-value:rgb(235,78,61);}
@property --sm-orange {syntax:"<color>";inherits:false;initial-value:rgb(241,154,56);}
@property --sm-yellow {syntax:"<color>";inherits:false;initial-value:rgb(247,206,70);}
@property --sm-green {syntax:"<color>";inherits:false;initial-value:rgb(101,196,103);}
@property --sm-blue {syntax:"<color>";inherits:false;initial-value:rgb(50,120,247);}
@property --sm-purple {syntax:"<color>";inherits:false;initial-value:rgb(163,87,213);}

/* RED TO PURPLE SCALE - PASTEL (SP) */
@property --sp-red {syntax:"<color>";inherits:false;initial-value:rgb(245, 146, 135);}
@property --sp-orange {syntax:"<color>";inherits:false;initial-value:rgb(242, 191, 133);}
@property --sp-yellow {syntax:"<color>";inherits:false;initial-value:rgb(237, 215, 142);}
@property --sp-green {syntax:"<color>";inherits:false;initial-value:rgb(168, 224, 169);}
@property --sp-blue {syntax:"<color>";inherits:false;initial-value:rgb(145, 174, 227);}
@property --sp-purple {syntax:"<color>";inherits:false;initial-value:rgb(202, 166, 227);}

/* RED TO PURPLE SCALE - NEON (SN) */
@property --sn-red {syntax:"<color>";inherits:false;initial-value:rgb(255, 0, 0);}
@property --sn-orange {syntax:"<color>";inherits:false;initial-value:rgb(255, 136, 0);}
@property --sn-yellow {syntax:"<color>";inherits:false;initial-value:rgb(255, 240, 0);}
@property --sn-green {syntax:"<color>";inherits:false;initial-value:rgb(0,255,0);}
@property --sn-blue {syntax:"<color>";inherits:false;initial-value:rgb(0,0,255);}
@property --sn-purple {syntax:"<color>";inherits:false;initial-value:rgb(162, 0, 255);}



/* Custom Gradients */
@property --nav-gradient {syntax:"<image>";inherits:false;initial-value:linear-gradient(90deg, rgb(5 5 5 / 40%) 0%, rgb(5 5 5 / 100%) 40%, rgb(5 5 5 / 100%) 60%, rgb(5 5 5 / 40%) 100%);}
@property --footer-gradient {syntax:"<image>";inherits:false;initial-value:linear-gradient(0deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 90%) 75%, rgb(0 0 0 / 40%) 95%, transparent 100%);}


/***********************************************************************************************/
/*                                                                                             */
/*                                          FONTS                                              */
/*                                                                                             */
/***********************************************************************************************/

/* Aurebesh Basic */
@font-face {font-family: Aurebesh-basic;src: local("Aurebesh"), url("Aurebesh-Basic.ttf"), format("truetype");}

/* LIBERATION MONO */
@font-face {font-family: LibMono-Reg;src: local("Liberation Mono"), url("LiberationMono-Regular.ttf"), format("truetype");}
@font-face {font-family: LibMono-Bold;src: local("Liberation Mono Bold"), url("LiberationMono-Bold.ttf"), format("truetype")}
@font-face {font-family: LibMono-Italic;src: local("Liberation Mono Italic"), url("LiberationMono-Italic.ttf"), format("truetype");}
@font-face {font-family: LibMono-BoldItalic;src: local("Liberation Mono Bold Italic"), url("LiberationMono-BoldItalic.ttf"), format("truetype");}

/* Garamond */
@font-face {font-family: Garamond-Reg;src: local("Garamond"), url("Garamond.ttf"), format("truetype");}
@font-face {font-family: Garamond-Bold;src: local("Garamond Bold"), url("Garamond-Bold.ttf"), format("truetype");}
@font-face {font-family: Garamond-Italic;src: local("Garamond Italic"), url("Garamond-Italic.ttf"), format("truetype");}
@font-face {font-family: Garamond-BoldItalic;src: local("Garamond Bold Italic"), url("GaramondBoldItalic.ttf"), format("truetype");}

/***********************************************************************************************/
/*                                                                                             */
/*                                       ANIMATIONS                                            */
/*                                                                                             */
/***********************************************************************************************/

/*
TIP: The following two are the same:
                             		
p { animation-duration: 3s; animation-name: slide-in; animation-iteration-count: infinite; animation-direction: alternate; }

p { animation: 3s slide-in infinite alternate; }
*/

/* GRADIENT WAVE EFFECT */
@keyframes wave-grey {
	from { background: linear-gradient(150deg, var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90)); }
	25% { background: linear-gradient(150deg, var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey80),var(--grey90),var(--grey90)); }
	50% { background: linear-gradient(150deg, var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey80),var(--grey70),var(--grey80),var(--grey90)); }
	75% { background: linear-gradient(150deg, var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey80),var(--grey90),var(--grey90)); }
	to { background: linear-gradient(150deg, var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90),var(--grey90)); }
}

/* VARIABLES FOR SHINE EFFECT */
@property --shine03 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.03);}
@property --shine06 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.06);}
@property --shine09 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.09);}
@property --shine12 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.12);}
@property --shine15 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.15);}
@property --shine18 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.18);}
@property --shine21 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.21);}
@property --shine24 {syntax:"<color>";inherits:false;initial-value:rgb(255,255,255,0.24);}

/* KEYFRAMES FOR SHINE EFFECT */
@keyframes navbar-shine {
	from { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine03),var(--shine06),var(--shine03)), rgb(0,0,0,1.0); }
	18% { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine03),var(--shine06),var(--shine03)), rgb(0,0,0,1.0); }
	35% { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine06),var(--shine09),var(--shine06)), rgb(0,0,0,1.0); }
	52% { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine09),var(--shine12),var(--shine06)), rgb(0,0,0,1.0); }
	70% { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine12),var(--shine18),var(--shine09)), rgb(0,0,0,1.0); }
	85% { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine15),var(--shine21),var(--shine12)), rgb(0,0,0,1.0); }
	to { background: linear-gradient(150deg, var(--shine03),var(--shine03),var(--shine03),var(--shine18),var(--shine24),var(--shine15)), rgb(0,0,0,1.0); }
}

/* FADE IN/OUT */
@keyframes fade {
	from { opacity:0% }
	to { opacity:100% }
}

/* FLOAT / HOVER EFFECT */
@keyframes floating {
	from { box-shadow: 6px 6px 16px grey; }
	to { box-shadow: 0px 0px 8px grey; }
}




/*
@media (prefers-color-scheme: dark) {
  .primary.adpative {
    background: #775533;
    color: #ddccbb;
    outline: 5px dashed black;
  }
}
*/

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                      HTML STYLES                                            */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/
* { margin: 0; padding: 0; }

html, body {
    width: 100%;
    background: var(--white);
    font-family: LibMono-Reg, monospace;
    color: var(--black);
}

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                      TEXT STYLES                                            */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

/*
**********************************************************************************************
HEADING and PARAGRAPH styles
**********************************************************************************************
*/

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    h1 { font-size: 22pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 16pt; }
    h4 { font-size: 14pt; }
    h5 { font-size: 12pt; font-family: Aurebesh-basic; }
    h6 { font-size: 10pt; font-family: Aurebesh-basic; }
    p { font-size: 12pt; }
    p.sm { font-size: 10pt }
    p.med { font-size: 12pt }
    p.lg { font-size: 16pt }
    p.xl { font-size: 20pt }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    h1 { font-size: 26pt; }
    h2 { font-size: 22pt; }
    h3 { font-size: 18pt; }
    h4 { font-size: 14pt; }
    h5 { font-size: 12pt; font-family: Aurebesh-basic; }
    h6 { font-size: 10pt; font-family: Aurebesh-basic; }
    p { font-size: 12pt; }
    p.sm { font-size: 10pt }
    p.med { font-size: 12pt }
    p.lg { font-size: 16pt }
    p.xl { font-size: 20pt }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    h1 { font-size: 30pt; }
    h2 { font-size: 26pt; }
    h3 { font-size: 20pt; }
    h4 { font-size: 16pt; }
    h5 { font-size: 14pt; font-family: Aurebesh-basic; }
    h6 { font-size: 12pt; font-family: Aurebesh-basic; }
    p { font-size: 12pt; }
    p.sm { font-size: 10pt }
    p.med { font-size: 12pt }
    p.lg { font-size: 16pt }
    p.xl { font-size: 20pt }
}



hgroup {
	h1,h2,h3,h4,h5,h6 { padding: 2px 0px; }
}

h1,h2 { padding: 5px 0px 10px 0px; }

h3,h4,h5,h6 { padding: 4px 0px 8px 0px; }

p { padding: 0px 0px 4px 0px }

p.aurebesh { font-family: Aurebesh-basic; }

/*
**********************************************************************************************
HYPERLINK styles
**********************************************************************************************
*/

/* Mobile Screens */
@media only screen and (max-width: 768px) { a { font-size: 12pt } }

/* Tablet Screens */
@media only screen and (min-width: 768px) { a { font-size: 12pt } }

/* Desktop Screens */
@media only screen and (min-width: 992px) { a { font-size: 12pt } }

main {
    a {
        color: var(--link-default);
        text-decoration: underline;
        font-weight: 900;
    }

    a:hover {
        color: var(--link-hover);
        text-decoration: none;
    }

    a:active {
        color: var(--link-active);
        text-decoration: underline;
    }

    a:visited {
        color: var(--link-visited);
        text-decoration: underline;
    }
}

a[class^="btn-"] {
    font-family: LibMono-Bold, monospace;
    display: inline-block;
    margin: 10px;
}

a.btn-cta {
    padding: 12px 24px;
    border-radius: 10px;
    background: var(--primary);
    border: none;
    outline: none;
    font-family: LibMono-Bold, monospace;
    color: var(--white);
    text-decoration: none;
}

a.btn-cta:hover {
    background: var(--grey50);
    color: var(--black);
}

a.btn-primary {
    background: var(--primary);
    color: var(--white);
    padding: 8px 16px;
    border: none;
    outline: none;
    text-decoration: none;
}

a.btn-primary:hover {
    background: var(--grey20);
    color: var(--black);
}

a.btn-secondary {
    background: none;
    border: none;
    outline: 1px solid var(--primary);
    padding: 8px 16px;
    color: var(--primary);
    text-decoration: none;
}

a.btn-secondary:hover {
    background: var(--grey20);
    outline: none;
}

a.btn {
    text-decoration: none;
    color: inherit;
}

a.btn:hover {
    color: inherit;
}





/*
**********************************************************************************************
MODIFYING TEXT styles
**********************************************************************************************
*/
span {

}

mark {

}


b {

}

em {

}

i {

}

u {

}

s {

}

strong {

}

sub {

}

sup {

}


ins {
    font-weight: 700;
    color: var(--sm-green);
}

del {
    font-weight: 700;
    color: var(--sm-red);
}


/*
**********************************************************************************************
FORMATTED TEXT styles
**********************************************************************************************
*/

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 14pt; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 14pt; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    address, time, blockquote, q, pre, code, abbr, dfn { font-size: 16pt; }
}

blockquote {
	margin: 15px;
	padding: 5px 5px 5px 25px;
    border-left: 5px solid var(--grey50);
    font-family: Garamond-Italic;
}

q {
    font-family: Garamond-Italic;
}

cite {
	font-size: 11pt;
	a {
		font-size: 11pt;
	}
}

cite::before { content: "[source: "; }
cite::after { content: "]"; }

pre {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
	border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--grey20);
}

code {
	margin: 5px;
	padding: 15px 20px;
	display: inline-block;
	background: var(--grey70);
    color: var(--white);
    border-radius: 5px;
    box-shadow: inset 0px 0px 10px var(--black);
}

address { }
time { }
abbr { }
dfn { }

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                    CONTAINER STYLES                                         */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/



/***********************************************************************************************
NAV and FOOTER styles
***********************************************************************************************/

nav.main {
    z-index: 2;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px var(--secondary-dark);
    background: var(--secondary);
    position: fixed;
    bottom: 15px; left: 15px; right: 15px;
    color: var(--black);
    a { text-decoration: none; color: var(--black); }
    a:hover { text-decoration: underline; }
    ul {
        display: flex;
        justify-content: space-between;
        list-style: none;
        li {
            a { text-decoration: none; color: var(--black); }
            a:hover { text-decoration: underline; }
        }
    }
}

/*
**********************************************************************************************
MAIN styles
**********************************************************************************************

/* All Screens */
main { z-index: 0; }

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    main { padding: 50px 20px; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    main { padding: 50px 20px; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    main { padding: 50px 10%; }
}


main.index {
    section.about {
        ul {
            margin: 0; padding: 0;
            li { padding: 5px; } 
            ul {
                margin: 0; padding: 0px 0px 0px 25px;
                li { padding: 5px; }
            } 
        }
    }
    section.samples {
        div {
            padding: 50px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            gap: 20px;
            a { padding: 15px; outline: 1px solid var(--grey30); }
        }
    }
}


/*
**********************************************************************************************
TOP LEVEL SEMANTIC TAG styles (section, article, aside, details, dialog)
**********************************************************************************************
*/

section { padding: 10px 0px; }

section.head {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: center;
    background: var(--black);
    color: var(--primary);
    font-family: Aurebesh-basic;
}

section.identity {
    details {
        outline: 1px solid var(--secondary);
        summary { background: var(--secondary-light); color: var(--black); }
        div {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            /* odd selects the category, even selects the content */
            p:nth-child(odd) { flex: 1 0 25%; font-family: LibMono-Bold; }
            *:nth-child(even) { flex: 1 0 50% }
        }
    }

}

section.affiliations, section.geography {
    details {
        div {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            /* odd selects the category, even selects the content */
            p:nth-child(odd) { flex: 1 0 25%; font-family: LibMono-Bold; }
            *:nth-child(even) { flex: 1 0 50% }
        }
    }
}

section.galactic-events {
    details {
        p::before { content: attr(yavin-year) '\A'; font-size: 10pt; color: var(--grey50)}
    }
}

section.personal-events, section.local-events {
    details {
        outline: 1px solid var(--grey70);
        summary { background: var(--grey60); }
        p.title { font-family: LibMono-Bold; }
        p.title::after { content: '\A' attr(yavin-year); font-family: LibMono-Reg; font-size: 10pt; color: var(--grey70) }
        p.desc { border-bottom: 1px solid var(--grey30); }
    }
}

section.misc {
    details {
        outline: 1px solid var(--grey30);
        color: var(--black);
        summary { background: var(--grey20); color: var(--black); }
    }
}



/* auto-generates the aurebesh before the title, but line height is weird
aside { h1::before { content: attr(data-before) '\A'; font-family: Aurebesh-basic; font-size: 14pt; line-height: 50%; }
*/


/* All Screens */
article { }

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    article.profile {
        display: flex;
        flex-flow: row nowrap;
        gap: 10px;
        aside {
            h1 {}
            h2 { font-family: Aurebesh-basic; font-size: 12pt; }
        }
        img.profile-photo {
            max-width: 150px;
            object-fit: cover;
        }
    }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    article.profile {
        display: flex;
        flex-flow: row nowrap;
        gap: 10px;
        aside {
            h1 {}
            h2 { font-family: Aurebesh-basic; font-size: 12pt; }
        }
        img.profile-photo {
            max-width: 350px; max-height: 350px;
            object-fit: cover;
        }
    }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    article.profile {
        display: flex;
        flex-flow: row nowrap;
        gap: 10px;
        aside {
            h1 {}
            h2 { font-family: Aurebesh-basic; font-size: 12pt; }
        }
        img.profile-photo {
            max-width: 500px; max-height: 500px;
            object-fit: cover;
        }
    }
}


aside {

}

details {
    outline: 1px solid var(--black);
    summary {
        list-style-type: none;
        background: var(--grey90);
        color: var(--white);
        padding: 10px;
        h2 { font-family: LibMono-Bold; font-size: 14pt; padding: 0; }
    }
    p { padding: 10px; }
}

dialog {

}

/*
**********************************************************************************************
DIV styles
**********************************************************************************************
*/

div { 

}


/*
**********************************************************************************************
UNIVERSAL styles
**********************************************************************************************
*/

.gallery-grid { 
	display: flex;
	flex-flow: row wrap;
	gap: 50px;
	img {
	 	object-fit: cover;
	 	height: 200px;
	 	width: 200px;
	}
}

.gallery-free {
	display: flex;
	flex-flow: row wrap;
	gap: 50px;
	img {
	 	object-fit: contain;
	 	height: 300px;
	 	float: left;
	 	flex: 1 0 0;
	}
}

.box-black {
    padding: 5px 20px;
    position: relative;
    background-color: var(--black);
    color: var(--white);
}

.box-black::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    border: 4px solid var(--white);
    z-index: -1;
}

.box-white {
    padding: 5px 20px;
    position: relative;
    background-color: var(--white);
    color: var(--black);
}

.box-white::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    border: 4px solid var(--black);
    z-index: -1;
}


/*
**********************************************************************************************
CUSTOM FLEXBOX styles
**********************************************************************************************
*/

/* FLEX ROWS */
.flexrow-nowrap { display:flex; flex-flow:row nowrap; }
.flexrow-wrap { display:flex; flex-flow:row wrap; }

/* FLEX COLUMNS */
.flexcol-nowrap { display:flex; flex-flow:column nowrap; }
.flexcol-wrap { display:flex; flex-flow:column wrap; }

/* FLEX CHILD SIZES */
.flexchild-1 { flex: 1 1 auto }
.flexchild-2 { flex: 2 1 auto }
.flexchild-3 { flex: 3 1 auto }
.flexchild-4 { flex: 4 1 auto }

/* JUSTIFY-CONTENT OPTIONS */
.just-start { justify-content:flex-start; }
.just-mid { justify-content:center; }
.just-end { justify-content:flex-end; }
.just-left { justify-content:left; }
.just-right { justify-content:right; }
.just-around { justify-content:space-around; }
.just-between { justify-content:space-between; }
.just-even { justify-content:space-evenly; }
.just-stretch { justify-content:stretch; }

/* ALIGN-ITEMS OPTIONS */
.align-start { align-items:flex-start; }
.align-mid { align-items:center; }
.align-end { align-items:flex-end; }
.align-stretch { align-items:stretch; }
.align-anchor { align-items:anchor-center; }
.align-base { align-items:baseline; }
.align-base-first { align-items:firstbaseline; }
.align-base-last { align-items:lastbaseline; }

/* GAP OPTIONS */
.gap10 { gap:10px }
.gap20 { gap:20px }
.gap25 { gap:25px }
.gap40 { gap:40px }
.gap50 { gap:50px }


/*
**********************************************************************************************
SPLIT SECTION styles
**********************************************************************************************
*/

section.split-1-2 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 2 1 auto; }
}

section.split-2-1 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 2 1 auto; }
	div:last-child { flex: 1 1 auto; }
}

section.split-1-3 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 3 1 auto; }
}

section.split-3-1 { 
	display: flex; 
	flex-flow: row nowrap; 
	justify-content: space-evenly;
	div:first-child { flex: 3 1 auto; }
	div:last-child { flex: 1 1 auto; }
}

section.split-2-1-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-1-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:last-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-2-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

section.split-2-2-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:last-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

section.split-2-1-2 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 2 1 auto; }
	div:last-child { flex: 2 1 auto; }
	div { flex: 1 1 auto }
}

section.split-1-2-1 { 
	display: flex; 
	flex-flow: row nowrap;
	div:first-child { flex: 1 1 auto; }
	div:last-child { flex: 1 1 auto; }
	div { flex: 2 1 auto }
}

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                     SEPARATOR STYLES                                        */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

hr {
	margin:50px 0px;
	border:1px solid var(--grey50);
}

hr.null10 { border:none; margin:10px 0px }
hr.null25 { border:none; margin:25px 0px }
hr.null50 { border:none; margin:50px 0px }
hr.null100 { border:none; margin:100px 0px }



/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                        LIST STYLES                                          */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

/* Mobile Screens */
@media only screen and (max-width: 768px) {
    ul, ol, li, dl, dt { font-size: 12pt; }
    dd { font-size: 12pt }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    ul, ol, li, dl, dt{ font-size: 12pt; }
    dd { font-size: 12pt }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    ul, ol, li, dl, dt { font-size: 12pt; }
    dd { font-size: 14pt }
}

/* All Lists */
ul, ol, dl { margin: 10px }


ul {
    list-style-position: inside;
}

ol {

}

li {

}

dl {
	padding: 15px;
	display: inline-block;
	outline: 1px solid var(--black);
    font-family: LibMono-Reg;
}

dt {
    font-family: LibMono-Bold;
}

dd {
	margin: 0px 0px 20px 20px;
    color: var(--grey60);
}

dd:last-child { margin: 0px 0px 0px 20px; }

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                       BUTTON STYLES                                         */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/
/* Mobile Screens */
@media only screen and (max-width: 768px) {
    button { font-size: 12pt; }
}

/* Tablet Screens */
@media only screen and (min-width: 768px) {
    button { font-size: 14pt; }
}

/* Desktop Screens */
@media only screen and (min-width: 992px) {
    button { font-size: 16pt; }
}

button {
	border-radius: 10px;
	padding: 8px 24px;
	background: var(--grey90);
    outline: none;
    border: none;
    color: var(--white);
}

button:hover {
    background: var(--grey20);
    color: var(--black);
}

/* Primary Buttons */
button.fill {
	border-radius: 10px;
	padding: 8px 24px;
	background: var(--btn-primary);
    outline: none;
    border: none;
    color: var(--white);
}

button.fill:hover { background: var(--btn-primary-hover); }
button.fill:active { background: var(--btn-primary-active); }
button.fill:disabled { background: var(--btn-primary-disabled); }

/* Secondary Buttons */
button.outline {
	border-radius: 10px;
	padding: 8px 24px;
	background: none;
    outline: 2px solid var(--blue-main);
    border: none;
    color: var(--blue-main);
}

button.outline:hover { outline: 2px solid var(--btn-secondary-hover); color: var(--btn-secondary-hover);}
button.outline:active { outline: 2px solid  var(--btn-secondary-active); color: var(--btn-secondary-active);}
button.outline:disabled { outline: 2px solid var(--btn-secondary-disabled); color: var(--btn-secondary-disabled);}

/* Button Icon Placement */
button.iconOnly::after { content: ">"; }
button.iconLeft::before { content: "> "; }
button.iconRight::after { content: " >"; }

button.squared { border-radius: 0px }
button.rounded { border-radius: 10px }
button.circular { border-radius: 25px }

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                        FORM STYLES                                          */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

form {
	margin: 20px;
	padding: 50px;
	border-radius: 10px;
	display: flex;
	gap: 25px;
	flex-flow: column nowrap;
	div.formq {
		display: flex;
		flex-flow: column nowrap;
		border-radius: 20px;
		padding: 25px;
		label {  margin: 0px 0px 10px 0px; }
		p.note { padding: 4px; }
		input { padding: 10px; }
		select { padding: 10px; }
		fieldset {
			padding: 5px;
			font-family: LibMono-Reg;
			div { padding: 5px; }
			legend { padding: 5px 10px; }
			input { font-size: 16pt; outline: none; }
			label { font-size: 14pt; font-family: LibMono-Reg; }
		}
	}
	input[type="submit"] { 
		padding: 10px;
		font-size: 20pt;
		font-family: LibMono-Bold;
		border-radius: 5px;
		background: var(--sm-green);
	}
	input[type="submit"]:hover {
		background: var(--green100);
		color: var(--sm-green);
	}
}

select {

}

option {

}

optgroup {

}

label {

}

/* Used to group several controls as well as labels (<label>) within a web form */
fieldset {

}
legend {

}

/* Contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. */
datalist { }

/* Displays an indicator showing the completion progress of a task, typically displayed as a progress bar */
progress {

}

textarea {

}

/* Represents either a scalar value within a known range or a fractional value */
meter {  }

/* Container element into which a site or app can inject the results of a calculation or the outcome of a user action */
output {  }

/*  Displays the content of the currently selected <option> inside a closed <select> element */
selectedcontent {  }

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                        TABLE STYLES                                         */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

/*
**********************************************************************************************
DEFAULT TABLE styles
**********************************************************************************************
*/

table { 

}


/* Encapsulates a set of <tr> elements indicating they are a table's header, body, and footer data respectively */
thead {  }
tbody {  }
tfoot {  }
tr {  }

th { font-family: LibMono-Bold; }
td {  }

/* Table caption */
caption {  }

/* Defines columns in a column group represented by its implicit or explicit parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined. */
col {  }
colgroup {  }


/*
**********************************************************************************************
PRESET TABLE styles
**********************************************************************************************
*/



table.collapse { border-collapse: collapse; }

table.border-none {
    border: none;
    th, tr,td { border: none; }
}

table.border-all {
    border: 1px solid black;
    border-collapse: collapse;
    tr,th,td { border: 1px solid black; }
}

table.border-outside {
    border: 1px solid var(--primary);
    border-collapse: collapse;
    tr,th,td { border: none; }
}

table.border-rows {
    border: 1px solid var(--primary);
    border-collapse: collapse;
    tr { border: 1px solid var(--primary); }
    th,td { border: none; }
}

/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                     MULTIMEDIA styles                                       */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/

img {  }

img.fadein {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: fade;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
}

img.floating {
    width: 450px;
    height: auto;
    animation-duration: 2s;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

/* Defines an area inside an image map that has predefined clickable areas. An image map allows geometric 
areas on an image to be associated with hyperlink. */
area {  }

/* Used with <area> elements to define an image map (a clickable link area). */
map {  }

/* Used to embed sound content in documents. It may contain one or more audio sources, represented using the 
src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream. */
audio {  }	

/* Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.*/
track {  }	

/* Embeds a media player which supports video playback into the document. You can also use <video> for audio content, but the audio element may provide a more appropriate user experience. */
video {  }	

/* Container defining a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. */
svg {  }


/***********************************************************************************************/
/*                                                                                             */
/*                                                                                             */
/*                                      MISC TAG styles                                        */
/*                                                                                             */
/*                                                                                             */
/***********************************************************************************************/
search { }
header { }
figure { }
figcaption { }
math { }
var { }
data { }

/* EMBEDDED CONTENT TAGS - Usage and descriptions

embed: Embeds external content at the specified point in the document. This content is provided by an external 
application or other source of interactive content such as a browser plug-in

fencedframe: Represents a nested browsing context, like <iframe> but with more native privacy features built in

iframe: Represents a nested browsing context, embedding another HTML page into the current one

object: Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin

picture: Contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios

source: Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats
*/

embed {  }
fencedframe {  }
iframe {  }
object {  }
picture {  }
source {  }


/* RUBY TAGS - Usage and descriptions
ruby: Represents small annotations that are rendered above, below, or next to base text, usually used 
for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common

rp: Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text

rt: Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element
*/

ruby {  }
rp {  }
rt {  }

/* 
BROWSER INFO TAGS - Usage and descriptions

wbr: Represents a word break opportunity — a position within text where the browser may optionally 
break a line, though its line-breaking rules would not otherwise create a break at that location

samp: Used to enclose inline text which represents sample (or quoted) output from a computer program. 
Its contents are typically rendered using the browser's default monospaced font

kbd: Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated

bdi: Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted

bdo: Overrides the current directionality of text, so that the text within is rendered in a different direction
*/

wbr {  }
samp {  }
kbd {  }
bdi {  }
bdo {  }