@media (prefers-color-scheme: light) {
  html {
    --font-color: #3c3836;
    --bg-color: #fbf1c1;

	--page-bg-color: #ebdbb2;


    --card-color: #ebdbb2;
    --card-border-color: #d5c4a1;

    --link-color: #427b58;
    --link-state-color: #689d6a;
    --link-state-border-color: #689d6a;

    --thead-bg-color: lightgrey;
    --table-border-color: lightgrey;

    --nav-bg-color: #ebdbb2;
    --nav-link-color: #696969;

    --pre-color: rgb(31, 35, 40);
    --pre-bg-color: #eff1f2;
    --pre-border-color: #e1e5e9;
    --kbd-bg-color: #f7f7f7;

    --bq-color: #b8bb26;
    --hr-color: #333;

    --pagination-bg-color: #ebdbb2;
    --pagination-link-color: #696969;
    --pagination-border-color: #eeeeee;
    --pagination-border-radius: 5px;

    --post-info-color: grey;

    --switcher-color: #3c3836;

    --svg-color: #333;
    --svg-state-color: #a31d1d;
    
	  .banner{
	  	max-width: 100%;
	  	height: auto;
	  }

	.filtered-font-color{
		filter:
		invert(20%)
		sepia(5%)
		saturate(639%)
		hue-rotate(335deg)
		brightness(95%)
		contrast(92%);
	}

	.pattern{
     	filter:
       	invert(94%)
       	sepia(13%)
       	saturate(916%)
       	hue-rotate(332deg)
       	brightness(102%)
       	contrast(84%);
     }
    
    @media print{
    
    	.filtered-font-color {
    		filter:	none;
    	}
    
    }
    
  }
}
html[data-theme="light"] {
	--font-color: #3c3836;
	--bg-color: #fbf1c1;

	--page-bg-color: #ebdbb2;

	--card-color: #ebdbb2;
	--card-border-color: #d5c4a1;

	--link-color: #427b58;
	--link-state-color: #689d6a;
	--link-state-border-color: #689d6a;

	--thead-bg-color: lightgrey;
	--table-border-color: lightgrey;

	--nav-bg-color: #ebdbb2;
	--nav-link-color: #696969;

	--pre-color: rgb(31, 35, 40);
	--pre-bg-color: #eff1f2;
	--pre-border-color: #e1e5e9;
	--kbd-bg-color: #f7f7f7;

	--bq-color: #b8bb26;
    --hr-color: #333;

	--pagination-bg-color: #ebdbb2;
	--pagination-link-color: #696969;
	--pagination-border-color: #eeeeee;
	--pagination-border-radius: 5px;

	--post-info-color: grey;

	--switcher-color: #3c3836;

	--svg-color: #333;
	--svg-state-color: #a31d1d;

  .banner{
  	max-width: 100%;
  	height: auto;
  }

	.filtered-font-color{
		filter:
		invert(20%)
		sepia(5%)
		saturate(639%)
		hue-rotate(335deg)
		brightness(95%)
		contrast(92%);
	}

	.pattern{
     	filter:
       	invert(94%)
       	sepia(13%)
       	saturate(916%)
       	hue-rotate(332deg)
       	brightness(102%)
       	contrast(84%);
     }
	
  @media print{
  
  	.filtered-font-color {
  		filter:	none;
  	}
  
  }
  
}