:root {
    /** customize your style by changing the variables in these brackets **/

    --text: #2D181E;
    --meta-color: #666; 
    --link-hover: var(--text); 
    --accent: #2D181E; 
    --accent-dark: #2D181E; 
    --accent-light: #2D181E; 
    --border-color: var(--accent-dark); 
    --highlight-color: #aee6ec; 
    
    /** these are default browser font styles, but you can name specific fonts, ex. 'Georgia'**/
    --main-font: "Times New Roman", sans-serif;
    --h1-font: "Times New Roman", sans-serif;
    --legend-font: "Times New Roman", sans-serif;
    
    /** these can be changed to solid, dotted, dashed, double, and none. it combines with border-size in some cases **/
    --main-border-style: solid;
    --link-border-style: dotted; /** links only, also can be wavy **/
    
    /** some sizing, which you can change but I highly advise for you to keep the provided units (em, %, and px respectively). smaller than 1 can be used as decimals, e.g. 0.8 **/
    --line-height: 150%;
    --main-width: 75em; /** main content area where main-background (above) is applied **/
    --card-width: 20em; /** 3 column on base desktop screen; increase by 5+ to reduce number of columns, decrease by 5+ to increase number of columns **/
    --border-size: 2px;
    --h1-size: 2.5em;
    
    /** calculations for sizing, you might not want to touch these **/
    --base-size: 1em;
    --size-quarter: calc(var(--base-size) / 4);
    --size-half: calc(var(--base-size) / 2);
    --size-one-half: calc(var(--base-size) * 1.5);
    --size-double: calc(var(--base-size) * 2);
}

*,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
    }

p,
details {
    padding: var(--size-half) 0;
}

ul,
ol {
    margin: var(--base-size) var(--size-double);
}

li {
    padding-left: var(--base-size);
}

body {
    background:url(https://i.pinimg.com/736x/e8/56/53/e85653d7cc2a0ab414b6e41a90343be9.jpg);
    color: var(--text);
    font: normal var(--base-size) / var(--line-height) var(--main-font);
}

main {
    background: var(--main-background);
    width: var(--main-width);
    max-width: 95%;
    margin: 0 auto;
    padding: var(--size-one-half);
}

#head {
    padding: var(--size-one-half) 0;
    border-bottom: var(--border-size) var(--main-border-style) var(--accent);
    text-align: center;
}

#blurb {
    padding: 10px;
    border-bottom: var(--border-size) var(--main-border-style) var(--accent);
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
    border-image:url(https://patchworkamoeba.neocities.org/media/brown-border.png) 7 fill round;
    border-width:9px;
    border-style:solid;
    color: #dcb8af;
}

h1 {
    font: normal var(--h1-size) var(--h1-font);
    color: var(--accent);
    padding: var(--size-half) 0;
    font-family: "Jacquard-24";
    font-size: 65px;
    text-shadow: 3px 3px 2px #dcb8af;
}

h2,
h3 {
    /** rec headers; h2 for media, h3 for fanfiction because of links **/
    font: normal var(--rec-header-size) var(--rec-header-font);
    color: var(--accent-dark);
    margin: 0 0 var(--size-half);
    font-style: italic;
    font-size: 25px;
}

h2 {
    /** media rec headers have a border bottom **/
    border-bottom: var(--border-size) var(--main-border-style) var(--accent);
}
    .currently-h2 {
        font: normal var(--rec-header-size) var(--rec-header-font);
        color: #dcd4ca;
        margin: 0 0 var(--size-half);
    font-style: italic;
    font-size: 25px;
        border-bottom: 2px solid #dcd4ca;
    }
    
strong {
    color: #dcb8af;
}

.summary strong {
    color: var(--text);
}

em {
    color: var(--accent);
}

u {
    border-bottom: var(--border-size) var(--link-border-style) var(--accent);
}

mark {
    background-color: var(--highlight-color);
}

a:link,
a:visited {
    color: var(--accent);
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    text-decoration: underline;
    text-decoration-style: var(--link-border-style);
    text-decoration-thickness: var(--border-size);
    text-decoration-color: var(--accent);
    -webkit-text-decoration-color: var(--accent);
}

#grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px 25px;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    gap: var(--size-double) var(--size-one-half);
}

.read-card {
background: rgba(0, 0, 0, 0);
border-image:url(https://patchworkamoeba.neocities.org/media/white-border.png) 7 fill round;
border-width:9px;
border-style:solid;
padding: var(--base-size);
height:400px;
    overflow-y:auto;
    overflow-x:auto;
}

.manga-card {
background: rgba(0, 0, 0, 0);
border-image:url(https://patchworkamoeba.neocities.org/media/palepink-border.png) 7 fill round;
border-width:9px;
border-style:solid;
padding: var(--base-size);
    height:400px;
    overflow-y:auto;
    overflow-x:
            auto;
}
    
.movie-card {
background: rgba(0, 0, 0, 0);
border-image:url(https://patchworkamoeba.neocities.org/media/pink-border.png) 7 fill round;
border-width:9px;
border-style:solid;
padding: var(--base-size);
    height:400px;
    overflow-y:auto;
    overflow-x:
            auto;
}
    
.tv-card {
background: rgba(0, 0, 0, 0);
border-image:url(https://patchworkamoeba.neocities.org/media/blue-border.png) 7 fill round;
border-width:9px;
border-style:solid;
padding: var(--base-size);
    height:400px;
    overflow-y:auto;
    overflow-x: auto;
}

.currently-card {
background: rgba(0, 0, 0, 0);
border-image:url(https://patchworkamoeba.neocities.org/media/brown-border.png) 7 fill round;
border-width:9px;
border-style:solid;
padding: var(--base-size);
    height:400px;
    overflow-y:auto;
    overflow-x: auto;
}

.meta {
    font-size: 0.85em;
    border-bottom: var(--border-size) var(--main-border-style) var(--accent);
    margin: var(--base-size) 0;
    padding-bottom: var(--base-size);
}

.currently-meta {
    font-size: 0.85em;
    border-bottom: 2px solid #dcd4ca;
    margin: var(--base-size) 0;
    padding-bottom: var(--base-size);
    color: #dcd4ca;
}

.summary {
    margin: var(--size-half) 0 var(--base-size);
    font-size: 0.9em;
}

.thoughts {
    margin: var(--size-half) 0;
    font-size: 0.85em;
    font-style: italic;
    color: #fff;
    padding: var(--base-size);
    border-image:url(https://patchworkamoeba.neocities.org/media/brown-border.png) 7 fill round;
    border-width:9px;
    border-style:solid;
}


#footer {
    margin: var(--base-size) 0 0;
    text-align: center;
    font-size: calc(var(--base-size) * 0.85);
    border-image:url(https://patchworkamoeba.neocities.org/media/brown-border.png) 7 fill round;
    border-width:9px;
    border-style:solid;
    color: #dcb8af
    
}

::-webkit-scrollbar-thumb {
    background-color: #764a43;  
    border-radius: 15px;
    border:1px solid #999;
}

::-webkit-scrollbar {
    width: 7px; 
    height: 4px; 
    background: transparent;
}

.posterimg { 
    float:left;
    height:175px; 
    margin-right :15px; 
    border-radius: 10px; }