/* Color variables */


    
    :root[color-mode="light"] {
        --background: radial-gradient(92.09% 147.28% at 114.25% -78.64%, #FFABC9 0%, #F7F8FB 100%), #F7F8FB;
        --text-color: #101935;
        --h1-color: #101935;
        --h3-color: #586163;
        --link-color: #101935;
        --tile-color: #F7F8FB;
		--tile-border-color: #F2F5FF;
		--tile-color-hover: #ffffff;
        --tile-text-color: #1f2132;
        --badge-color: #FFD8E6;
        --badge-text-color: #1A222D;
        --pagination-color: #ffffff;
		--signature-color: #B6AAC0;
    }
    
    :root[color-mode="dark"] {
        --background: radial-gradient(42.08% 86.35% at 77.61% -26.53%, #464551 0%, #1B232E 100%), var(--Background-sb-background-main, #1B232E);
		--text-color: #ebeeff;
        --h1-color: #ebeeff;
        --h3-color: #aeb1c1;
        --link-color: #ebeeff;
        --tile-color: #222B38;
		--tile-border-color: #2D323D;
		--tile-color-hover: #2C3746;
        --tile-text-color: #ebeeff;
        --badge-color: #FFD8E6;
        --badge-text-color: #1A222D;
        --pagination-color: #222B38;
		--signature-color: #FFD8E6;
    }
	
	@font-face {
	  font-family: InterVariable;
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url("/fonts/InterVariable.woff2") format("woff2");
	}
	@font-face {
	  font-family: InterVariable;
	  font-style: italic;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
	}

	:root {
	  --font-fallback: Helvetica, Arial, sans-serif;
	}
    
    body {
        background: var(--background);
        color: var(--text-color);
	    font-family: "InterVariable", var(--font-fallback);
	    font-size: 16px;
        line-height: 24px;
		
    }
    /* Typography */
	
	
    
	h1>svg>path{
	  fill: var(--h1-color);
	}
    
    h2 {
        margin: 8px 0;
        line-height: 32px;
		font-weight: 600;
    }
    
    h3 {
        font-size: 16px;
        font-weight: 400;
        margin: 8px 0;
        color: var(--h3-color);
    }
    
    p {
        margin: 8px 0;
		font-weight: 400;
    }
    
    a {
        color: var(--link-color);
        text-decoration: none;
		font-weight: 400;
    }
    /* Header */
    
    header {
        display: block;
        max-width: 520px;
        position: relative;
        margin: 0 auto;
        padding: 24px 16px 52px 16px;
        min-height: 80px;
    }
    
    header h1 {
        float: left;
    }
    
    header h3 {
        float: left;
        margin: 0 ;
        color: var(--text-color);
    }
    /* Main content */
    
    main {
        display: block;
        max-width: 520px;
        position: relative;
        margin: 0 auto;
        padding: 16px;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    main a {
        border-radius: 24px;
    }
    
    .tile a {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .tile {
        padding: 12px 24px 24px 24px;
        color: var(--tile-text-color);
        background-color: var(--tile-color);
        border: 1px solid;
		border-color: var(--tile-border-color);
        border-radius: 24px;
        margin: 24px 0;
        display: block;
        box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08), 0 4px 2px rgba(0, 0, 0, 0.08), 0 8px 4px rgba(0, 0, 0, 0.08), 0 16px 8px rgba(0, 0, 0, 0.08), 0 32px 16px rgba(0, 0, 0, 0.08);
		transition: background-color 0.4s ease;
    }
    
    .tile:hover {
        background-color: var(--tile-color-hover);
	    scale: 101%;
		transition: scale 0.40s ease;
    }
    
    .badge {
		font-size: 12px;
		font-weight: 500;
		padding: 0px 8px;
		display: inline-block;
		color: var(--badge-text-color);
		background-color: var(--badge-color);
		border-radius: 4px;
		margin-top: 8px;
		min-width: 16px;
		text-align: center;
    }
    /* Pagination */
    
    nav a {
        padding: 12px 16px 10px;
        border-radius: 12px;
        text-align: center;
        color: var(--text-color);
		transition: background-color 0.4s ease;
    }
    
    nav a:hover {
        background-color: var(--pagination-color);
    }
    
    nav li {
        float: left;
        padding: 0 4px;
        text-decoration: none;
    }
    
    nav li:first-of-type {
        padding: 0 4px 0 0
    }
    
    nav {
        max-width: 520px;
        position: relative;
        margin: 0 auto;
        padding: 16px;
        height: 40px;
    }
    
    nav ul {}
    
    .active {
        background-color: var(--tile-color);
    }
    /* Footer */
    
    footer {
        max-width: 520px;
        position: relative;
        margin: 0 auto;
        padding: 80px 16px;
        font-size: 14px;
		text-align: center;
    }
	footer a>svg>path{ 
	  fill: var(--signature-color);
	}
    
    footer a:hover {
        text-decoration: none;
    }
    /* Theme button switch */
    
    :root[color-mode="light"] .color-mode__btn.dark--hidden {
        display: block;
    }
    
    :root[color-mode="dark"] .color-mode__btn.light--hidden {
        display: block;
    }
    
    .color-mode__btn {
        display: none;
        cursor: pointer;
        background: none;
        border: none;
        border-radius: 50px;
        padding: 8px 10px;
        float: right;
        margin-top: 12px;
    }
    
    .color-mode__btn svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5px;
    }
    
    .color-mode__btn:hover svg,
    .color-mode__btn:focus svg,
    .color-mode__btn:focus {}