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

:root {  
    /* a color i saved idk why: #847996 */  
    cursor: url('https://reedybear.com/bearblog/cursor-wh.png'), auto;  
  
    /* Standard: Things that are non-creative, such as shades of black/white/grey.*/  
    --font-main: 'Roboto Mono', monospace;  
    --font-secondary: 'Roboto Mono', monospace;  
    --font-scale: .9em;  
    --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;   
}  

/* my main styles */  
:root {  
      /* header */  
    --header_background: #620062;  
    --header_background_mobile: #620062;  
    --header_border_radius:  0px 0px 16px 16px;  
    --header_link_color: white;  
    --header_heading_color: #FCEF30;  
    --header_shadow_color:  #9d009d;  
    --header_link_underline_color: #FCEF30;  
    --header_link_hover_background: none;  
    --na_header_h1_background: none;  
  
    /* link hover */  
    --link_hover_underline_color: orange;  
    --link_hover_color: white;  
    --link_hover_border_color: orange;  
    --link_hover_border_top_color: purple;  
    
    /* other */  
    --underline_color: #a000a0;  
    --body_box_shadow: inset 0px 0px 3px #d900d93b ,0px 10px 10px #8000808a;  
    --toc_border_color: #9674cc; /* dark mode: #8439d */  
    --background_body: #fff;  
    --background_main: inherit;  
    --background_main_mobile: inherit;  
    --upvote_count_bg: #8b398b;  
    --main_padding: 20px;  
  
}  

/* Christmas 2025 styles */  
:root {  
      /* header */  
    --header_background: #06672F;  
      --header_background:  
      url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-top-lgbear-1.png)  
          left/contain repeat-x, linear-gradient(352deg,rgba(255, 0, 5, 1) 0%, rgba(6, 103, 47, 1) 29%, rgba(6, 103, 47, 1) 72%, rgba(255, 0, 5, 1) 100%);  

      --header_background_mobile:  
      url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-top-lgbear.png)  
          left/contain repeat-x,  
          linear-gradient(344deg,rgba(255, 0, 5, 1) 0%, rgba(6, 103, 47, 1) 29%, rgba(6, 103, 47, 1) 72%, rgba(255, 0, 5, 1) 100%);  
    --header_border_radius: 0;  
    --header_link_color: white;  
    --header_heading_color: white;  
    --header_shadow_color: #146B3A;  
    --header_link_underline_color: #FF0005;  
    --header_link_hover_background: #FF0005;  
    --na_header_h1_background: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/2025-christmas-lights-1.png) center/contain repeat-x;  
  
    /* link hover */  
    --link_hover_underline_color: #BB2528;  
    --link_hover_color: white;  
    --link_hover_border_color: #BB2528;  
    --link_hover_border_top_color: #06672F;  
    
    /* other */  
    --underline_color: #06672F;  
    --body_box_shadow: inset 0px 0px 3px #06672F3b ,0px 10px 10px #06672F8a;  
    --body_box_shadow: inset 0px 0px 7px #FF000576 ,0px 10px 10px #06672F8a;  
    --toc_border_color: #9674cc; /* dark mode: #8439d */   
    --background_main: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/xmaslightssides-5.png) top/contain repeat-y, white;  
    --background_main_mobile: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/xmaslightssides-6.png) top/contain repeat-y, white;  
    --background_body: url(https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-est1307-250177.webp) center/cover no-repeat fixed;  
    --upvote_count_bg: #06672F;  
    --main_padding: 30px;  
    
}  

main > h1:first-child {  
	background: #06672f;  
	color: white;  
	text-shadow: red;  
	padding: 0px 16px;  
	border-radius: 16px;  
	box-shadow: var(--body_box_shadow);  
}  

/** xmas lights at top of page DONT THINK I NEED THESE  
html::before {  
  background:var(--header_h1_background);  
  display:block;  
  content:"‌";  
  width: 100%;  
  position: absolute;  
  height:35px;  
}  
*/  


body > header {  
	background: var(--header_background);  
	padding: 4px 12px;  
	border-radius: var(--header_border_radius);  
	color: white;  
	--link-color: var(--header_link_color);  
	--heading-color: var(--header_heading_color);  
	--underline_color: var(--header_link_underline_color);  
	box-shadow: 0px 0px 15px var(--header_shadow_color);  
	margin: 0;  
    border: none;  
}  
body > header > nav a {  
    border-left: 2px solid transparent;  
    border-right: 2px solid transparent;  
}  
header h1 {  
  border-bottom: none;  
  text-align: left;  
}  



body > header > nav a:hover {  
  --underline_color: var(--link_hover_underline_color);  
  --link-color: var(--link_hover_color);  
  background: var(--header_link_hover_background);  
  border: 2px solid var(--link_hover_underline_color);  
  padding-top:4px;  
  padding-bottom: 2px;  
  border-radius: 75% 9px / 30% 8px;  
}  

body > main {  
  box-shadow: var(--body_box_shadow);  
  padding: var(--main_padding);  
  background: var(--background_main);  
}  

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: 720px;  
    text-align: left;  
    background: var(--background_body);  
    word-wrap: break-word;  
    overflow-wrap: break-word;  
    line-height: 1.5;  
    color: var(--text-color);  
    background: var(--background_body);  
}  

h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
    font-family: var(--font-main);  
    color: var(--heading-color);  
    border-bottom: 2px solid var(--underline_color);  
    text-align: center;  
}  

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 {  
    text-decoration: none;  
  	border-radius:8px;  
    border-color: var(--link_hover_border_color);  
    border-top: 1px solid var(--link_hover_border_top_color);  
}  


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: 0px;  
    /*border-top: 3px dotted #232333; */  
    padding: 25px 0;  
    text-align: center;  
    background: #ffffffa0;  
}  

footer a {  
	background: #0006;  
	color: white;  
	border-radius: 8px;  
}  
footer a:hover {  
	background: #000c;  
}  

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: var(--upvote_count_bg);  
    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 var(--toc_border_color);  
	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 > header {  
      background: var(--header_background_mobile);  
  }  
  body > main {  
    /*box-shadow: inset -5px -10px 5px #9015907d; */  
        background: var(--background_main_mobile);  
  }  
  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;  
  }  
}  


/**** BEGIN CRAZY STYLES ****/  

main:has(a:hover) a:not(:hover){  
    animation: link_disappear 50s infinite,  
      shimmy_left 5s infinite;  
    position: relative;  
}  

main:has(a:hover) a:not(:hover)::before {  
    content: "FREE THE COWS" !important;  
    display:inline-block;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    animation: link_appear 50s infinite;  
    color: transparent;  
    text-wrap: nowrap;  
}  
main:has(a:hover) li:nth-child(2n) a:not(:hover)::before,  
main:has(a:hover) p:nth-child(2n) a:not(:hover)::before  
{  
    content: "END ANIMAL CRUELTY" !important;  
}  

main:has(a:hover) li:nth-child(2n-1) a:not(:hover) {  
     animation-delay: 0.1s;  
}  
main:has(a:hover) li:nth-child(2n) a:not(:hover) {  
     animation-delay: 0.2s;  
}  
main:has(a:hover) li:nth-child(3n) a:not(:hover) {  
     animation-delay: 0.3s;  
}  
main:has(a:hover) li:nth-child(4n) a:not(:hover) {  
     animation-delay: 0.4s;  
}  
main:has(a:hover) li:nth-child(5n) a:not(:hover) {  
     animation-delay: 0.5s;  
}  


main a {  
    display: inline-block;  
}  

main a:hover {  
    animation: link_weird 5s infinite;  
    animation-timing-function: linear;  
    /*overflow-y: hidden;*/  
    /*overflow-x: hidden;*/  
    /*text-wrap: nowrap;*/  
    /*text-overflow: clip;*/  
    /*display:inline-block;*/  
    position:relative;  
    display:inline-block;  
}  

main a:hover::before {  
    animation: link_before 5s infinite;  
    animation-timing-function: linear;  
    content: " ";  
    display:inline-block;  
    position: absolute;  
    top:0;  
    left: 0;  
    height: 100%;  
    border-radius: inherit;  

    background: rgba(0,0,0,0.3);  
}  

@keyframes link_before {  

    0% {  
        width: 0;  
    }  

    40% {  
        width: 100%;  
        background: rgba(0,0,0,0.3);  
    }  
    40.001% {  
        background: transparent;  
    }  
    100% {  
        background: transparent;  
    }  

}  

@keyframes link_weird {  

    0% {  
        /*color:inherit;*/  
        transform:scale(1,1);  
        transform: rotate(0deg);  
    }  

    40% {  
        transform:scale(1,1);  
        transform: rotate(0deg);  
    }  

    100% {  
        transform:scale(2,2);  
        transform: rotate(360deg);  
        /*color: transparent;*/  
    }  

}  

@keyframes link_disappear {  

    0% {  
        color:inherit;  
    }  

    5% {  
        color: transparent;  
    }  

    100% {  
        color: transparent;  
    }  

}  

@keyframes link_appear {  

    0% {  
        color:transparent;  
    }  

    3% {  
        color: transparent;  
    }  
    10% {  
        color: var(--link-color);  
    }  

    100% {  
        color: var(--link-color);  
  }  

}  

@keyframes shimmy_left {  

    0% {  
        transform: translateX(0);  
    }  

    25% {  
        transform: translateX(-20px);  
    }  

    75% {  
        transform: translateX(20px);  
    }  

    100% {  
        transform: translateX(0);  
    }  

}