/* ==========================================
   HACKER / TERMINAL THEME VARIABLES & CORE
   ========================================== */

:root {
    --header-bg-color: #030a03;
    --logo-color: #00ff66; /* Primary Matrix / Hacker Green */

    --main-bg-color: #020502;
    --main-bg-color-lite: #0a110a;

    --highlight: #00ff66; 
    --accent-glow: #008822;

    --text-colour-lite: #00ff66;
    --text-colour-dark: #001100;
    --text-colour-navb: #00ff66;

    --terminal-dim-green: #00aa44;
    --terminal-border: #00ff66;
}

/* BASE STYLES */
body {
    background-color: var(--main-bg-color);
    color: var(--text-colour-lite);
    font-family: 'Press Start 2P', system-ui, monospace;
    text-shadow: 0 0 5px rgba(0, 255, 102, 0.4);
    margin: 0;
}

hr {
    border-color: var(--terminal-dim-green);
}

/* CONTENTS & DETAILS */
details {
    display: inline-block;
    min-width: 10rem;
    border: 1px solid var(--terminal-border);
    padding: 1rem;
    margin: .5rem 1rem .5rem 1rem;
    border-radius: 2px;
    background-color: rgba(0, 255, 102, 0.03);
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.1);
}

/* HEADER */
.header_container {
    top: 0;
    position: sticky;
    z-index:2;
    width: 100%;
    background-color: #000;
    font-family: 'Press Start 2P', monospace;
    border-bottom: 2px solid var(--terminal-border);
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.2);
}

.header_container::before {
    display: block;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 999;
    background-size: 100% 3px, 6px 100%;
}

.logo_header_bar > h2 {
    color: var(--logo-color);
    text-align: center;
    margin: 0 auto;
    padding: 3rem 0 2rem 0;
    font-size: 4rem;
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 4px;
    text-shadow: 0 0 12px var(--logo-color);
}

#featured_image {
    display: block;
    object-fit: cover;
    float: right;
    margin-top: -14rem;
    width: 12rem;
    height: 12rem;
    clip-path: circle();
    border: 2px solid var(--terminal-border);
    filter: sepia(100%) hue-rotate(80deg) saturate(300%) contrast(150%);
}

.header_menu_bar {
    margin: 0;
    text-align: center;
    border-bottom: 2px solid var(--terminal-border);
    background: rgba(0, 20, 0, 0.6);
}

.header_menu_bar > li {
    list-style-type: none;
    display: inline;
}

ul.header_menu_bar {
    padding: 0 0 .5rem 0;
}

#shift {
    margin-top: 2rem;
}

a.navig {
    margin: .4em;
    color: var(--text-colour-navb);
    text-decoration: none;
    display: inline-block;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    padding: .3rem .5rem;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 1px;
    transition: all 0.2s ease-in-out;
}

.header_menu_bar a:visited {
    color: var(--text-colour-navb);
}

/* MENU BAR MATRIX STATUS COLORS
#rb0 > a.navig:hover, #rb0 > .highlight, #status.not_started {
    background-color: #ff2222;
    color: #000;
    box-shadow: 0 0 10px #ff2222;
}
#rb0 > a { border-top: 2px solid #ff2222; }

#rb1 > a.navig:hover, #rb1 > .highlight {
    background-color: #ffaa00;
    color: #000;
    box-shadow: 0 0 10px #ffaa00;
}
#rb1 > a { border-top: 2px solid #ffaa00; }

#rb2 > a.navig:hover, #rb2 > .highlight, #status.in_progress {
    background-color: #ffff00;
    color: #000;
    box-shadow: 0 0 10px #ffff00;
}
#rb2 > a { border-top: 2px solid #ffff00; }

#rb3 > a.navig:hover, #rb3 > .highlight, #status.complete {
    background-color: #00ff66;
    color: #000;
    box-shadow: 0 0 10px #00ff66;
}
#rb3 > a { border-top: 2px solid #00ff66; }

#rb4 > a.navig:hover, #rb4 > .highlight {
    background-color: #00ffff;
    color: #000;
    box-shadow: 0 0 10px #00ffff;
}
#rb4 > a { border-top: 2px solid #00ffff; }

#rb5 > a.navig:hover, #rb5 > .highlight {
    background-color: #cc66ff;
    color: #000;
    box-shadow: 0 0 10px #cc66ff;
}
#rb5 > a { border-top: 2px solid #cc66ff; }

#rb6 > a.navig:hover, #rb6 > .highlight {
    background-color: #8148B2;
    color: #fff;
    box-shadow: 0 0 10px #8148B2;
}
#rb6 > a { border-top: 2px solid #8148B2; }

#rb7 > a.navig:hover, #rb7 > .highlight {
    background-color: #00ffaa;
    color: #000;
    box-shadow: 0 0 10px #00ffaa;
}
#rb7 > a { border-top: 2px solid #00ffaa; }
*/

/* THE COLOURS FOR THE MENU BAR - ALL GREEN MATRIX THEME */
    #rb0 > a.navig:hover, #rb0 > .highlight,
    #rb1 > a.navig:hover, #rb1 > .highlight,
    #rb2 > a.navig:hover, #rb2 > .highlight,
    #rb3 > a.navig:hover, #rb3 > .highlight,
    #rb4 > a.navig:hover, #rb4 > .highlight,
    #rb5 > a.navig:hover, #rb5 > .highlight,
    #rb6 > a.navig:hover, #rb6 > .highlight,
    #rb7 > a.navig:hover, #rb7 > .highlight {
        background-color: #00ff66;
        color: #000;
        box-shadow: 0 0 10px #00ff66;
    }

    #rb0 > a, 
    #rb1 > a, 
    #rb2 > a, 
    #rb3 > a, 
    #rb4 > a, 
    #rb5 > a, 
    #rb6 > a, 
    #rb7 > a {
        border-top: 2px solid #00ff66;
    }

/* IMAGES & VIDEO (GREEN MATRIX TINT) */
img, .video {
    margin: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 50vw;
    max-height: 50vh;
    border-radius: 2px;
    filter: sepia(100%) hue-rotate(85deg) saturate(300%) contrast(120%);
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.3);
}

.icon {
    border-radius: 0;
    filter: none;
}

.happenings_image {
    border-radius: 50%;
}

img:not(.noborder, .circular--landscape) {
    border: 1px solid var(--terminal-border);
}

.gallery {
    float: left;
    max-width: 10vw;
    margin: 1rem 1rem 0.5rem 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 0;
}

.centre_the_gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

figcaption, figure {
    margin: 0;
}

video:not(.noborder) {
    border: 1px solid var(--terminal-border);
}

.circular--landscape img { 
    width: auto; 
    height: 100%;
}

.circular--landscape { 
    object-fit: cover;
    width: 12vw; 
    height: 12vw;
    overflow: hidden; 
    filter: sepia(100%) hue-rotate(85deg);
    border: var(--terminal-border) 2px solid;
    box-shadow: 0 0 10px var(--terminal-border);
} 

.circular--landscape:hover { 
    filter: none;
    border: #fff 2px solid;
    box-shadow: 0 0 15px #fff;
} 

.contents_list {
    font-weight: bold;
    color: var(--highlight);
}

.centimg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url('./static/imgs/robot_grey_eyes.svg');
}

.centimg:hover {
    background-image: url('./static/imgs/robot_red_eyes.svg');      
}

.file_box {
    display: inline-block;
    border: 1px solid var(--terminal-border);
    background-color: #051505;
    padding: 1rem;
    margin: 0 1rem .5rem 1rem;
    border-radius: 2px;
    box-shadow: inset 0 0 8px rgba(0, 255, 102, 0.2);
}

.file_box > img {
    vertical-align: middle;
    padding: 0 .5rem 0 0;
}

/* IMAGE FLOATING */
.floater {
    float: right;
    margin-left: 2em;
    border-radius: 2px;
}

.clear {
    display: block;
    clear: both;
}

/* BACK TO TOP LINKS */
.bordered {
    display: block;
    margin: 2em -1.5em 1.5em -1.5em;
    background-color: #051505;
    border-top: 1px solid var(--terminal-border);
    border-bottom: 1px solid var(--terminal-border);
    color: var(--highlight);
    padding: .5em 1.5em;
}

/* MAIN SECTION */
main {
    border-radius: 2px;
    background-color: var(--main-bg-color-lite);
    border: 1px solid var(--terminal-border);
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
    grid-area: mn;
}

main p {
    margin-bottom: .5em;
    line-height: 1.5;
}

h4 {
    color: var(--highlight);
    margin: 0;
    margin-top: 2em;
    padding-bottom: .5em;
    border-bottom: 1px dashed var(--terminal-dim-green);
    text-shadow: 0 0 8px var(--highlight);
}

article {
    padding-bottom: 0rem;
}

/* SUBHEADER */
#subNav {
    grid-area: sA;
}

.sec_nav {
    font-size: 0.9rem;
    padding-bottom: .3em;
    color: var(--text-colour-lite);
    float: right;
}

.hold {
    padding-top: 1.2rem;
}

.sec_nav a {
    font-weight: bold;
    text-decoration: none;
    color: var(--highlight);
    cursor: crosshair;
}

.sec_nav a:hover {
    color: #0f6;
    text-shadow: 0 0 10px #0f6;
    transition: all .2s;
}

.sep {
    padding-left: .2em;
    padding-right: .2em;
    color: var(--terminal-dim-green);
}

.left {
    float: left;
}

.item {
    padding: 0 .1em;
}

#status {
    font-size: smaller;
    padding: 2px 5px 2px 5px;
    border-radius: 2px;
    font-weight: bold;
}

/* TABLE FORMATTING */
td {
    font-family: monospace;
    font-size: 1.1em;
    padding: 4px 12px;
    background-color: #051505;
    color: var(--highlight);
    border: 1px solid var(--terminal-dim-green);
}

td.top {
    background-color: #082208;
    color: #fff;
}

/* PADDING / MARGINS */
.section_padding {
    padding: .8em 1.5em .5em 1.5em;
}

.top {
    margin-top: 0.3em;
    margin-bottom: 0.7em;
}

/* CODE BLOCKS */
pre {
    overflow: auto;
    border: 1px solid var(--terminal-border);
    background: #000;
    box-shadow: inset 0 0 10px rgba(0, 255, 102, 0.2);
}

code {
    display: inline-block;
    font-family: "Courier New", monospace;
    border-radius: 2px;
    color: #00ff66;
}

code:not(.inline) {
    margin: .5em .5em 1em .5em;
    padding: .5em 1em;
}

.inline {
    padding: 2px 6px;
    background-color: #051805;
    border: 1px solid var(--terminal-dim-green);
}

.html {
    background-color: #051505;
}

.cmd {
    background-color: #000;
    color: var(--highlight);
    border-left: 3px solid var(--highlight);
}

.root {
    color: #00ff00;
    font-weight: bold;
}

/* LISTS */
.ref {
    font-size: .85em;
    color: var(--terminal-dim-green);
    padding: 0;
    margin: 0;
    list-style-type: none;
    padding-bottom: 1em;
}

li {
    padding: .3em 0;
}

/* LINKS */
.in_text_link {
    text-decoration: underline;
    color: var(--highlight);
    cursor: crosshair;
}

.licence_link, .licence_link:visited {
    text-decoration: none;
    color: var(--terminal-dim-green);
}

.in_text_link:hover, .licence_link:hover {
    color: #ffffff;
    text-shadow: 0 0 8px #ffffff;
}

.up_arrow {
    color: var(--highlight);
}

/* FOOTER SECTION */
footer, .subheader {
    background-color: #030d03;
    color: var(--highlight);
    border: 1px solid var(--terminal-border);
}

.copy {
    color: var(--terminal-dim-green);
}

footer {
    grid-area: ft;
    padding: 1em 1.5em;
}

/* RESPONSIVE LAYOUT & BREAKPOINTS */
.grid {
    margin: 0;
    display: grid;
    grid-template-rows: auto;
    grid-gap: 0;
}

/* Phone Portrait */
@media screen and (max-width:499px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "sA sA sA"
            "mn mn mn"
            "ft ft ft";
    }

    main { border-radius: 0; }

    a.navig {
        background-color: #051505;
        display: block;
        margin: 0;
        border-bottom: 1px solid var(--terminal-dim-green);
    }

    footer, .rounded {
        border-radius: 0;
        margin: 0;
    }

    nav, #photo-box { display: none; }

    img:not(.icon) {
        float: none;
        clear: both;
        min-width: 50vw;
    }

    .icon {
        border-radius: 0;
        margin: 0 auto .5rem auto;
    }

    .file_box { text-align: center; }
}

/* Tablet Portrait */
@media screen and (max-width:900px) and (min-width:501px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "sA sA sA"
            "mn mn mn"
            "ft ft ft";
    }

    .video { height: 180px; }

    img:not(.icon) {
        float: none;
        clear: both;
        min-width: 50vw;
    }

    .icon {
        border-radius: 0;
        margin: 0 auto .5rem auto;
    }

    .file_box { text-align: center; }

    footer, .rounded {
        border-radius: 0;
        margin: 0;
    }

    * { border-radius: 0; }
}

/* Tablet Landscape & Up */
@media screen and (min-width:900px) {
    .grid {
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
            ". sA sA sA sA sA ."
            ". mn mn mn mn mn ."
            ". mn mn mn mn mn ."
            ". ft ft ft ft ft .";
    }

    .video { height: 360px; }

    footer {
        margin-bottom: 5vh;
        border-radius: 0 0 2px 2px;
    }
}

/* Desktops and Laptops */
@media only screen and (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
            ". sA sA sA sA sA ."
            ". mn mn mn mn mn ."
            ". mn mn mn mn mn ."
            ". ft ft ft ft ft .";
    }

    footer {
        margin-bottom: 5vh;
        border-radius: 0 0 2px 2px;
    }

    img { max-width: 40vw; }
}