:root {
	--content-gap: 1rem;
    --container-padding: 1.75rem;
    --cbox-padding: 6rem;
    --box-padding: 1.5rem;
    --trans-default: all 300ms ease 25ms;
	--stagger-size: 15%;
}

div,
header,
button,
ol,
ul,
a, .flex-column {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

*,
html,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div, li {
	gap: 1rem;
}

[x-cloak] {
    display: none !important;
}

:focus-visible, 
.splide :focus-visible, 
.splide.is-focus-in .splide__arrow:focus,
.splide .splide__arrow:focus-visible, 
.splide__pagination li:focus-visible {
    outline-offset: 0.25rem;
    border-radius: 1rem;
    outline: 2px solid var(--hover-prime);
}

::selection {
	background-color: var(--hover-prime);
	color: var(--text-white);
}

body {
	background-color: var(--bg);
}

svg > path {
    stroke-width: 1.5px;
}

main::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 0.75rem;
}

main::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
    background-color: var(--bg);
}

main::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background-color: var(--border-dark);
    border-radius: 10px;
    border: 3px solid var(--bg);
}

@media screen and (max-width: 1360px) {
    :root {
    --container-padding: 1.5rem;
    --cbox-padding: 5rem;
    }
}

@media screen and (max-width: 1024px) {
    :root {
    --cbox-padding: 3rem;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --container-padding: 1.25rem;
        --cbox-padding: 2rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --container-padding: 1rem;
        --cbox-padding: 1.25rem;
    }
}