kitsu.cafe/static/css/main.css

:root {
    box-sizing: border-box;
    font-family: Verdana, Helvetica, Tahoma, sans-serif;


    --primary-color: #EA80FC;
    --secondary-color: #AA4FF6;
    --tertiary-color: #7461AD;
    --quaternary-color: #794A7F;

    --primary-complement-color: #92fc80;
    --secondary-complement-color: #9aad61;
    --tertiary-complement-color: #9aad61;
    --quaternary-complement-color: #507f4a;

    --primary-triad-1-color: #FCEA80;
    --secondary-triad-1-color: #F6AA4F;
    --tertiary-triad-1-color: #AD7461;
    --quaternary-triad-1-color: #7f794a;

    --primary-triad-2-color: #80FCEA;
    --secondary-triad-2-color: #4FF6AA;
    --tertiary-triad-2-color: #61AD74;
    --quaternary-triad-2-color: #4a7f79;

    --black: #181A1B;
    --dark-grey: #232323;
    --grey: #A9A9A9;
    --light-grey: #D3D3D3;
    --white: #EEEEEE;

    --dark-violet: #391648;
    --light-violet: #ecc0ff;

    --foreground-color: var(--white);
    --background-color: var(--black);
    --secondary-background-color: var(--dark-violet);

    --border-color: var(--secondary-color);
    --header-color: var(--secondary-triad-1-color);
    --subheader-color: var(--primary-color);

    --link-color: var(--secondary-triad-2-color);
    --link-hover-color: var(--primary-triad-2-color);
    --link-active-color: var(--tertiary-triad-2-color);
    --link-visited-color: var(--quaternary-triad-2-color);

    --list-marker-color: var(--secondary-triad-1-color);
    --muted-color: var(--grey);
}

@media (prefers-color-scheme: light) {
  :root {
    --foreground-color: var(--black);
    --background-color: var(--white);
    --secondary-background-color: var(--light-violet);

    --border-color: var(--tertiary-color);
    --header-color: var(--tertiary-triad-1-color);
    --subheader-color: var(--tertiary-color);

    --link-color: var(--quaternary-complement-color);
    --muted-color: var(--dark-grey);
  }
}

* {
    box-sizing: inherit;
}

html, body {
    width: 100%;
}

body {
    --b: var(--background-color);
    --f: var(--secondary-background-color);

    margin: 0;
    background-color: var(--b);
    color: var(--foreground-color);

    background: radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 0% 0% / 48px 48px, radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 24px 24px / 48px 48px, linear-gradient(var(--f) 1px, transparent 1px) 0px -0.5px / 24px 24px, linear-gradient(90deg, var(--f) 1px, var(--b) 1px) -0.5px 0px / 24px 24px var(--b);
    background-size: 48px 48px, 48px 48px, 24px 24px, 24px 24px;
    background-color: var(--b);

}

@media only screen and (min-width: 740px) {
    body {
        margin: initial;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Georgia, Helvetica, sans-serif;
    font-variant: small-caps;
    margin: 0;
}

h1 {
    color: var(--header-color);
}

h2, h3, h4, h5, h6 {
    color: var(--subheader-color);
}

a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }
a:active { color: var(--link-active-color); }

li {
    list-style: none;
    position: relative;

    margin-left: 8px;
    padding-left: 4px;
}

li::before {
    content: '★';
    position: absolute;
    top: -2px;
    left: -12px;
    color: var(--list-marker-color);
}

img {
    max-width: 100%;
}

pre, code {
    font-size: 1rem;
    padding: 0.5rem;
    overflow: auto;
}

nav.main-nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 160px;
    justify-content: center;
}

nav li::before {
    content: '';
}

@media only screen and (min-width: 740px) {
    nav.main-nav {
        flex-direction: column;
        justify-content: initial;
    }

    nav.main-nav li::before {
        content: '★';
    }
} 

.container {
    display: flex;
    flex-direction: column;

    justify-content: center;

    width: 100%;
    max-width: 800px;
}

@media only screen and (min-width: 740px) {
    .container {
        flex-direction: row-reverse;
        margin-top: 1rem;
    }
} 

.full-width {
    width: 100%;
}

.full-width.container {
    max-width: initial;
}

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

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

.row-reverse {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.column .align-center, .row .align-center {
    align-items: center;
}

.column .justify-center, .row .justify-center {
    justify-content: center;
}

.column .space-between, .row .space-between {
    justify-content: space-between;
}

.card {
    background-color: var(--background-color);
    border: 1px solid var(--quaternary-color);
    margin: 0.75rem;
    padding: 1rem;
    border-radius: 4px;
}

.card.has-moon {
    position: relative;
}

.card.has-moon::before {
    content: '';
    position: absolute;
    top: 18px;
    right: 18px;
    height: 24px; 
    width: 24px; 
    box-shadow: -4px 4px 0 1px var(--secondary-triad-1-color); 
    border-radius: 50%; 
}

.header {
    color: var(--header-color);
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: .5rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--muted-color);
}

.divider:not(:empty)::before {
  margin-right: .25rem;
}

.divider:not(:empty)::after {
  margin-left: .25rem;
}

.card-image {
    margin: 0.25rem;
    margin-right: 0.75rem;
    float: left;
    height: 100px;
    width: 100px;
}

.card-content {
    display: inline-block;
    padding-left: 1rem;
}

.card-image img {
    transition: transform .25s ease;
    image-rendering: smooth;
}

.card-image img:hover {
    transform: scale(1.1) translateY(-5px);
}

.hide-overflow {
    overflow: hidden;
}

.muted {
    color: var(--muted-color);
}

.center-text {
    text-align: center;
}

.grow {
    flex-grow: 1;
}

.image-link {
    display: block;
}

@media only screen and (max-width: 740px) {
    .hide-mobile {
        display: none;
    }
}