@import url('https://fonts.googleapis.com/css?family=Jersey+15|Pixelify+Sans:wght@400|Silkscreen');
:root {
    --header-bg: none;
    --site-bg: none;
    --accent-color: #CD455D;
    --select-color: #FFD484;
    --link-color: white;
    --bg-color: #D0C6BF;
    --bg-color2: #E8E3E0;
    --text-color: #362821;
    --border-color: #CD455D;
    /*--gradient-bg: linear-gradient(0deg, #CADCFF00 0%, #fff 100%);*/
    --post-header-color: #CD455D;
    --post-shadow-color: transparent;
    --outline-color: #fff;
    --outline-color2: transparent;
}


/* APPLIES TO ALL CONTENT */
* {
    box-sizing: border-box;
    font-family: "Pixelify Sans", monospace;
    font-optical-sizing: auto;
    font-weight: <weight>;
}
/* selecting text on the page */
::selection {
    background: var(--select-color);
    color: var(--border-color);
}

body {
    background-color: var(--bg-color);
    background-image: var(--site-bg);
    margin: 0;
/*default font size for ref*/
    font-size: 16px;
/*default text color*/
    color: var(--text-color);
}
/* line spacing */
p {line-height: 1.5em;}

h1 {
    font-family: "Jersey 15", monospace;
    font-size: 1.5em;
    color: var(--post-header-color);
}
h2, h3 {
    font-family: "Silkscreen", monospace;
}
h4,
h5,
h6 {color: var(--border-color);}

header {
    background-color: var(--accent-color);
/* can add image url at :root */
    background: none;
    background-size: 100%;
/* change the minimum height if you want it to take up more/less space */
    min-height: 200px;
/* limit header size to not fill top. Min 800px */
    max-width: 980px;
/*centers the header*/
    margin: 0 auto;
/*aligns header block to bottom*/
    align-content: flex-end;
}

/* Site title displayed at the top of the page */
header > h1 {
    background-color: var(--accent-color);
    color: var(--outline-color);
    margin: 1em auto;
    font-size: 2em;
/*uncomment this line if you want the header text to not take up the full length of the div*/
    /*width: fit-content;*/
    max-width: 600px;
    padding: 6px 12px;
    border-radius: 1em;
    border: 4px double var(transparent);
/*special heading filter*/
    filter: none;
/* text alignment */
    text-align: center;
}

/*LISTS*/
li {
/*Bullet thing*/
    list-style-image: url("../list.png");
}

/* Pagination Styles */
.pagination {
    display: flex;
    list-style: none;
    border-radius: .25rem;
    margin: 20px 0;
    padding: 0;
    justify-content: center;
}

.page-link {
    position: relative;
    display: block;
    padding: .75rem 1rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #fff;
    background-color: #362821;
    border: 1px transparent;
}

.homepage .page-link,
.listing .page-link {
    background-color: #fff;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #CD455D;
    border-color: transparent;
}

nav > ul {
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    line-height: 3rem;
/* takes away the bullet in a list */
    list-style-type: none;
/* takes away the indent in list */
    padding-left: 0;
/* spaces out buttons*/
    justify-content: space-evenly;
}
nav li {
    text-align: center;
    list-style-image: none;
}
nav li > a {
    font-weight: bold;
    background-color: var(--accent-color);
    border: 4px double var(transparent);
    border-radius: 1em;
    padding: .5em 3em;
/* delete link underline thing*/
    text-decoration: none;
    margin-top: .2em;
}
nav li > a:visited {color: var(--link-color);}
nav li > a:hover {
    color: white;
    background-color: var(--select-color);
}
    
a {
    color: var(--link-color);
    border-radius: .3em;
    transition: .2s ease-out;
}
a:visited {
    color: var(--text-color);
}
a:hover {
    color: var(--select-color);
    border-color: var(--select-color);
    transition: .2s ease;
}

#sidebar {
    background-color: var(--bg-color2);
    color: var(--border-color);
    height: fit-content;
    max-width: 320px;
    margin-top: 1em;
    margin-right: 2em;
    border-radius: .5em;
    padding-bottom: 1em;
}
.small-box {
    max-width: 240px;
    margin: auto;
    border: 2px solid var(--bg-color);
/*small box text*/
    font-size: 12px;
/*list item spacing*/
    line-height: 1.5rem;
}

#avatar {
    margin: .5em;
/*limits image icon size without the frame*/
    max-width: 320px;
}
/* Shape gen: https://css-generators.com/flower-shapes/ */
.flower {
  width: 300px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/11.138% 11.138% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat;
  mask: radial-gradient(100% 100%,#000 calc(44.081% - 1px),#0000 44.081%) subtract,100% 50% var(--g),98.429% 62.434% var(--g),93.815% 74.088% var(--g),86.448% 84.227% var(--g),76.791% 92.216% var(--g),65.451% 97.553% var(--g),53.14% 99.901% var(--g),40.631% 99.114% var(--g),28.711% 95.241% var(--g),18.129% 88.526% var(--g),9.549% 79.389% var(--g),3.511% 68.406% var(--g),0.394% 56.267% var(--g),0.394% 43.733% var(--g),3.511% 31.594% var(--g),9.549% 20.611% var(--g),18.129% 11.474% var(--g),28.711% 4.759% var(--g),40.631% 0.886% var(--g),53.14% 0.099% var(--g),65.451% 2.447% var(--g),76.791% 7.784% var(--g),86.448% 15.773% var(--g),93.815% 25.912% var(--g),98.429% 37.566% var(--g);
}

#bio {
    margin: 20px;
    padding: .2em;
    background: var(--bg-color);
    border: 4px double var;
    border-radius: 2em;
/*bio text size*/
    font-size: small;
}
#bio p { margin: 1em; }

#content {
    display: flex;
    max-width: 960px;
    margin: auto;
}

main {
    padding: 1em;
    margin: 0 auto;
}

/*Pinned Post type*/
#top {   
    background-color: var(--bg-color);
}

#top section {
    background-color: var(--bg-color2);
    border-radius: .5em;
    margin-bottom: 10px;
    padding: .5em 1em;
    width: 100%;
}

/*Archive type*/
.archive {
    background-color: var(--bg-color);
    min-width: 500px;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
}
.archive article {
    background-color: var(--bg-color2);
    border-radius: .5em;
    padding: .5em 1em;
    width: 100%;
}

.letter {
    font-weight: bold;
    margin-top: 1em;
    display: block;
}

.archive a {
    display: block;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

.archive a:link {
    color: var(--accent-color);
}

.archive a:visited {
    color: #8d7b7f;
}

.archive a:hover {
    color: var(--select-color);
}

/*Taxonomy*/
.taxonomy-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.taxonomy-count {
    color: #666;
    margin-bottom: 2rem;
}

.taxonomy-item {
    margin-bottom: 2rem;
}

.taxonomy-item h2 {
    margin-bottom: 1rem;
}

.post-list {
    list-style: none;
    padding-left: 1rem;
}

.post-list li {
    margin-bottom: 0.5rem;
}

.date {
    color: #666;
    font-size: 0.9rem;
    margin-left: 1rem;
}

/*Blog Post Type*/
article {
    background-color: var(--bg-color2);
    padding: .5em 2em;
    border-radius: .5em;
    margin-bottom: .1em;
    min-width: 600px;
}
article img {
/*note: resize large images*/
    max-width: 100%;
}

/*For details and summary blocks*/
details > summary {cursor:pointer;}

.readmore summary {
    font-weight: bold;
    color: var(--accent-color);
    list-style: none;
}
.readmore summary::-webkit-details-marker {
  display: none;
}
.readmore[open] > summary {
    border-bottom: 2px dashed var(--accent-color);
    padding-bottom: .6em;
    margin-bottom: .6em;
}

/*Fake name + date and time stamp*/
.post-header {
    color: var(--border-color);
    font-weight: bold;
    padding: .5rem 0;
    border-bottom: 4px double var(--outline-color);
}
.timestamp {
    font-weight: normal;
    font-size: smaller;
    margin: .2em;
/*this keeps it to the right edge*/
    float: right;
}

/*photoset grids*/
.photosetx2,
.photosetx3 {
    display: grid;
    gap: 4px;
    align-items: center;
}
.photosetx2 {grid-template-columns: 1fr 1fr;}
.photosetx3 {grid-template-columns: 1fr 1fr 1fr;}
/*Crops tall images*/
.cropped {
    width: 156px;
    height: 156px;
    overflow: hidden;
    object-position: 25% 25%;
}
/*prevents crop distortion*/
.photosetx2 img,
.photosetx3 img {object-fit: cover;}

/* a class for centering text and images */
.center { text-align: center; }
.img-right {
    float: right;
    padding: .3em;
    margin-top: .1em;
    }

/*Stops the float image from overflowing out of its container*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/*you can use the <small> tag in html too*/
.small-text {
    font-size: 11px;
/*text shadow... maybe*/
    text-shadow: var(--bg-color) 1px 1px;
}
footer {
    text-align: center;
    font-size: small;
    max-width: 800px;
    margin: 20px auto;
    padding: 10px 20px;
    border-radius: 15px;
    background: var(--bg-color2);
}

/* MOBILE */
@media only screen and (max-width: 800px) {
    #content {
        flex-wrap: wrap;
    }
    #sidebar {
        margin: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: none;
        border-radius: 0;
    }
    header {min-height: 160px;}
    header > h1 { 
        width: fit-content;
        padding: .3em 1em;
    }
    nav > ul {
    /* this stuff makes it wrap around on mobile */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    #bio {width: 50%;}
    
    #sidebar ul {
        line-height: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }
    #sidebar li {
        margin: .3em 1em;
    }
}