@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

@font-face {
  font-family: Cherry; /* set name */
  src: url('../fonts/Cherry\ Monospace-Light.ttf');
}

html {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    min-height: 100%
}

.header {
    margin-bottom: 4rem;
}

.col, [class*=" col-"], [class^="col-"] {
    /* padding-bottom: 0; */
    /* margin-bottom: 0; */
    margin-block-end: 0;

}

h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
margin-block: 0rem;
}


:root {
    color-scheme: light dark;


  --color-primary: #ff6e26;
  --color-lightGrey: #d2d6dd;
  --grid-maxWidth: 120rem;
  --font-size: 1.6rem;
  --font-family-sans: "Libertinus Serif", 'Times New Roman', Times, serif;
  --font-family-mono: "Iosevka Charon Mono", monaco, "Consolas", "Lucida Console", monospace;

    --light-color: rgb(48, 44, 44);
    --light-p-a: #512302;
    --light-bg-left: #e7e5e4;
    /* --light-bg-right: #f6d7d7; */
    --light-h2: #0463a6;
    --light-a: #ff6e26;
    --light-menu: #f7f4f3;	
    --light-underline: #66666633;	

    --dark-color: #dccdcd;
    --dark-p-a: #dcb89e;
    --dark-bg-left: #1c1a1a;
    /* --dark-bg-right: #4a0914; */
    --dark-h2: #83b9ec;
    --dark-a:#ff6e26;
    --dark-menu: #57212f;
    --dark-underline: #533d3dc8;
  }

  .light {
    color-scheme: light;
  }
  .dark {
    color-scheme: dark;
  }



body {
    font-optical-sizing: auto;
    font-weight: 200;
    font-size: 2.5rem;
    hyphens: auto;

    height: 100%;
    margin: 0;
    overflow-x: hidden;
    color: light-dark(var(--light-color), var(--dark-color));
    line-height: 1.5;
    overflow-y: scroll; 
    background: unset;
    background-repeat: no-repeat;
    background-attachment: scroll;

    background-color: light-dark(var(--light-bg-left), var(--dark-bg-left));
}


p { font-weight: 400;}
p b {
    font-weight: 600;
}

p a , #toc li a  {
    color: light-dark(var(--light-p-a), var(--dark-p-a));
    text-decoration-line: underline;
    text-decoration-color:light-dark(var(--light-underline), var(--dark-underline));
    text-decoration-style: solid;  
    text-decoration-thickness: 0.4rem;
        text-underline-offset: 0.3rem;

}

 .bsky-container a {
    color: light-dark(var(--light-p-a), var(--dark-p-a));

}

p a:hover , #toc li a:hover {
    /* text-decoration-color: var(--color-primary);   */
    text-decoration-thickness: 0.6rem;
            text-underline-offset: 0.4rem;

}


.bsky-comment-header {
    display: flex;
    height: 6rem;
    margin-bottom: 2rem;


}
.bsky-avatar {
    height: 6rem;
    display: inline;
}

.bsky-meta {
    padding-top: 1.5rem;
    display: inline;
    padding-left: 2rem;
    font-size: 1.75rem;
}

.bsky-actions {
    display: none;
}
.bsky-body {
    padding-bottom: 2rem;

}
.bsky-comment {
    padding: 1rem;
}

.bsky-body p {    font-family: var(--font-family-sans);
}


h1 {
    font-family: Cherry;
    color: light-dark(var(--light-a), var(--dark-a));

    font-size: clamp(5rem, 10vw + 0.2rem, 11rem);
    fill: light-dark(var(--light-a), var(--dark-a));
    stroke: light-dark(var(--light-a), var(--dark-a));
    stroke-width: 0.3rem;

  -webkit-text-stroke-color: light-dark(var(--light-a), var(--dark-a));
  -webkit-text-stroke-width: 0.3rem;
    paint-order: stroke fill;

}



h1 a:hover {
    text-transform: uppercase;
}


#navbar a, footer a {
    font-family: var(--font-family-mono);

    font-weight: 100;
    font-size: 3rem;
    color: light-dark(var(--light-p-a), var(--dark-p-a));



}

footer {
    font-size: 2.25rem;

}

#navbar a:hover, footer a:hover, h2 a:hover {
    font-weight: 700;


}


h2 {
                color: light-dark(var(--light-h2), var(--dark-h2));


    /* display: unset; */
    font-size: clamp(60px, 6vw + 0.3rem, 10rem);
    /* background: radial-gradient(at 0% 20%, #b4d0f7 0px, #6d98db 30%, #33508a 70%); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    position:relative;  
    text-transform: uppercase;
    font-family: var(--font-family-mono);
   /* paint-order: stroke fill; */

}
h2 a {    
        color: light-dark(var(--light-h2), var(--dark-h2));

}
/* h2:after {
    background: none;
    content: attr(data-text);
    left: 0;
    position: absolute;
    top: 0;
        -webkit-text-stroke: 0.3rem #dac3c6 ;

    z-index: -1;

} */



h2 a:hover, h1 a:hover {
        opacity: 1 !important;

}

h3 {
        line-height: 1.1;
    padding-bottom: 1rem;
}

h3, .bsky-header-text {
      
    font-size: 4rem;
    font-family: var(--font-family-mono);
    text-transform: lowercase;
}

.bsky-header {
    padding-bottom: 2rem;
}
.bsky-header-text {
    visibility: hidden;
margin-bottom: -2rem;}

/* .bsky-header-text:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "comments";
} */

.bsky-reply-btn {
        visibility: hidden;
            display: block;

}
.bsky-reply-btn:after {

    visibility: visible;
    position: absolute;
    top: 5rem;
    left: 0;
    display: block;
    content: "🗨 reply on bluesky";
        padding-bottom: 3rem;
        margin-top: -3rem;
}

footer
{
    margin-top: 5rem ;
    margin-bottom: 1rem;
    
}


.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
  cursor: pointer;  
}

.tooltiptext {
  visibility: hidden;
  /* width: 20rem; */
  background-color: rgba(188, 170, 170, 0.4);
  /* text-align: center; */
  /* border-radius: 6px; */
  /* padding: 5px 0; */
  padding: 1rem 2rem;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0rem;
  /* font-family: var(--font-family-mono); */
  /* margin-left: -65px; */
  /* font-size: 2rem; */
font-weight: 400;
      font-size: 80%;
    line-height: 1.3;
    /* position: relative; */
    font-family: var(--font-family-mono);

}


.tooltiptext a {

    text-decoration-line: underline;
    text-decoration-color:light-dark(var(--light-underline), var(--dark-underline));
    text-decoration-style: solid;  
    text-decoration-thickness: 0.4rem;
    text-underline-offset: 0.3rem;
}

.tooltiptext a:hover, .tt a:hover {
    /* text-decoration-color: var(--color-primary);   */
    text-decoration-thickness: 0.6rem;
                text-underline-offset: 0.4rem;

}



.tooltip:hover .tooltiptext {
  visibility: visible;
}


.tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -7rem;
  border-width: 7rem;
  border-style: solid;
  border-color: transparent transparent   rgba(188, 170, 170, 0.4) transparent;
} 




 @media screen and (max-width: 900px) {

   .tooltiptext {
    font-size: 1.75rem;
   }

   .tt {
    font-size: 2rem;
   }

    #navbar a, footer a {
        font-size: 2.5rem;
    }

    .header
    {padding-bottom: 5rem;}


}

 @media screen and (max-width: 631px) {
        .terminal-hide{
         display: none;
        }

    .header
    {padding-bottom: 0rem;}


 }

 h2.inline-h2 {
    display: inline;
}




.flip {
    display: inline-block;
    transform: scaleX(-1);
    filter: FlipH;
}


.sidenotes {
    font-family: var(--font-family-mono);
    font-size: 2rem;
}

#terminal 
{
    padding-top: 2rem;
}

#terminal:hover {
    cursor: help;
} 

/* https://www.pdp-11.nl/dg/d200/dasher200.html */
/* https://20th.ch/design-vintage-1950-80/design-vintage-des-annees-1960-a-70/dasher-d200-terminal-ordinateur/ */


#navbar {
    /* position: sticky; */
    top: 0;
    z-index: 999;
    overflow: hidden;
    /* background-color: light-dark(var(--light-menu), var(--dark-menu)); */
    margin-bottom: 3rem;
    /* position: fixed; */
    width: 100%;

} 

#navbar a {
    float: left;
    display: block;
    text-align: center;
    padding: 1rem calc(var(--grid-gutter)*0.5); 
    text-decoration: none;
    min-width: 5rem;
} 

#navbar a:first-of-type {
padding-left: 0rem;
}
#navbar a:last-of-type {
padding-right: 0rem;
}

#nav-icons a{
    float:right;

}


/* Sidenote counter */
body {
    counter-reset: sidenote-counter;
}
.sidenote-number {
    counter-increment: sidenote-counter;
}
/* Counter before the sidenote in the margin. */
.sidenote::before {
    content: counter(sidenote-counter)".";
    position: relative;
    vertical-align: baseline;
    font-size: 0.9em;
    font-weight: bold;
    font-family: var(--font-family-sans);
    padding-right: 0.5rem;


}
/* Counter in the main body. */
.sidenote-number::after {
    content: counter(sidenote-counter);
    vertical-align: super;
    font-size: 0.7em;   
    font-weight: bold;
    margin-right: 0.5rem;

}



.sidenote, .date, .bsky-container {
    font-size: 80%;
    line-height: 1.3;
    position: relative;
    font-family: var(--font-family-mono);
            font-weight: 400;
            

}
.date {
    opacity: 0.5;
    display: inline;
    padding-left: 1rem;
}


.toc-box {
  padding-left: 0rem;
  margin-top: -2rem;
}

/* Wide viewport */
@media (min-width: 900px) {
    .sidenote {
        float: left;
        clear: left;
        margin-left: -26vw; 
        text-align: right;

        top: -3rem;
        width: 23vw; 
        max-width: 60rem;
        margin-top: 1rem;
    }


}

/* Narrow viewport */
@media (max-width: 900px) {
    .sidenote {
        float: left;
        text-align: left;

        width: 100%;
        margin: 1rem 0;
        padding-left: 15%;
    }
}


#toc li {
    font-family: var(--font-family-mono);
    list-style: disc;
    list-style-position: inside;
        font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.25;
}


li::marker {
    color: light-dark(var(--light-color), var(--dark-color));
}

#toc::before {
        font-family: var(--font-family-mono);
    content: "Contents";
    display: block;
    font-weight: 400;
    font-size: 4rem;
    text-transform: uppercase;
    /* letter-spacing: 0.06em; */
    margin-bottom: 1rem;
        opacity: 0.75;

  }


 @media screen and (max-width: 600px) {

        #terminal {
            width: 50%;
            padding-right: 6rem;
        }

        h1 {

    font-size: clamp(5rem, 15vw + 0.2rem, 12rem);

    }
    #navbar a, footer a {
            font-size: 2.25rem;
    }


       body {
            font-size: 2.25rem;

    }

    h2.inline-h2 {
        display: block;
        }
        .date {    
                padding-left: 0rem;
                top: -1rem;
        }

}