/* FONTS */

@font-face {
    font-family: roboto-mono;
    src: url(../fonts/RobotoMono-VariableFont_wght.ttf);
}
@font-face {
    font-family: silkscreen;
    src: url(../fonts/Silkscreen-Regular.ttf);
}
@font-face {
    font-family: retromoticons;
    src: url(../fonts/Retromoticons.ttf);
}

/* see span.emoticon for styling and vertical alignment */
.emoticon {
    content: ""; /* filler rule */
}


/* SCROLLBAR - note: causes a bit of extra white space on either side of the page. doesn't seem to be an issue on chrome. */

body::-webkit-scrollbar-track {
    background-color: whitesmoke; /* scrollbar background color for chrome, edge, safari*/
}
body::-webkit-scrollbar-thumb {
    background-color: rgba(154, 88, 16, 0.49); /* scrollbar color for chrome, edge, safari*/
    border-radius: 999px;
    border: 1px solid whitesmoke;
}
body::-webkit-scrollbar {
    width: 8px;
}


/* FOUNDATION */

::selection { /* text selection color */
    background-color: rgba(255, 211, 0, 0.36);
    color:black;
}

:root {
    font-size: 100%;
    
    /* colours: whitesmoke, firebrick, dark-orange, midnight-blue, navy... */
    --light-grey: rgb(241, 240, 240);
    --darker-orange: rgb(154, 88, 16);
    --light-blue: #2e627f;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: whitesmoke; /* scrollbar background color for firefox*/
}

html, body {
    overscroll-behavior-y: none;
}

body {
    max-width: 700px;
    box-sizing: border-box;
    
    margin: 0 auto;
    padding: 0 2rem;
    
    font-family: roboto-pixel, roboto-mono, monospace;
    line-height: 1.6;
    
    background-color: whitesmoke;
    color: midnightblue;
}

header { /* default header */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: whitesmoke;
    padding-top: 3rem;
    padding-bottom: 0.5rem;
    width: 100%;
}

header p { /* the text between nav and buttons */
    font-size: 0.75rem;
    color: black;
    margin: 0 0 0.4rem 0;
    line-height: 1.2;
}


/* NAVIGATION */

nav {
    margin: 0.5rem 0 1.5rem 0;
    padding: 0.4rem;
}

body:not(#blog-post) nav{
    background-color: rgb(241, 240, 240);
    border: 0.1rem solid rgb(239, 238, 238);
    border-radius: 0.1rem;
}
    

nav a {
    color: black;
    text-decoration: underline;
    text-decoration-color: firebrick;
    text-decoration-style: wavy;
    text-decoration-thickness: 0.06rem;
    padding: 0 0.6rem 0 0;
    font-weight: 500;
}

nav a:not(.current):hover {
    color: firebrick;
    text-decoration: underline;
    text-decoration-color: black;
    text-decoration-style: wavy;
    text-decoration-thickness: 0.06rem;
    font-weight: 700;
}

.current { /* used in nav to show which page is currently open */
    color: midnightblue;
    cursor: default;
}

.current:hover {
    color: midnightblue;
}



/* COMMON ELEMENT STYLING */

h1 {
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: 600;
}

h2 {
    margin: 0 auto;
    padding: 0 auto;
    font-weight: 500;
    font-size: 1.1rem;
}

a {
    color: black;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--light-blue);
    font-weight: 500;
}

a:hover {
    color: var(--light-blue);
}

h2 a { /* blog post title links */
    color: navy;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.darker-orange {
    color: rgb(154, 88, 16);
}

.bold {
    font-weight: 500;
    color: rgb(154, 88, 16);
}

.center {
    text-align: center;
}



/* HOME PAGE STYLING */

body#home h1 {
    color: midnightblue;
}

body#home p {
    color: black;
    font-size: 0.8rem;
    line-height: 1.3rem;
    margin: 0 0 1rem 0;
}

body#home .underline {
    text-decoration: underline;
    text-decoration-color: firebrick;
    text-decoration-style:wavy;
    text-underline-offset: 0.1rem;
    text-decoration-thickness: 0.06rem;
}

#home .emoticon {
    display: inline-block;
    font-family: retromoticons;
    font-size: 1.6em;
    position: relative;
    top: 0.015em;
    padding: 0 0.09em;
}


/* BLOG INDEX STYLING */

#blog-index header { /* all of the stuff above and including the filter buttons */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: whitesmoke;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

#blog-index header p { /* the text between nav and buttons */
    font-size: 0.75rem;
    color: black;
    margin: 0 0 0.4rem 0;
    line-height: 1.2;
}

#blog-index a.current {
    color: navy;
}

#blog-index button {
    margin: 1rem 0.3rem 0.5rem 0;
    background-color: rgb(241, 240, 240);
    font-family: roboto-mono;
    font-size: 0.7rem;
    color: rgb(154, 88, 16);
    border-radius: 0.2rem;
    border: 0.1rem solid rgb(239, 238, 238);
}

#blog-index button:hover {
    background-color: rgba(199, 66, 22, 0.52);
    color: #7a1e1e;
    cursor: pointer
}

/* these are the blog post cards that show up on the blog index */
.post-preview { 
    background-color: rgb(241, 240, 240);
    padding: 0.5rem 1rem 0.1rem 1rem;
    margin-bottom: 2rem;
    border: 0.1rem solid rgb(239, 238, 238);
    border-radius: 0.1rem;
}

.post-preview h2 a { /* blog post titles on the index cards */
    color: midnightblue;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: midnightblue;
    text-underline-offset: 0.2rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
}

.meta { /* this is the data displayed below the post title on blog index and blog post */
    color: firebrick;
    font-size: 0.6rem;
    padding: 0.15rem 0;
    font-weight:  400;
}

.post-preview p { /* this is the preview text shown on the index card */
    font-size: 0.7rem;
    font-weight: 400;
    color: black;
    opacity: 0.9;
}

.filters {
    margin-bottom: 0;
}

.no-posts {
    color: black;
    padding: 0;
    margin: 0 auto;
    font-size: 0.8rem;
}

.no-posts .emoticon {
    display: inline-block;
    font-family: retromoticons;
    font-size: 1.8em;
    position: relative;
    top: 0.18em;
    padding: 0 0.15em;
}



/* BLOG POST PAGE STYLING */

#blog-post nav {
    margin-bottom: 1rem;
}

#blog-post header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: whitesmoke;
    padding-top: 3rem;
    padding-bottom: 0.5rem;
}

#blog-post h1  {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04rem;
}

#blog-post .meta {
    font-size: 0.7rem;
    padding: 0 auto;
}

#blog-post p {
    font-size: 0.8rem;
    color: black
}

#blog-post span.emoticon { /* emoticons formatted to match text on blog posts... won't be perfect for all of them */
    display: inline-block;
    font-family: retromoticons;
    font-size: 1.8em;
    position: relative;
    top: 0.08em;
    padding: 0 0.15em;
}

/* this is the tag that you click on a blog post to take you to an index of posts with that tag */
.tag {
    display: inline-block;
    
    padding: 0.2rem 0.5rem;
    margin-right: 0.3rem;
    
    cursor: pointer;
    font-size: inherit;
    
    color: navy;
    text-decoration: none;
    font-style: italic;
    font-weight: 400;
}

.tag:hover {
    color: darkorange;
}



/* STYLING BLOG POST 001 (this is an example for future reference, the current styling is filler) */

#blog-post.bp-001 {
    content: ""; /* filler rule */
}

#blog-post.bp-001 header{
    content: ""; /* filler rule */
}



/* STYLING TEXTS PAGE */ 

#texts header { /* all of the stuff above and including the filter buttons */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: whitesmoke;
    padding-top: 3rem;
    padding-bottom: 0.5rem;
}

#texts main p{
    margin: 0;
}

#texts h3 { /* section titles */
    margin: 0 0 0.7rem 0;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.04rem;
    color: black;
    line-height: 1.3rem;
 
}

#texts h4 { /* text titles */
    margin: 0.3rem 0 0.2rem 0;
    font-size: 0.6rem;
    font-weight: 500;
    word-spacing: -0.15rem;
    color: midnightblue;
    line-height: 0.6rem
}

#texts .reviewed h4 { /* reviewed text titles */
    color: firebrick;
}

#texts .reviewed h4:hover {
    color: darkorange;
    cursor: pointer;
}

#texts .books {
    background-color: rgb(241, 240, 240);
    
    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
    border: 0.1rem solid rgb(239, 238, 238);
    border-radius: 0.1rem;
    margin: 0.5rem 0 1.5rem 0;
}

#texts .films {
    background-color: rgb(241, 240, 240);
    
    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
    margin-bottom: 2rem;
    border: 0.1rem solid rgb(239, 238, 238);
    border-radius: 0.1rem;
    margin: 1rem 0 1.5rem 0;
}

#texts .albums {
    background-color: rgb(241, 240, 240);
    
    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
    margin-bottom: 2rem;
    border: 0.1rem solid rgb(239, 238, 238);
    border-radius: 0.1rem;
    margin: 1rem 0 1.5rem 0;
}

/* laying out book covers */
#texts .books article { 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem 1rem;
}

#texts .books article img { /* has something to do with layout */
    flex: 1 1 0;
    min-width: 0;
    height: auto;
}

#texts .books .book { /* has something to do with layout */
    flex: 1 1 120px;
    min-width: 0;
}

#texts .books .book img { /* book covers */
    width: 100%;
    height: auto;
    display: block;
}

#texts .books .book img:hover {
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(199, 66, 22, 0.52);
}

#texts .books p { /* author names */
    color: black;
    line-height: 1;
    font-size: 0.5rem;
}

#texts .reviewed p { /* reviewed author names */
    color: black;
}



/* TEXT POPUPS */
.popup {
    position: absolute;
    width: 20rem;
    max-width: 60vw;
    
    padding: 0;
    
    background-color: #ffebb0;
    border: 1px solid #ffd65d;
    box-shadow: 0 0 0 2.2px gainsboro;

    
    font-size: 0.75rem;
}

.popupheader {
    touch-action: none;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    padding: 0.2rem;
    
    background-color: #ffdc75;
    color: black;
    cursor: move;
}

.popupclose {
    padding: 0 0.1rem;
    margin: 0;
    
    background: none;
    border: 0.5px solid black;
    font-size: 0.5rem;
    line-height: 1;
    cursor: pointer;
    color: black; 
    
}

.popupclose:hover {
    color: firebrick;
}

.popupbody {
    padding: 0 0.4rem 0 0.4rem;
    margin: 0.6rem 0 0.6rem 0;
    
}

.popuptext {
    font-size: 0.6rem;
    line-height: 0.9rem;
    color: black;
}

.popuptitle {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.8rem;
}

.popupauthor {
    font-size: 0.65rem;
    margin-top: 0.3rem;
}

.popupmeta {
    font-size: 0.55rem;
}

.popupdate {
    padding-right: 0.2rem;
}

.popupgenre {
    font-style: italic;
}



/* MEDIA QUERIES */

@media (max-width: 480px) {
    /* increases font size for mobile; decreases margins for mobile*/
    :root {
        font-size: 102%;
        padding-right: -2rem;
    }
    /* decreases side padding for mobile */
    body {
        padding: 0 0.8rem;
    }
    /* decreases top padding for mobile EXCEPT HOME PAGE */
    body:not(#home) header { 
        padding-top: 15px;
    }
    /* decreases top padding for mobile ON HOME PAGE */
    body#home header {
        padding-top: 30px;
    }
    /* decreases gaps between pictures for mobile on TEXTS page */
    #texts .books article {
        gap: 0.8rem 0.5rem;
    }
    /* decreases font size for book titles on TEXTS page for mobile */
    #texts .books .book h4 {
        font-size: 0.6rem;
    }
     #texts .books .book p {
        font-size: 0.4rem;
    }
     #texts h3 {
        font-size: 0.8rem;
        margin: 0 0 0.2rem 0;
    }
}



/* DEBUG RULE 
* {
    outline: 1px solid red !important;
}
*/