article {
	border-radius: 15px;
}

a, a:visited {
	color: light-dark(#8839ef, #cba6f7)
}

article {
    border: 1px solid rgba(136, 57, 239, 0.4);
    background-color: rgba(136, 57, 239, 0.1);
    border-radius: 15px;
}

.tag {
	border: 1px solid rgba(136, 57, 239, 0.4);
	background-color: rgba(136, 57, 239, 0.1);
	margin-top: 2px;
	border-radius: 15px;
}

pre:has(code) {
    border: 1px solid rgba(136, 57, 239, 0.4);
    background-color: rgba(136, 57, 239, 0.1);
    padding: 8px 12px;
    color: #4c4f69;
    border-radius: 10px;
    font-size: 1em;
    overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
    :not(pre) > code {
        color: #cdd6f4;
        background-color: #1e1e2e;
    }

    pre:has(code),
    article,
    th,
    td {
        border: 2px solid var(--accent);
        background-color: var(--crust);
        color: var(--foreground);
    }
}

@media (prefers-color-scheme: light) {
    :not(pre) > code {
        color: #4c4f69;
        background-color: #1e1e2e;
    }
    pre:has(code),
    article,
    th,
    td {
        border: 2px solid var(--accent);
        background-color: var(--crust);
        color: var(--foreground);
    }
    pre:has(code):hover,
    article:hover,
    th:hover,
    td:hover {
        border: 2px dashed rgb(136, 57, 239);
        transform: scale(1.02, 1.02);
        transition: ease-in-out 0.3s;
    }
}

body {
	font-family: "Atkinson Hyperlegible Next";
}

:root {
	--background: light-dark(#eff1f5, #1e1e2e);
	          --crust: light-dark(#dce0e8, #11111b);
	          --foreground: light-dark(#4c4f69, #cdd6f4);
	          --subtext: light-dark(#7c7f93, #45475a);
	          --divider-color: var(--accent);
	          --accent: light-dark(#8839ef, #cba6f7);
}

hr {
	color: rgba(136, 57, 239, 0.8);
}
		bg {
                background: url("https://meowing.zip/assets/images/pfp.jpg");
                background-repeat: repeat;
                animation: 60s linear infinite bg-move;
                opacity: .15;
                display: block;
                position: fixed;
                z-index: -10000;
                height: 100% !important;
                width: 100% !important;
                inset: 0 !important;
        }
        @keyframes bg-move {
                0% {
                        background-position: 0 0;
        }

                100% {
                        background-position: -960px -960px;
                }
        }
        bg-gradient {
            background: linear-gradient(color-mix(in srgb, var(--accent) 5%, var(--background)), color-mix(in srgb, var(--accent) 30%, var(--background)));
            z-index: -100001;
            background-repeat: repeat;
            position: fixed;
            width: 100%!important;
            height: 100%!important;
            inset: 0 !important;
        }

.post {
	outline: 2px solid var(--accent);
	padding: 15px;
	border-radius: 15px;
	background-color: var(--background);
}

section {
	margin-bottom: 20px;
}