:root {
    --background-light: #fcfcfc;
    --background-dark: #141414;

    --text-light: #000;
    --text-secondary-light: #808080;
    --text-placeholder-light: #b9b9b9;
    --text-dark: #FFF;
    --text-secondary-dark: #848484;
    --text-placeholder-dark: #575757;

    --card-background-light: #fcfcfc;
    --card-background-hover-light: #f7f7f7;
    --card-background-dark: #141414;
    --card-background-hover-dark: #1f1f1f;

    --input-background-light: #f7f7f7;
    --input-background-dark: #1f1f1f;

    --button-contrast-background-light: #0c0c0c;
    --button-contrast-background-hover-light: #242424;
    --button-contrast-background-dark: #f8fafc;
    --button-contrast-background-hover-dark: #e2e3e5;
    --button-contrast-border-color-light: #0c0c0c;
    --button-contrast-border-color-dark: #f8fafc;
    --button-contrast-text-light: var(--background-light);
    --button-contrast-text-dark: var(--background-dark);
    --button-contrast-border-light: var(--button-contrast-border-color-light) solid 1px;
    --button-contrast-border-dark: var(--button-contrast-border-color-dark) solid 1px;

    --button-glass-background-light: #0c0c0c1a;
    --button-glass-background-hover-light: #2424241a;
    --button-glass-background-dark: #f8fafc12;
    --button-glass-background-hover-dark: #e2e3e512;
    --button-glass-border-color-light: #0c0c0c1a;
    --button-glass-border-color-dark: #0000;
    --button-glass-text-light: var(--text-secondary-light);
    --button-glass-text-dark: var(--text-secondary);
    --button-glass-border-light: var(--button-glass-border-color-light) solid 1px;
    --button-glass-border-dark: var(--button-glass-border-color-dark) solid 1px;

    --color-progressive-light: #1b50b5;
    --color-progressive-light--hover: #15378f;
    --color-progressive-light--active: #233566;
    --color-progressive-light--focus: #1a49a8;

    --color-progressive-dark: #71a1ff;
    --color-progressive-dark--hover: #487bed;
    --color-progressive-dark--active: #233566;
    --color-progressive-dark--focus: #36c;

    --border-color-light: #e0e0e0;
    --border-color-dark: #FFFFFF1a;
    --border-light: var(--border-color-light) solid 1px;
    --border-dark: var(--border-color-dark) solid 1px;

    --star-fill: #dbdae2;
    --icon-fill-light: var(--text-light);
    --icon-fill-dark: #9c9da0;

    --content-width: 680px;
    --header-width: 1080px;
    --content-padding-desktop: 3rem;
    --content-padding-tablet: 2rem;
    --content-padding-phone: 1.5rem;

    --rounded-border-radius: 32768px;

    --header-height: 64px;
    --header-bg: var(--background);
}

@media (prefers-color-scheme: light) {
    :root {
        --background: var(--background-light);
        --text: var(--text-light);
        --text-secondary: var(--text-secondary-light);
        --text-placeholder: var(--text-placeholder-light);
        --card-background: var(--card-background-light);
        --card-background-hover: var(--card-background-hover-light);
        --input-background: var(--input-background-light);

        --button-contrast-background: var(--button-contrast-background-light);
        --button-contrast-background-hover: var(--button-contrast-background-hover-light);
        --button-contrast-text: var(--button-contrast-text-light);
        --button-contrast-border: var(--button-glass-border-light);

        --button-glass-background: var(--button-glass-background-light);
        --button-glass-background-hover: var(--button-glass-background-hover-light);
        --button-glass-text: var(--button-glass-text-light);
        --button-glass-border: var(--button-glass-border-light);

        --border-color: var(--border-color-light);
        --border: var(--border-light);
        --icon-fill: var(--icon-fill-light);

        --color-progressive: var(--color-progressive-light);
        --color-progressive--hover: var(--color-progressive-light--hover);
        --color-progressive--active: var(--color-progressive-light--active);
        --color-progressive--focus: var(--color-progressive-light--focus);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--background-dark);
        --text: var(--text-dark);
        --text-secondary: var(--text-secondary-dark);
        --text-placeholder: var(--text-placeholder-dark);
        --card-background: var(--card-background-dark);
        --card-background-hover: var(--card-background-hover-dark);
        --input-background: var(--input-background-dark);

        --button-contrast-background: var(--button-contrast-background-dark);
        --button-contrast-background-hover: var(--button-contrast-background-hover-dark);
        --button-contrast-text: var(--button-contrast-text-dark);
        --button-contrast-border: var(--button-glass-border-dark);

        --button-glass-background: var(--button-glass-background-dark);
        --button-glass-background-hover: var(--button-glass-background-hover-dark);
        --button-glass-text: var(--button-glass-text-dark);
        --button-glass-border: var(--button-glass-border-dark);

        --border-color: var(--border-color-dark);
        --border: var(--border-dark);
        --icon-fill: var(--icon-fill-dark);

        --color-progressive: var(--color-progressive-dark);
        --color-progressive--hover: var(--color-progressive-dark--hover);
        --color-progressive--active: var(--color-progressive-dark--active);
        --color-progressive--focus: var(--color-progressive-dark--focus);
    }
}

@media (max-width: 767px) {
    :root {
        --content-padding: var(--content-padding-phone);
    }
}

@media (min-width: 768px) and (max-width: 1280px) {
    :root {
        --content-padding: var(--content-padding-tablet);
    }
}

@media (min-width: 1281px) {
    :root {
        --content-padding: var(--content-padding-desktop);
    }
}

html, body {
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--background);
    color: var(--text);
    touch-action: manipulation;
}

.content-container {
    width: var(--content-width);
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

header > .content-container {
    width: var(--header-width);
}

.flex {
    display: flex;
}

.flex-vertical-center {
    justify-content: center;
}

.flex-horizontal-center {
    align-items: center;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-start {
    align-items: flex-start;
}

.flex-end {
    align-items: flex-end;
}

.icon > svg {
    fill: var(--icon-fill);
}

.icon-stroke > svg {
    stroke: var(--icon-fill);
}

.rounded {
    border-radius: var(--rounded-border-radius);
}

input, button, textarea {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
}

input:before, textarea:before {
    content: '';
    color: var(--text-placeholder);
}

button {
    transition: all 150ms ease;
}

.contrast-button {
    background: var(--button-contrast-background);
    color: var(--button-contrast-text);
    border: var(--button-contrast-border);
}

.contrast-button:hover {
    background: var(--button-contrast-background-hover);
}

.contrast-button svg {
    fill: var(--button-contrast-text);
}

.glass-button {
    background: var(--button-glass-background);
    color: var(--button-contrast-text);
    border: var(--button-glass-border);
}

.glass-button:hover {
    background: var(--button-glass-background-hover);
}

.glass-button svg {
    fill: var(--button-glass-text);
}

button:not([disabled], .disabled),
input[type="button"]:not([disabled], .disabled),
input[type="reset"]:not([disabled], .disabled),
input[type="submit"]:not([disabled], .disabled) {
    cursor: pointer;
}

.overflow-hidden {
    overflow: hidden;
}
.inset-0 {
    inset: 0;
}
.fixed {
    position: fixed;
}
.pointer-events-none {
    pointer-events: none;
}
.bg-purple-200 {
    background-color: hsl(249,75%,83%)
}

@media (min-width: 768px) {
    .w-px {
        width: 8px;
    }
    .h-px {
        height: 8px;
    }
    .opacity-60 {
        opacity: .6;
    }
    .opacity-70 {
        opacity: .7;
    }
}

@media (max-width: 767px) {
    .w-px {
        width: 6px;
    }
    .h-px {
        height: 6px;
    }
    .opacity-60 {
        opacity: .36;
    }
    .opacity-70 {
        opacity: .5;
    }
}

.z-0 {
    z-index: -1;
}

.absolute {
    position: absolute;
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
}
.bg-blue-100 {
    background-color: hsl(225,100%,96%);
}
.bg-purple-100 {
    background-color: hsl(248,100%,96%);
}
.bg-purple-50 {
    background-color: hsl(248,100%,98%);
}
.bg-blue-100 {
    background-color: hsl(225,100%,96%);
}
.bg-blue-200 {
    background-color: hsl(225,100%,98%);
}
.w-0\.5
.w-0\.5 {
    width: 4px;
    height: 4px;
}
.h-0\.5 {
    height: 4px;
    width: 4px;
}

.fixed {
    position: fixed;
}

.top {
    top: 0;
}

.full-width {
    width: 100%;
}

.cruxipedia-title > svg {
    height: 42px;
    width: 156px;
    fill: var(--text);
}

.cruxipedia-title {
    transform: scaleX(0.92);
}

header {
    height: var(--header-height);
    background-color: var(--header-bg);
    z-index: 10;
}

.flex-space-around {
    justify-content: space-around;
}

.flex-space-between {
    justify-content: space-between;
}

.search-icon {
    margin-right: 0.4rem;
    margin-left: 0.4rem;
}

.search-icon > svg {
    height: 16px;
}

.search-box > div > input {
    font-size: 14px;
    width: 100%;
}