@font-face{   
    font-family: "C64 Pro Mono Local";
    src: url("/fonts/c64font/C64_Pro_Mono-STYLE.ttf") format("truetype");
}

@font-face {
    font-family: "C64 Pro Local";
    src: url("/fonts/c64font/C64_Pro-STYLE.ttf") format("truetype");
}



.last_gen_date{
    font-size: 0.7vw;    
}

.vic20 {
    background-color: white; color: blue; /*border: 8px solid cyan; */
    margin: 13px;
}

/* Manage post categories */
.jjcat {
    padding: 0.2rem 0.8rem;
    font-size: 0.9rem;
    border-radius: .2rem;
}

/** Manage series */
.jj_seriestag{
    padding: 0.2rem 0.8rem;
    font-size: 0.9rem;
    border-radius: .2rem;
    color:rgb(184, 0, 123);
}



/** To review */
.jjfloatleft{
    float: left;
    margin: 0.2rem;   
    padding: 0.2rem 0.8rem; 
}


/** 2025 Printing setup to remove sidebar not relevant informations
*/
@media print
{    
    header, aside.sidebar, div.post_share, div.catag {
        display:none;
    }    
    code {
        font-size: 60%;
        font-weight: 400;
        overflow-y: hidden;
        display: block;
        font-family: 'Monaco', monospace;
        word-break: break-all;        
    }

}

	
/** End printing setup */


/** TBD Section below */

/** See https://dustri.org/b/glitch-effect-on-text-in-pure-css.html */
.glitch:after, .glitch:before {
    position: absolute;
    background: white;
    width: 40%;
    content: attr(data-text);
    clip: rect(0, 900px, 0, 0);
}

.glitch:after {
    animation: glitch-anim 2s infinite linear alternate-reverse;
    left: 1px;
    text-shadow: 1px 0 red;
}

.glitch:before {
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
    left: -1px;
    text-shadow: -1px 0 limegreen;
}

@keyframes glitch-anim {
    0% { clip: rect(3px, 9999px, 93px, 0); }
    5% { clip: rect(53px, 9999px, 78px, 0); }
    10% { clip: rect(10px, 9999px, 75px, 0); }
    15% { clip: rect(32px, 9999px, 40px, 0); }
    20% { clip: rect(65px, 9999px, 62px, 0); }
    25% { clip: rect(31px, 9999px, 14px, 0); }
    30% { clip: rect(94px, 9999px, 87px, 0); }
    35% { clip: rect(81px, 9999px, 41px, 0); }
    40% { clip: rect(45px, 9999px, 50px, 0); }
    45% { clip: rect(82px, 9999px, 41px, 0); }
    50% { clip: rect(71px, 9999px, 3px, 0); }
    55% { clip: rect(75px, 9999px, 60px, 0); }
    60% { clip: rect(20px, 9999px, 49px, 0); }
    65% { clip: rect(67px, 9999px, 92px, 0); }
    70% { clip: rect(47px, 9999px, 55px, 0); }
    75% { clip: rect(63px, 9999px, 90px, 0); }
    80% { clip: rect(70px, 9999px, 92px, 0); }
    85% { clip: rect(41px, 9999px, 60px, 0); }
    90% { clip: rect(56px, 9999px, 79px, 0); }
    95% { clip: rect(21px, 9999px, 68px, 0); }
    100% { clip: rect(15px, 9999px, 72px, 0); }
}
  
@keyframes glitch-anim-2 {
    0% { clip: rect(65px, 9999px, 99px, 0); }
    5% { clip: rect(86px, 9999px, 70px, 0); }
    10% { clip: rect(79px, 9999px, 60px, 0); }
    15% { clip: rect(15px, 9999px, 88px, 0); }
    20% { clip: rect(24px, 9999px, 5px, 0); }
    25% { clip: rect(35px, 9999px, 3px, 0); }
    30% { clip: rect(56px, 9999px, 11px, 0); }
    35% { clip: rect(2px, 9999px, 38px, 0); }
    40% { clip: rect(60px, 9999px, 50px, 0); }
    45% { clip: rect(27px, 9999px, 4px, 0); }
    50% { clip: rect(79px, 9999px, 12px, 0); }
    55% { clip: rect(23px, 9999px, 8px, 0); }
    60% { clip: rect(65px, 9999px, 55px, 0); }
    65% { clip: rect(19px, 9999px, 7px, 0); }
    70% { clip: rect(43px, 9999px, 17px, 0); }
    75% { clip: rect(65px, 9999px, 91px, 0); }
    80% { clip: rect(45px, 9999px, 66px, 0); }
    85% { clip: rect(3px, 9999px, 2px, 0); }
    90% { clip: rect(58px, 9999px, 81px, 0); }
    95% { clip: rect(29px, 9999px, 20px, 0); }
    100% { clip: rect(82px, 9999px, 28px, 0); }
}

.jj_sticky{
	background-image: url("/wp-content/uploads/2009/02/save_the_date.jpg");
	background-repeat: no-repeat;
	background-position: top right;
	background-size:7vw;
}

.jj_featured_post::before{
    content: "!F";
    font: normal 1.24vw "C64 Pro Mono Local", verdana, helvetica, sans-serif;
    letter-spacing: 0.05px;
    padding: 0;
    margin: 0;
}
.jj_featured_post:hover::before{
    content: "!F";
    font: normal 1.24vw "C64 Pro Mono Local", verdana, helvetica, sans-serif;      
    color: blue;    
    letter-spacing: 0.05px;
    padding: 0;
    margin: 0;
}
.jj_featured_post {
    border-left: 8px solid gold;
    /*background-image: url("/wp-content/uploads/2009/02/save_the_date.jpg");*/
    /*background-position: top 2% right -8%;*/
    /*background-repeat: no-repeat;*/
    background-size:7vw;
    
}

/** ISSO part */
/** Adjust the information on the number of comments (h4) */
.isso-thread-heading{
    font-size:95%;
}

/** Adjust legacy blockquotes used in a lot of articles
See /2025/anubis/
*/
blockquote {
    z-index: -1;
}


h2{
    margin-top: 6px;
    margin-bottom: 3px;
}

article a:not(.button) {
    color: inherit !important;
    text-decoration: underline;
    -webkit-text-decoration-color: rgb(14, 205, 234);
    text-decoration-color: rgb(14, 205, 234);
    text-decoration-thickness: 11%;
    text-underline-offset: 6%;
    text-underline-position: from-font;
    text-decoration-style: solid;
}

.jjcite {
    text-align: right;
    font-style: italic;
    margin-right: 2em;
}

.jjdisclaimer {
    margin-left: 10%;
    margin-right: 10%;
    text-align:left; 
    font-style:italic;
    background-color:aliceblue;
    line-height: 1.25; /** is 1.5 normally */
    font-size: 0.9rem; /** 1.1rem normally */
    
}

.c64_small {
    font: normal 0.66vw "C64 Pro Mono Local", verdana, helvetica, sans-serif;
    letter-spacing: 0.25px;
    padding: 0;
    margin: 0;
}


/** Make featured image nice */

.post_featured {
    float: right;
}

/** Taken from WP them Teia: a nice rotate images upon mouse hover*/
img.image_thumbnail:hover {
	-ms-transform: rotate(2deg) scale(1.1);
    -webkit-transform: rotate(2deg) scale(1.1);
    transform: rotate(2deg) scale(1.1);
	-webkit-transition: transform .6s ease;
    -moz-transition: transform .6s ease;
    -o-transition: transform .6s ease;
    -ms-transition: transform .6s ease;
    transition: transform .6s ease;
}
img.image_thumbnail {
	display: block;
	-webkit-transition: transform .6s ease;
	-moz-transition: transform .6s ease;
	-o-transition: transform .6s ease;
	-ms-transition: transform .6s ease;
	transition: transform .6s ease;
}
/** ROTATE IMAGE ENDS */

/** Markdown usage:
  * ![:right::jj_image40](/url )
  * vw is in percentage of the browser view point
  */
img.jj_image30 {
    /* 40% of the total size*/
    width: 30vw;
    size:  30vw;
    padding: 8px;
}

img.jj_image40 {
    /* 40% of the total size*/
    width: 40vw;
    size:  40vw;
}

img.jj_image60 {
    /* 40% of the total size*/
    width: 60vw;
    size:  60vw;
}

/** Audio player */
audio {
    display: block;
    width: 100%;
    margin: 1rem 0;
}

/** Control goat rendering */
div.goat {
    max-width: 28vw;
    vertical-align: center;    
    padding: 10px;
}

/** Ensure table of contents is nice.
 * GG Not perfect, built by hand
 * Please refer also to tech/config/_default/markup.toml
 * for TableOfContents configuration
 */
nav#TableOfContents {
  counter-reset: toc_section;
}


nav#TableOfContents {
    ol > li{
        counter-reset: toc_subsection;
        list-style-type: none;
    }

    ol > li::before {
        counter-increment: toc_section;
        content: counter(toc_section) ". ";
    }

    ol > li > ol > li {
        counter-reset: toc_subsection3;
        list-style-type: none;
    }

    ol > li > ol > li::before {
        counter-increment: toc_subsection;
        content: counter(toc_section) "." counter(toc_subsection) " ";
    } 
    
    ol > li > ol > li > ol > li::before {
        /** DEBUGGER: color:red; */
        counter-increment: toc_subsection3;
        content: counter(toc_section) "." counter(toc_subsection) "." counter(toc_subsection3) " ";
    }
}