/* @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');  
*/  

:root {  
  cursor: url('https://reedybear.com/bearblog/cursor-wh.png'), auto;  

	/* Custom #847996; */  
	--underline_color: #a000a0;  
    --main-color:#a000a0;  
    --width: 720px;  
    --font-main: 'Roboto Mono', monospace;  
    --font-secondary: 'Roboto Mono', monospace;  
    --font-scale: .9em;  
    --background-color: #fff;  
    --heading-color: #232333;  
    --text-color: #232333;  
    --link-color: #232333;  
    --visited-color: #232333;  
    /*--main-color: #ff0000;*/  
    --code-background-color: #f2f2f2;  
    --code-color: #222;  
    --blockquote-color: #222;  
    --yellow: #FCEF30;  
}  

body > header {  
	background: #620062;  
	padding: 4px 12px;  
	border-radius: 0px 0px 16px 16px;  
	color: white;  
	--link-color: white;  
	--heading-color: var(--yellow);  
	--underline_color: var(--yellow);  
	box-shadow: 0px 0px 15px #9d009d;  
	margin: 0;  
    border: none;  
}  
body > header > nav a {  
    border-left: 2px solid transparent;  
    border-right: 2px solid transparent;  
    
}  


body > header > nav a:hover {  
  --main-color: black;  
  --underline_color: orange;  
  --link-color: white;  
  background: none;  
  border: 2px solid orange;  
  padding-top:4px;  
  padding-bottom: 2px;  
  border-radius: 75% 9px / 30% 8px;  
}  

body > main {  
  box-shadow: inset 0px 0px 3px #d900d93b ,0px 10px 10px #8000808a;  
}  

main > h1:first-child {  
    margin-bottom:0;  
}  

main > p:has(> i > time){  
    margin: 0;  
}  

/**  
footer > span::after {  
    content: "Cursor icons by G-Cat on flaticon";  
}  
*/  


body {  
    font-family: var(--font-secondary);  
    font-size: var(--font-scale);  
    margin: auto;  
    padding: 0px;  
    max-width: var(--width);  
    text-align: left;  
    background-color: var(--background-color);  
    word-wrap: break-word;  
    overflow-wrap: break-word;  
    line-height: 1.5;  
    color: var(--text-color);  
}  
body > main {  
   padding: 20px;  
}  

h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
    font-family: var(--font-main);  
    color: var(--heading-color);  
}  

a {  
    color: var(--link-color);  
    font-family: var(--font-main);  
    cursor: url('https://reedybear.com/bearblog/link-cursor-wh.png'), pointer;  
    text-decoration: none;  
    border-bottom: 3px solid var(--underline_color);  
  	padding: 0 4px;  
  	border-top: 1px solid transparent;  
}  

a:hover {  
    /* background-color: var(--main-color);  
    color: white; */  
    text-decoration: none;  
  	border-radius:8px;  
    border-color: orange;  
    border-top: 1px solid purple;  
}  

header {  
    margin-bottom: 40px;  
    padding-bottom: 20px;  
    border-bottom: 3px dotted #232333;  
}  

nav a, nav a:hover {  
    margin-right: 8px;  
    padding: 4px 5px 2px 4px;  
  
  	/*  
    border-radius: 25% 8px 12% 10px;  
  	border-radius: 25% 12%;  
    border-radius: 50% 9px / 60% 6px;  
    */  
  	border-radius: 80% 9px / 40% 8px;  
    text-wrap:nowrap;  
}  

strong,  
b {  
    color: var(--heading-color);  
}  

button {  
    margin: 0;  
    cursor: url('https://reedybear.com/bearblog/btn-cursor-wh.png'), pointer;  

}  

main {  
    line-height: 1.6;  
}  

table {  
    width: 100%;  
}  

hr {  
    border: 0;  
    border-top: 1px dashed;  
}  

img {  
    max-width: 100%;  
}  

code {  
    font-family: monospace;  
    padding: 2px;  
    background-color: var(--code-background-color);  
    color: var(--code-color);  
    border-radius: 3px;  
}  

blockquote {  
    border-left: 1px solid #999;  
    color: var(--code-color);  
    padding-left: 20px;  
    font-style: italic;  
}  

footer {  
    margin-top: 40px;  
    border-top: 3px dotted #232333;  
    padding: 25px 0;  
    text-align: center;  
}  

a.title {  
    border:none;  
    padding:0;  
}  

.title:hover {  
    text-decoration: none;  
}  

.title h1 {  
    font-size: 1.5em;  
}  

.inline {  
    width: auto !important;  
}  

.highlight,  
.code {  
    padding: 1px 15px;  
    background-color: var(--code-background-color);  
    color: var(--code-color);  
    border-radius: 3px;  
    margin-block-start: 1em;  
    margin-block-end: 1em;  
    overflow-x: auto;  
}  



table {  
    border-spacing: 0;  
}  

th,  
td {  
    padding: 6px 13px;  
    border: 1px solid #dfe2e5;  
    font-size: 1em;  
}  

/** The only part that needs modification for standard setups */  
.upvote-button {  
    --width: 50px;  
    --height: 50px;  
    /* bear water fish happy */  
    --unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear6.webp");  
    --hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear7.webp");  
    --clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear9.webp");  
    --clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear8.webp");      
    /* bear and penguin */  
  /*  
    --unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear1.webp");  
    --hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear2.webp");  
    --clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear4.webp");  
    --clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/polar-bear5.webp");      
  */  
}  


 /* hide the default button */  
.upvote-button svg {  
    display:none;  
}  
.upvote-count {  
	border: 1px solid lightgrey;  
	padding: 4px;  
	/* background: #fdfdfd; */  
    background: #8b398b;  
    color:white;  
}  
/* when your post is untoasted */  
.upvote-count::before {  
    background: var(--unclicked_url);  
    display:block;  
    width: var(--width);  
    height: var(--height);  
    background-size:cover;  
    content: "";  
}  
/* when mouse hovers over the toast button */  
.upvote-count:hover::before {  
    background: var(--hover_url);  
    display:block;  
    width: var(--width);  
    height: var(--height);  
    background-size: cover;  
    content: "";  
}  
/* when your post has been toasted */  
.upvote-button[disabled] .upvote-count::before {  
    background: var(--clicked_url);  
    display:block;  
    width: var(--width);  
    height: var(--height);  
    background-size: cover;  
    content: "";  
}  
/* When mouse is hovering over your toast button AFTER your post is toasted */  
.upvote-button[disabled] .upvote-count:hover::before {  
    background: var(--clicked_and_hovering_url);  
    display:block;  
    width: var(--width);  
    height: var(--height);  
    background-size: cover;  
    content: "";  
}  

/**  
* Adding photos to blog list  
*/  
/* it didn't work well  
* I got the image in, but I couldn't get the dang things to style how I wanted  
* Plus I'm not sure I liked it with photos... even though it's a bear!  

ul.blog-posts > li > a::after {  
    content: url("https://i.imgur.com/puT0UkBs.jpg");  
    content: url("https://i.imgur.com/laDt4Yf.png");  
    height:10px;  
    max-height:10px;  
    width:10px;  
    position:relative;  
    display:inline-block;  
    right: 10px;  
}  

ul.blog-posts > li > a {  
    position:relative;  
    margin-left: 10px;  
}  

ul.blog-posts > li {  
    display:inline-block;  
}  
/**/  

/* table of contents */  

.toc {  
	display: inline-block;  
	padding: 0px 24px 8px 24px;  
	margin: 0;  
	border: 2px dotted #9674cc; /* dark mode: #8439d */  
	border-radius: 4px;  
    line-height:1.5em;  
}  
.toc a {  
	text-decoration: none;  
    font-size: 1em;  
}  
.toc ol {  
  padding-left: 30px;  
}  
.toc ol > li > ul {  
   padding-left: 16px;  
}  

.toc ol > li > ul ul {  
   padding-left:32px;  
}  

#rb-jump-to-toc {  
    border-radius: 50%;  
    position:fixed;  
    bottom:30px;  
    right:30px;  
    width: 1em;  
    height: 1em;  
}  
#rb-jump-to-toc a, #rb-jump-to-toc a:hover {  
    background: none;  
    display: block;  
    padding: 3px;  
    width: 1em;  
    height: 1em;  
    border: solid black;  
    border-width: 0 3px 3px 0;  
    border-radius: 0px;  
    color: black;  
    transform: rotate(-135deg);  
  -webkit-transform: rotate(-135deg);  
    z-index:100;  
}  
#rb-jump-to-toc a:hover {  
    border-color: grey;  
}  

div.reference_links {  
    border: 1px solid black;  
    padding: 8px;  
}  

div.reference_links ul {  
    
}  

div.reference_links ul li {  
    display: inline-block;  
    margin: 4px;  
}  





/* blog post list */  
i time {  
    font-style: normal;  
    opacity: 0.7;  
}  

ul.blog-posts:not(:has(> li > p)) {  
    list-style-type: none;  
    padding: unset;  
}  

ul.blog-posts:not(:has(> li > p)) li {  
    display: flex;  
    margin-bottom: 10px;  
}  
ul.blog-posts:not(:has(> li > p)) li > a {  
     min-width: 5em;  
}  



ul.blog-posts:not(:has(> li > p)) li span {  
    flex: 0 0 130px;  
}  

ul.blog-posts:not(:has(> li > p)) li a:hover {  
   /* color: white !important; */  
}  

ul.blog-posts:not(:has(> li > p)) li a:visited {  
    color: var(--visited-color);  
}  

/* Make lists into grids */  
@media (min-width: 600px) {  
  ul.blog-posts:has(> li > p) {  
      display: grid;  
      grid-template-columns: auto 1fr 2fr;  
      grid-template-rows: auto;  
      grid-gap: 8px;  
  }  

  ul.blog-posts:has(> li > p) > li {  
      display:grid;  
      grid-template-columns: subgrid;  
      grid-column: 1 / span 3;  
      align-items: center;  
  }  

  ul.blog-posts:has(> li > p) > li > span {  
      grid-column: 1;  
  }  
  ul.blog-posts:has(> li > p) > li > a {  
      grid-column: 2;  
      margin: 0 4px;  
  }  
  ul.blog-posts:has(> li > p) > li > p {  
      grid-column: 3;  
  }  
}  

@media (max-width: 600px) {  
  body > header > nav a {  
       line-height: 2.0;  
  }  
  body > main {  
    /*box-shadow: inset -5px -10px 5px #9015907d; */  
  }  
  ul.blog-posts:has(> li > p) {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
  }  

 ul.blog-posts:has(> li > p) > li {  
      display:flex;  
      flex-direction: column;  
      padding: 16px 8px;  
      margin: 8px 0;  
  }  
  ul.blog-posts:has(> li > p) > li:nth-child(2n - 1) {  
      background: #eaeaea;  
      border-radius: 8px;  
      border: 1px dotted black;  
  }  
   ul.blog-posts:has(> li > p) > li:nth-child(2n) {  
      border: 1px solid black;  
      border-radius: 8px;  
  }  

  ul.blog-posts:has(> li > p) > li > span {  
      order: 2;  
      text-align: center;  
  }  
  ul.blog-posts:has(> li > p) > li > a {  
      order: 1;  
      text-align: center;  
  }  
  ul.blog-posts:has(> li > p) > li > p {  
      order: 3;  
      text-align: center;  
      padding: 0;  
      margin: 0;  
  }  
}