:root {
    --text: #522330;
    --background: #f3f0ee;
    --background-accent: #f0ebe3;
    --accent: #dbd005;
    --accent-dark: #d6b300;
    --accent-light: #fffbaa;
    --accent-love: rgb(233, 177, 248);

    --basefont: Gothic;
    --title-font: Catlove;
    --nav-font: helvetica;
    --text-size: 16px;
    --text-size-whisper: 12px;

    --minimum-img-width: 150px;
    --maximum-img-width: 400px;
    --maximum-columns: 4;
    --image-background: #fff;
    --column-gap: var(--spacing);

    --max-width: 800px;
    --spacing: 16px;
    --border-radius: 6px;
    --underline: wavy var(--accent-light);
    --border: solid  var(--accent) 2px;

    --halfspacing: calc(var(--spacing) / 2);
    --doublespacing: calc(var(--spacing) * 2)
}

* {
    box-sizing: border-box;
    max-width: 100%;
    scrollbar-color: var(--accent);
}

body {
    background-image: linear-gradient(rgba(255, 255, 255, 0), #b9eab3), url("/Images/background_green_001.png");
    overflow-y: hidden;
    overflow-y: scroll;
    color: black;
    font-family: var(--nav-font);
    line-height: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

p {
    margin: var(--halfspacing);
    color: var(--text);
    font-family: var(--basefont);
    padding: var(--spacing);
    text-indent: 32px;
}

a {
    color: var(--accent);
    text-decoration: underline var(--underline);
    text-underline-offset:.15em
}

    nav a {
        font-family: 'Times New Roman', helvetica, Arial, sans-serif;
        font-size: 1.2em;
        margin: var(--spacing);
        color: #de2e72;
        text-decoration: underline;
    }

sub {
    color: gray;
    font-family: Gothic;
}

small {
    font-family: var(--basefont);
    font-size: 1.3em;
    color: rgb(159, 135, 103);
    display: flex;
    justify-content: center;
}

a:hover {
    color: var(--accent-dark);
}


#to-top a {
    position: fixed;
    right: var(--spacing);
    bottom: var(--spacing);
    font-size: 50px;
    text-decoration: none;
    color: var(--accent);
}

b {
    margin: var(--halfspacing);
    font-family: Gothic;
    color: var(--accent-dark);
}

i {
    font-family: Gothic;
}

mark {
    background-color: var(--accent-light);
    padding: 1px 2px;
    border-radius:var(--border-radius)
}

code {
    font-size:.9em;
    padding:1px 3px;
    font-family:monospace;
    color:var(--accent-dark)
}

.whisper {
    font-size: var(--text-size-whisper);
    color: gray;
}

u {
    text-decoration-color: var(--accent-dark);
}

ol, ul {
    margin: var(--spacing);
}

.heartlist {
    list-style-image: url('/Images/favicon_001.gif');
}

li {
    padding-left: var(--halfspacing);
    margin: var(--halfspacing) auto;
    font-family: Gothic;
}

li > ul {
    padding-left: var(--spacing);
    margin: auto;
    font-size: .9em;
}

li::marker {
    color: var(--accent);
}

blockquote {
    padding-left:var(--doublespacing);
    margin:var(--doublespacing);
    border-left: var(--border);
    color:var(--accent-dark);
    background-color: var(--background-accent);
}

hr {
    width: 100%;
    border: solid 1px var(--accent-dark);
}

img {
    vertical-align: middle;
    max-width: 100%;
}

h1,
h2,
h3,
h4 {
    font-family: var(--title-font);
    margin: 1.5em auto;
    line-height: 1.3em;
    padding: var(--spacing);
}

h1 {
    font-size: 2em;
    color: var(--accent);
    text-align: center;
}

    h1 a {
        text-decoration: none;
        color: var(--accent);
    }

h2 {
    font-size: 1.5em;
    margin: 1em auto;
    color: var(--accent);
}

h3 {
    color: var(--background);
    background: var(--accent)
}

h4 {
    color: white;
    padding: var(--doublespacing);
    background: var(--accent-dark);
    font-weight: normal;
    font-family: monospace;
    font-size: 10px;
}

h5 {
    color: lightgray;
    size: var(--text-size-whisper);
}

.container {
    margin: var(--spacing);
    padding: var(--spacing);
    box-shadow: 0px 8px 16px 0px rgba(67, 7, 7, 0.2);
    border: solid lightgray 2px;
    border-radius: 15px;
}

nav {
    height: 30px;
    width: 100%;
    background-color: white;
    color: black;
    font-family: var(--nav-font);
    overflow: hidden;
}

main, header, footer {
    max-width: var(--max-width);
    margin: 0 auto;
}

.center {
    text-align: center;
}

main {
  margin: var(--spacing);
  width: 80%;
  height: 100%;
  overflow: auto;
  background-color: var(--background);
  border: 20px solid transparent;
  border-image: url(/Images/flannel-brown.jpg) 30% round;
}

footer {
    width: 100%;
    display: block;
    text-align: center;
    background-color: lightgrey;
    font-size: .9em;
    margin: var(--spacing) auto;
}

.box {
    padding: var(--spacing);
    border: var(--border);
    margin: var(--spacing) auto;
    break-inside: avoid;
}

.box-scroll {
    margin: var(--spacing);
    width: 100%;
    max-height: 400px;
    padding: var(--spacing);
    border: var(--border);
    margin: var(--spacing) auto;
    break-inside:avoid;
    overflow-x: hidden;
    overflow-y: scroll;
}

.flex {
    display: flex;
    flex-flow: row wrap;
    gap: var(--halfspacing) var(--spacing);
}

.flex > * {
    flex: 1 2 200px;
    margin: 0 auto;
}

#counter {
    text-align: center;
    font-family: monospace;
    color: var(--text);
    size: var(--text-size);
}

#info {
    padding: var(--spacing);
    width: 100%;
    background-color: var(--background-accent);
    color: var(--accent-dark);
    line-height: 0.5em;
}

#info li {
    font-family: monospace;
    font-size: 12px;
}

#gallery {
    margin: var(--doublespacing) auto;
    display: block;
    text-align: center;
    line-height: 1.2em;
    font-size: .9em;
}
#gallery.columns {
    columns: var(--minimum-img-width) var(--maximum-columns);
    gap: var(--column-gap);
}

#gallery img {
    margin: var(--spacing) auto;
    max-width: min(var(--maximum-img-width), 100%);
    display:block;
    background-color:var(--image-background);
    transition: 0.5s ease;
}

figure {
    margin: var(--spacing) auto;
    break-inside: avoid;
}

#gallery img:hover {
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: var(--border);
    transform: scale(1.2);
}

#lightbox {
    border: none;
    outline: none;
}
#lightbox img {
  max-height:90vh;
  max-width:90vw;
}

#header-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 100% 25%;
    border-bottom: solid 4px var(--accent);
    box-shadow: 0px 8px 16px 0px var(--background-accent);
}

#cover-img {
    width: 50%;
    height: auto;
    max-height: 400px;
    border-radius: 25px;
    object-fit: cover;
}

.relationships-chibis {
    margin: var(--spacing);
    display: block;
    height: 100px;
    width: 100px;
}

.relationships-chibis:hover {
    animation: jumping 1.5s ease infinite;
}

@font-face {
    font-family: Gothic;
    src: url("https://fonts.googleapis.com/css?family=Averia Serif Libre' rel='stylesheet");
}

@font-face {
    font-family: Catlove;
    src: url(/Fonts/Catlove.ttf);
}

@media only screen and (min-width: 600px) {
    main {
        width: 90%;
    }
    
    #lightbox button {
        display: none;
    }
} 
@media only screen and (max-width: 600px) {
    main {
        border: none;
    }
} 

@keyframes jumping {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

@font-face {
    font-family: Hearts;
    src: url(/Fonts/heartfont.ttf);
}