*{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; scroll-behavior:smooth!important; -webkit-scroll-behavior:smooth!important; -moz-scroll-behavior:smooth!important;}

body{margin: 0px 0px!important; padding: 0px 0px!important; background-color: var(--primary-bg);}
img{border:none;max-width:100%; height:auto;}
a{text-decoration: none;padding: 0px 0px; margin: 0px 0px;}
ul{padding: 0px 0px; margin: 0px 0px; list-style-position:inside; list-style-type:none;text-decoration: none;}
li{text-decoration: none;}
b{text-decoration: none;}
h1{font-family:acme; font-size: 40px; line-height:0.5;}
h2{font-family:open sans; font-size: 30px; font-weight:thin; line-height:1;}
h3{font-family:gloria hallelujah; font-size: 25px;}
iframe{border: 0px!important;}


::placeholder {
color: currentColor;
opacity: 1;
}

input, input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.tap-unhighlight, div, .boxes a{
    -webkit-tap-highlight-color: transparent!important;
}

:root
{
--img-newspaper: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYj0xkZL1gdOZ28mAVEAdBlkH6TtDzvuqcqH4T9KS9d7D9UH4ZK-2_bf3ytY7GuL8KQWiq-ld6F8DLQlkIqs66Q0ZWH8yQnZsH8b-k9bPBF7OlBoynDBoOESnpir58YBF38dtaQNCuFD2azGVZawLWjysrF4BirWmHukzeK4tIdy6fsoOMDsmRzbQU_Kmz/s0-rw/bgimg--.jpeg');

--img-plain-road: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFR5RbRjtPs19MisoIWhLXxr69gbzJ0pM8OQh7vxQg5xA-0JZdhZXu2Pxj84OxEMxSFJsmAfYcWZ-nxc2jZCIWQslFscEXs5nBiPKK9DX3VxN8Pcp69mneZ75PnGSMGsuJmufyub1IEYj_0NJO5mpr8Wjf9nPMOyAteS9atQziq-yFHi-N-Y7egxcYOvM/s0-rw/e049dbe2-7ac2-431d-9fc5-905c776edc21-14.png');

--like-btn-animation:'';
--like-card-zindex: -5;
--like-card-scale:1;
--like-card-left: calc(50%);
--like-msg-appear: 0;
--like-msg-scale:1.1;

--i-am-menu-animation: ;
 --pinkish-shade:  #ffabc0;
}

@media(min-width: 650px){
:root{
--like-card-scale: 1.6; 
--like-card-left: calc(52%);
--like-msg-scale: 1.5; 
}}

/*IDs*/
#outer-wrapper{background-color: var(--primary-bg); color: var(--primary-text); max-width:none; width: 100%; min-height: 100vh; overflow:hidden; position:relative; box-sizing:border-box; padding: 0px 0px 0px 0px!important; margin: 0px 0px 0px 0px!important;}
#main-wrapper{background-color: var(--primary-bg); color: var(--primary-text); overflow:visible; box-sizing:border-box; word-wrap:break-word; padding: 0px!important; margin: 0px!important; position:relative;}
#sidebar-wrapper{display: none!important;}
#footer-wrapper{display:none; width: 100%; color: var(--primary-text); font-size: 20px; padding-top: 25px; font-family: open sans; text-align: center; height: 70px; overflow: hidden; background-color: var(--primary-bg); place-items: center;}

#blog-pager-newer-link {float:left;}
#blog-pager-older-link {float:right;}
#disqus_thread iframe{background-color: var(--primary-bg);}
#signaling-copy{padding: 5px 7px; background: var(--gray-bg-element); font-family:acme!important; text-decoration: none!important; transform:translate(0%,10%);}

/**/

/*CLASSES*/
.blog-feeds{display:none!important;}

.container{position:relative; box-sizing:border-box;}
.nav-prev-btn, .nav-next-btn , .nav-random-btn {position:relative; top: 10px;}
.go-left-animation {animation: arrow_go_left 1.2s 1; transition: linear 1.2s 1;}
.go-right-animation {animation: arrow_go_right 1.2s 1; transition: linear 1.2s 1;}

.comicimg{width: 87vw; max-width: 580px; height:auto; margin-top: 0%; filter: saturate(0.75);}

.animate-carousel{animation: emoji_pop 3s  infinite;}
.gray-bg{background-color: var(--gray-bg);}
.gray-bg-element{background-color: var(--gray-bg-element);}
.back{background-color: var(--gray-bg-element);} 
.bar-sticks{background-color: var(--gray-bg-element); opacity: 0.9; }
.plain-link{color: var(--primary-text); cursor: pointer;}
.dull-link{color: var(--dull-text);}
.none{display:none!important;}
.flex-centered{display: flex; justify-content: center; align-items: center; gap: 0px;}

.soft-touch-btn{animation: soft_touch 1.2s 1;}
.bubbly-touch-btn {animation: bubbly_touch 1.1s 1;}
.bubbly-touch-weak-btn {animation: bubbly_touch_weak 1.1s 1;}
.fade-in{ animation: fade_in_text 1s 1; animation-fill-mode: forwards; }

.soft-touch:hover{animation: soft_touch 1.2s 1;}
.bubbly-touch:hover {animation: bubbly_touch 1.1s 1;}
.bubbly-touch-weak:hover {animation: bubbly_touch_weak 1.1s 1;}

.max-height-zero{ max-height: 0px; overflow: hidden; }
.batman-element { position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden; }

.menu-social-icons a{
fill:white!important;
aspect-ratio: 1/1;
}
.mobile-menu {
display: flex;
width: 100vw;
height: 100%;
clip-path: circle(0% at 50% 90%);
will-change: clip-path;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 6000;
justify-content:center;
place-items:center;
}
.mobile-menu ul{
position:relative;
width: 95%;
height: auto;
display: flex;
flex-direction: column;
justify-content:center;
place-items:center;
gap: 0vw;
transform: translateY(-0%);
}
.mobile-menu ul li {
width:100%;
height: auto;
max-width: 650px;
list-style: none;

font-family: Gloria Hallelujah;
font-size: min(10.1vw,56px); 
}
.mobile-menu li a{width: 100%; color: white!important; display: flex; justify-content: center; place-items:center; gap: min(6vw, 15px); padding-bottom: 8vw;}
.mobile-menu li a:hover {color: yellow!important;}

.tag-tick-tick{
animation: hashtag_tick_tick steps(2) 1s infinite;
transition: 1s linear infinite;
}
.home-tag:hover{
color:yellow!important;
}


.spill ul{
position:relative;
display: flex;
flex-direction: column;
justify-content:center;
place-items:center;
gap: min(4vw, 40px);
}
.spill ul li {
width:100%;
height: auto;
max-width: 650px;
list-style: none;
overflow: hidden;
font-family: Gloria Hallelujah;
font-size: clamp(45px, 3.8vw, 77px)!important;
}
.spill li a{display: flex; justify-content: center; place-items:center; gap: min(2vw, 30px); width: 100%; color: white!important;}
.spill li a:hover {color: yellow!important;}


.desktop-menu{display:none; position: fixed; top: 0px; width: 100vw; height: 7vw; max-height: 80px; border-radius: 0px; background-color: #121212; z-index: 1000; justify-content:center; place-items:center; overflow:hidden; }
.desktop-menu a{color: white;}
.desktop-menu ul{display:flex; flex-direction: row; width: 100%; height: 100%; gap: 5%; justify-content:center; place-items:center; }
.desktop-menu li{font-size:2vw; opacity:1; font-weight: 600; font-family: gloria hallelujah;position:relative;}
.desktop-menu a:hover{color:white;}
.desktop-menu.active { border-bottom: 5px solid white; }

/**/


/*Media Screen Size*/
@media(max-width:470px){ .mobile-menu ul li { aspect-ratio: 30/7.8; } }
@media(max-width:560px) { .emoji-settings{width: 19vw; height:auto; max-width: 240px; position: relative; z-index: 10; vertical-align: middle; display: inline-block; transform: translateY(-7%); }}
@media(max-width:820px){ .destop-menu{display:none!important;}}

@media(max-width:650px){
  #fixed-background {
  display:none;
  background-repeat: repeat-y;
  background-image: var(--img-newspaper);
  background-position: 0px -210px;
  background-size: cover;
  margin-bottom: -10px;
  position:relative;
  box-shadow: 0 0 70px 70px #fff;
  width: 100%;
  height: 116vh;
  scroll-behavior:smooth!important;
  margin-top:0px!important;
  clip-path: polygon(0% 0%, 100% 0, 100% 89%, 50% 100%, 0 89%);
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 89%, 50% 97%, 0 89%); 
  -moz-clip-path: polygon(0% 0%, 100% 0, 100% 89%, 50% 97%, 0 89%);
  filter: saturate(0) contrast(0.9) opacity(0.95) brightness(1.15);
  -webkit-filter: saturate(0) contrast(0.9) opacity(0.9) brightness(1.11);
-webkit-fiter: saturate(0) contrast(0.99) opacity(0.9) brightness(1.05);
  -moz-filter: saturate(0) contrast(0.9) opacity(0.9) brightness(1.15);
  }

  .common-gap {margin-top:6%;}
  .carousel{position:absolute; top:45vh; left: 50vw; transform:translate(-50%,-50%); transition: top 2s ease; z-index: 500;}
  .emoji-carousel{width: 62vw;}
  .for-laptop{max-height:0px!important; overflow:hidden!important; margin: 0px!important;}
  .for-laptop.strict{ display: none!important;}
}

@media(min-width:650px){
  #fixed-background {
  display:none;
  background-repeat: repeat;
  background-image: var(--img-newspaper);
  background-position: 10% -140%;
  background-size: 70%;
  margin-bottom: 20px;
  height:130vh;
  position:relative;
  width: 100%;
  scroll-behavior:smooth!important;
  margin-top:0%!important;
  filter: saturate(0) contrast(0.9) opacity(0.99) brightness(1.15);
  -webkit-filter: saturate(0) contrast(0.99) opacity(0.9) brightness(1.05);
  -moz-filter: saturate(0) contrast(0.9) opacity(0.99) brightness(1.15);
  clip-path: polygon(0% 0%, 100% 0, 100% 88%, 50% 100%, 0 88%);
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 88%, 50% 100%, 0 88%);
  -moz-clip-path: polygon(0% 0%, 100% 0, 100% 88%, 50% 100%, 0 88%);
  }
  #open-mobile-menu{display:none!important;}
  #comic-title{font-size: clamp(45px,3.1vw,65px)!important;} 

  .common-gap {margin-top: 5%;}
  .carousel{position:absolute; top:45vh!important; left: 50vw!important; transform:translate(-50%,-50%); z-index: 500;}
  .emoji-carousel{width:50vw;}
  .for-mobile{display: none!important;} 
  .open-comments-section p{font-size: clamp(30px, 2.1vw, 65px)!important;} 
  .social-icons{margin:-1% 0 2% 0!important; aspect-ratio:23/3!important;} 
}

@media(min-width:500px){
 .emoji-settings{min-width: 80px; width: 14vw; height:auto; max-width: 100px; position: relative;z-index: 10; vertical-align: middle; display: inline-block; transform: translateY(-7%); }
}
@media(min-width:820px){
  .d-bar-graph {display:flex!important;} 
  .d-tv-and-controls{margin-left:2.4%;}
  .desktop-menu {display:block;}
  .mobile-header, .mobile-menu, .search-results, .search-background-blurred {display:none!important;}
  .comicimg{margin-top:45px!important; } 
}
@media(min-width:1000px){
  #fixed-background{background-size: 43%!important; clip-path: polygon(0% 0%, 100% 0, 100% 85%, 50% 100%, 0 85%);}
  .emoji-carousel{width: 27vw!important;}
  #d-kiddo-peek { width: 23vw!important; }
  .d-comic-square { width: 20vw!important; }
  .d-tv-frame{width:41%;}
}


/* COLOR PREFERENCE */
@media(prefers-color-scheme: light)
{
  :root {--mode-bg: #fff; --primary-bg: #fff; --primary-text: #000; --gray-bg: #f5f5f5; --gray-bg-element: #ddd; --dull-text: #222; --comic-square-shadow: #ccc;}

  #open-mobile-menu{background: white; box-shadow: 0px 0px 50px 35px #f5f5f5; border: 6px solid #fff;}
  #hcb_form_content{background-color: #ddd;}

  .for-dark {display:none!important;}
  .comicimg.back{background: #eee;}
  .social-icons{fill: #121212!important}
  .comment,.hcb-wrapper{background-color:#eee;}
}

@media(prefers-color-scheme: dark)
{
  :root {--mode-bg: #000; --primary-bg: #242424; --primary-text: #fff; --gray-bg: #191919; --gray-bg-element: #353535; --dull-text: #eee; --comic-square-shadow: #000; --pinkish-shade: #ffabc0; }

  #open-mobile-menu {background: #000; box-shadow: 0px 0px 55px 40px #000; border: 6px solid #555; } 
  #hcb_form_content {background-color: #333;}

  .frog-like-btn::before {box-shadow: inset 0px 0px 2px 4px rgba(0,0,0,1)!important;}
  .social-icons svg{fill: white!important}
  .hcb-wrapper, .comment{background-color:#171717!important;}
  @media(max-width:650px){
	#fixed-background{-webkit-filter: saturate(0) contrast(0.9) brightness(0.4); -moz-filter: saturate(0) contrast(0.9) brightness(0.4); filter: saturate(0) contrast(0.9) brightness(0.4);
  }}
  @media(min-width:650px){
    #fixed-background{-webkit-filter: saturate(0) contrast(0.9) brightness(0.4); -moz-filter: saturate(0) contrast(0.9) brightness(0.4); filter: saturate(0) contrast(0.9) brightness(0.4);}
    .desktop-menu{ overflow: visible!important; background: rgba(0,0,0,0.9)!important; backdrop-filter: blur(20px);}
  }
}


/* Keyframes */
@keyframes arrow_go_right {
10%{transform: translateX(40%);} 
40%{transform: translateX(0px);}
}
@keyframes arrow_go_left {
10%{transform: rotate(180deg) translateX(40%);} 
40%{transform: rotate(180deg) translateX(0px);}
}

@keyframes hashtag_tick_tick {
from{transform: rotateZ(9deg);}
to{transform: rotateZ(-20deg);}
}
@keyframes shake_on_hover {
0% { transform: translate(0px, 0px) rotate(0deg);}
10% { transform: translate(-1px, -6px) rotate(-1deg);}
15% { transform: translate(-3px, 0px) rotate(1deg);}
30% { transform: translate(4px, 5px) rotate(0deg);}
40% { transform: translate(1px, -1px) rotate(1deg);}
45% { transform: translate(-1px, 4px) rotate(-3deg);}
55% { transform: translate(-4px, 1px) rotate(0deg);}
65% { transform: translate(2px, 1px) rotate(-1deg);}
70% { transform: translate(-2px, -1px) rotate(1deg);}
80% { transform: translate(-1px, -1px) rotate(1deg);}
95% { transform: translate(0px, 0px) rotate(0deg);}
}
@keyframes soft_touch {
13% { transform: scale(0.9); }
40% { transform: scale(1.04); }
70% { transform: scale(1); }
}
@keyframes bubbly_touch {
16%{ transform: scale(1.18); }
40%{ transform: scale(0.9); }
70%{ transform: scale(1.07); }
}
@keyframes bubbly_touch_weak {
18%{ transform: scale(1.16); }
45%{ transform: scale(0.92); }
80%{ transform: scale(1.03); }
}
@keyframes twinkle{ 
50%{transform: scale(1.1);}
}

@keyframes emoji_pop_fast {
15%{transform: scale(0.8) rotateZ(10deg); opacity: 0.83;}
50%{transform: scale(1) rotateZ(0deg); opacity: 1;} 
95%{transform: scale(1) rotateZ(0deg); opacity: 1;}
100%{transform: scale(1) rotateZ(0deg); opacity: 1;}
}
@keyframes emoji_pop {
10%{transform: scale(0.8) rotateZ(10deg); opacity: 0.83;}
35%{transform: scale(1) rotateZ(0deg); opacity: 1;} 
65%{transform: scale(1) rotateZ(0deg); opacity: 1;}
100%{transform: scale(1) rotateZ(0deg); opacity: 1;}
}
@keyframes like_plus_one {
15%{transform: rotate(10deg) translate(-48%,-10px) scale(var(--like-card-scale)); opacity:1;}
90%{transform: rotate(5deg) translate(-48%,-70px) scale(var(--like-card-scale)); opacity:1;}
100%{transform: rotate(-2deg) translate(-49%,-102px) scale(var(--like-card-scale)); opacity:0;}
}
@keyframes appear_disappear {
0%{transform: translate(-50%,0) rotate(10deg); opacity:0; width: 165%;}
10%{transform: rotate(10deg) translate(-50%,-0%); opacity:1; width: 165%;}
40%{transform: rotate(15deg) translate(-50%,-10%); opacity:1; width: 165%;}
95%{transform: rotate(10deg) translate(-50%, -0%); opacity:1; width: 165%;}
100%{transform: rotate(10deg) translate(-50%,0%); opacity:0; width: 165%;}
}

@keyframes fade_in_text{
from{ opacity: 0;}
to{ opacity: 1;}
}
  
/* Pseudo Elements */
.frog-like-btn::before
{
content: '+1 🩷 Like';
font-size: 30px;
line-height: 1.3;
font-family: indie flower;
overflow: hidden;
padding: 5px 10px;
color: white;
width:78px;
height: auto; 
aspect-ratio: 15/18.5!important;
background: red;
display:flex;
justify-content:center;
align-items: center;
position: absolute;
left: var(--like-card-left);
z-index: var(--like-card-zIndex);
transform:rotate(12deg) translate(-50%,20px) scale(var(--like-card-scale));
opacity: 0;
border-radius: 4px;
box-shadow: inset 0px 0px 2px 2px rgba(250,250,250,1);
transition: linear 2s 1;
animation: var(--like-btn-animation);
animation-fill-mode: forwards;
}
.frog-like-btn::after
{
content: 'U stole my heart!';
font-size: 19px;
font-family: open sans;
position:absolute;
top:70%;
left: calc(50%);
width: 100%;
max-width: 120px;
height: auto;
overflow:hidden;
aspect-ratio: 2/0.85;
color:white;
padding: 6px 0px 6px 0px;
background: rgba(10,10,10,1);
opacity: var(--like-msg-appear);
z-index: var(--like-card-zIndex);
transform: translate(-47%,-50%) scale(var(--like-msg-scale));
transition: opacity linear 1s;
}