/*
Change these options to customize the color scheme and a few layout options of your website.
Most layout options are provided by the comic_git_engine by files in the `css/` directory.
I do not recommend messing with those settings unless you know what you're doing, or you're
willing to spend a lot of time on trial and error.

For any colors, you can represent them in hexadecimal like this (#FF0000 = red)
or use this list of available color names: https://www.w3schools.com/cssref/css_colors.asp
 */

/* Variables */

:root {
    --main-accent-color: #453130;
    --secondary-accent-color: #785346;
    --decoration-color: #9c9090;
    --clampx: clamp(0px, 6vw, 100px);
}

/* Global values */
body {
    font-family: 'Luxurious Roman', sans-serif;  /* The font of all the text on all pages */
    color: var(--main-accent-color);  /* The color of the font of all of the text on your whole website, except links.
                      If you want to change the color of text in certain parts of the page, and not the whole site,
                      you can define `color` in other blocks and it will only apply to that element and all
                      of the elements it contains. */
    background-color: white;  /* The color of the background behind everything */
    background-image: url("../../../images/meander bg.png");  /* The pattern on the background. Delete to change to a solid color
                                                                       or replace with your own image to tile across your background. */
}

h1, h2, h3 {
    font-family: 'Poltawski Nowy', cursive;
    letter-spacing: 0.03em;
}

a {
    color: var(--main-accent-color);  /* The color of the hyperlinks */
    text-decoration: underline var(--secondary-accent-color);
}

#container {
    width: 1000px;  /* The width of the main box that contains all content on the pages */
    background-color: white;  /* The background color of the main box */
    box-shadow: 5px 5px 10px var(--decoration-color);  /* This is the drop shadow of the main box. If you change the background color
                                            of your website, play with this or else it will look bad. */
}

/* Stack children on the same grid cell */
#banner {
    margin-bottom: 0;
    display: grid;
    background-image: url("../../../images/banner-fg.png"), url("../../../images/banner-mg.png"), url("../../../images/banner-bg.png");
    background-repeat: no-repeat, no-repeat, no-repeat;
    height: 340px;
    width: 100%;
    background-size:
        120% auto, cover, 120% auto;
  /* bg drifts, mid fixed center, fg drifts opposite */
    background-position:
        calc(50% - var(--clampx)) 100%, /* FG: start bottom-center, drift opposite */
        left,                           /* MID: fixed center */
        calc(50% + var(--clampx)) 110%;
    transition: background-position 150ms ease-out;
}

/* Put both elements in the same grid area (layered) */
#banner > * { grid-area: 1 / 1; }

/* Make the image define the size */
#banner-img-link {
    align-self: stretch;
    justify-self: stretch;
    display: block;
}

/* Bottom-center overlay */
#post-schedule {
  align-self: end;
  justify-self: center;
  margin-bottom: clamp(6px, 1.2vw, 12px);

  /* Styling for readability */
  pointer-events: none;            /* don't block clicks to the link */
  padding: .35rem .6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--main-accent-color) 45%, transparent);
  color: white;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  line-height: 1;
    letter-spacing: .06em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);      /* pretty on modern browsers */
}

@media (prefers-reduced-motion: reduce) {
  #banner { background-position: 50% 100%, 50% 50%, 50% 0%; }
}

/* Top navigation links bar */
#links-bar {
    background-color: var(--main-accent-color);  /* The background color of your links bar */
    color: var(--decoration-color);
}

.link-bar-separator {
    margin-top: .25em;
}

a.link-bar-link {
    color: white;  /* The color of the links in your links bar */
    font-family: "Charm", cursive;
    letter-spacing: 0.05em;
    font-size: 1.2em;
    /*font-weight: bold;  !* Delete this to unbold the links in your links bar*!*/
    text-decoration: none;  /* Delete this line to put underlining on the links in your links bar */
}

a.link-bar-link:hover {
    color: var(--decoration-color);  /* The color of the links in your links bar while the cursor is hovering over them */
}

/* Comic navigation buttons */
a.navigation-button {
    color: var(--secondary-accent-color);  /* Color of the navigation bar hyperlinks */
    font-size: 2em;  /* Size of the navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your navigation links to be underlined */
    font-family: 'Charm', fantasy;
}

a.navigation-button-disabled {
    color: gray;  /* Color of the disabled navigation bar hyperlinks */
    font-size: 2em;  /* Size of the disabled navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your disabled navigation links to be underlined */
    font-family: 'Charm', fantasy;
}

/* Buttons: turn any link into a button by adding class="button" within the <a> tag */
.button {
    background-color: var(--secondary-accent-color);  /* Color of button hyperlinks */
    color: white;  /* Color of the words in button hyperlinks */
}

.button:hover {
    background-color: var(--decoration-color);  /* Color of button hyperlinks when the mouse hovers over it */
    color: white;    /* Color of the words in button hyperlinks when the mouse hovers over it */
}

/* The blue background with the dotted borders that shows up on most pages. */
#blurb {
    width: 75%;  /* The maximum width of the blurb box. */
    text-align: center;
    color: var(--main-accent-color);
}

/* This is just some code to make monospaced text a little more readable */
code {
    font-size: 120%;  /* Make the text a little bigger */
    background-color: #F0F0F0;  /* Give it a very light gray background */
    border: 1px solid gray;  /* Give it a gray border... */
    border-radius: 5px;  /* ... with rounded corners. */
    padding-left: 5px;  /* A little padding between the text and the border on the left... */
    padding-right: 5px;  /* ... and the right. */
    white-space: pre; /* Prevents code blocks from being word-wrapped */
}

#post-title {
    color: var(--main-accent-color);  /* Color of the post title */
    font-size: 0.8em;  /* Font size of the post title */
    font-family: 'Charm', cursive;
}

#post-date {
    font-style: italic;
    font-size: 0.8em;
    color: var(--secondary-accent-color);
}

#storyline, #characters, #tags {
    font-style: italic;  /* Delete this to unitalicize the tags */
}