:root {
  --header-bg: url('images/header.gif');
 --site-bg: url("assets/tiles/IMG_1279.png"); /* background tile */
  --bg-overlay: rgba(0, 0, 0, 0.2);       /* bottom-up gradient overlay */
  --accent-color: #ffe600;
  --select-color: #803131;
  --link-color: #ffe600;
  --bg-color: #000000;
  --bg-color2: rgb(0, 0, 0);
  --text-color: #ffffff;
  --border-color: #ffae00;
  --post-header-color: white;
  --post-shadow-color: #00000060;
  --outline-color: #ff0000;
  --outline-color2: #feffce;
}

/* ==============================
   Reset and fonts
   ============================== */
* {
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
}

/* Selection colors */
::selection {
  background: var(--select-color);
  color: var(--border-color);
}

/* ==============================
   Background with gradient + blur
   ============================== */
body {
  margin: 0;
  position: relative;
  color: var(--text-color);
  font-weight: normal;
  font-size: 16px;
}

body::before {
  content: "";
  position: fixed;       
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  /* Tile + bottom-up gradient */
  background-image: 
    linear-gradient(to top, var(--bg-overlay), rgba(0, 0, 0, 0.438)), 
    var(--site-bg);
  background-repeat: no-repeat, repeat;
background-size: cover, 256px 256px;
  background-blend-mode: multiply;

  /* Optional blur on background only */
  filter: blur(.3px);
}

/* line spacing  */
p {line-height: 1.3em;}

h1 {
    font-size: 1.em;
    color: var(--post-header-color);
    filter: drop-shadow(2px 0 0 var(--outline-color)) drop-shadow(0 2px 0 var(--outline-color)) drop-shadow(-2px 0 0 var(--outline-color)) drop-shadow(0 -2px 0 var(--outline-color))drop-shadow(0 1px 1px var(--outline-color2)) drop-shadow(1px 0 1px var(--outline-color2));
}
h4,
h5,
h6 {color: var(--border-color);}

header {
    background-color: var(--accent-color);
    background: var(--header-bg);
    background-size: contain;
    background-position: center;
    min-height: 200px;
    margin: 0 auto;
    border-top: 12px solid var(--bg-color2);
    border-bottom: 12px solid var(--bg-color2);
  animation: scroll-bg 20s linear infinite;
}
@keyframes scroll-bg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0; /* scroll to left */
  }
}
/* this is your site title displayed at the top of the page */
header > h1 {
    background-color: var(--bg-color2);
    color: var(--border-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(--outline-color);
/*normal headers have a filter, so we gotta turn it off for this special heading*/
    filter: none;
/* you can change the text-align to center or right if you want it placed differently */
    text-align: center;
}

/*this is for lists*/
li {
/*you can change the normal dot to anything you want :)*/
    /*list-style-type: "💙 ";*/
/*i used a flower since i already drew it for another page haha*/
    list-style-image: url("images/cross.gif");
}

nav {margin: 1em;}

nav > ul {
    max-width: 960px;
    margin: auto;
    line-height: 3rem;
/* this line takes away the dot in front of the list items */
    list-style-type: none;
/* list items have default padding but we don't need it for these */
    padding-left: 0;
/* and this spaces out the buttons so they're not touching */
    justify-content: space-evenly;
}
nav li {
    text-align: center;
    list-style-image: none;
}
nav li > a {
    font-weight: bold;
    background-color: var(--bg-color);
    border: 4px double var(--outline-color);
    padding: .5em 3em;
/* this takes away the link underline */
    text-decoration: none;
}
nav li > a:visited {color: var(--link-color);}
nav li > a:hover {
    color: var(--accent-color);
    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(--accent-color);
    border-color: var(--accent-color);
    transition: .2s ease;
}

#sidebar {
    background-color: var(--bg-color2);
    color: var(--border-color);
    height: fit-content;
    min-width: 320px;
    margin-top: 1em;
    margin-right: 2em;
    border-radius: .5em;
}
.small-box {
    max-width: 240px;
    margin: auto;
    border: 2px solid var(--bg-color);
/*i gave this one small text cuz i think it looks cute, but you can remove this line to make it normal*/
    font-size: 11px;
/*making sure the list items are spaced correctly cuz it's hard to read when they're squished together*/
    line-height: 1.5rem;
}

#avatar {
    margin: .5em;
/*this line will limit the image size if you decide not to use the flower shape below*/
    max-width: 320px;
}
/*flower shape generated from here: https://css-generators.com/flower-shapes/ */
.flower {
    width: 295px;
    aspect-ratio: 1;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    background-image: url('images/icon.gif');
    background-size: cover;
    background-position: center;
}


#bio {
    margin: 20px;
    padding: .2em;
    background: var(--bg-color);
    border: 4px double var(--bg-color2);
    border-radius: 2em;
/*made the text slightly smaller again here since periwinkle's bio was a little lengthy*/
    font-size: small;
}
#bio p { margin: 1em; }

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

main {
    padding: 1em;
}

/*this is the top post on the blog. you can treat it like a pinned post if you want!*/
#top {
    background-color: var(--bg-color);
}
/*this bit gives it a white background*/
#top section {
    background-color: var(--bg-color2);
    border-radius: .5em;
    margin-bottom: 10px;
    padding: .2em 1em;
    width: fit-content;
}

/*these are the regular blog post styles!*/
article {
    background-color: var(--bg-color2);
    padding: 1em;
    border: 2px solid var(--border-color);
    border-radius: .3em;
    margin-bottom: 1em;
    box-shadow: var(--post-shadow-color) 5px 5px;
}
article img {
/*make sure large images get resized to fit in the post*/
    max-width: 100%;
}

/*you should always use this line if you have details/summary blocks cuz it makes it more obviously clickable*/
details > summary {cursor:pointer;}

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

/*this is the top line for each post, with the name on the left and date/time on the right*/
/*you can put a post title instead of a name/handle, i just set it up that way as an example haha*/
.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;
}

/*these set up tumblr-style photoset grids*/
.photosetx2,
.photosetx3 {
    display: grid;
    gap: 4px;
    align-items: center;
}
.photosetx2 {grid-template-columns: 1fr 1fr;}
.photosetx3 {grid-template-columns: 1fr 1fr 1fr;}
/*adjust this to your liking! it crops images that are too tall*/
.cropped {
    width: 156px;
    height: 156px;
    overflow: hidden;
    object-position: 25% 25%;
}
/*this makes sure the image doesn't get distorted when cropped*/
.photosetx2 img,
.photosetx3 img {object-fit: cover;}

/* a class for centering text and images */
.center { text-align: center; }
.img-right { float: right; }

/*this 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, or make a class like this. up to you!*/
.small-text {
    font-size: 11px;
/*i gave it a shadow cuz i think it looks nice... yayyy*/
    text-shadow: var(--bg-color) 1px 1px;
}

footer {
    text-align: center;
    font-size: small;
    margin: auto;
    padding: .5em;
    background: var(--bg-color2);
}

/* these are the mobile styles! */
@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;
    }
}
.jerky {
  display: inline-block; /* Important for transform to work nicely */
  animation: jerky 0.5s infinite;
}

@keyframes jerky {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  51% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}
.clock {
  font-family: "courier new", sans-serif;
  text-align: center;
  color: var(--text-color, #fff);
  font-size: 14px;         /* smaller so it fits with the small-box theme */
  margin-top: 8px;         /* a bit of spacing from the list */
}
/* centers and bolds both the label and the time */
.time-label {
  text-align: center;   /* centers the whole line */
  font-weight: bold;    /* makes both text and time bold */
  margin-top: 10px;     /* optional spacing */
  color: var(--text-color, #fff); /* keeps it visible */
}
.widget-container {
  text-align: center; /* centers inline/inline-block elements horizontally */
}

.status-box {
  max-width: 240px;              /* optional width */
  margin: 1em auto;              /* center horizontally */
  padding: 10px;                 /* space around the widget */
  background-color: black;       /* box color */
  color: white;                  /* text color */
  border: 2px solid var(--border-color); /* optional border */
  border-radius: 10px;           /* rounded corners */
  text-align: center;            /* center content */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* optional shadow */
}
.blog-page nav > ul {
    display: flex;            /* horizontal layout */
    flex-wrap: wrap;          /* allow wrapping if too many items */
    justify-content: center;  /* center the nav items */
    gap: 1em;                 /* spacing between buttons */
    padding-left: 0;          /* remove default ul padding */
    list-style: none;         /* remove bullets */
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 1em 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
}

.photo-grid img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.photo-grid img:hover {
  transform: scale(1.05);
}
/* Modal (full-res image view) */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.85);
}

.modal-content {
  display: block;
  margin: 60px auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
}

#caption {
  margin: 10px auto;
  padding: 10px;
  max-width: 80%;
  color: #fff;
  font-size: 18px;
  font-style: italic;
  text-shadow: 1px 1px #000;
}

/* Close button */
.close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close:hover {
  color: #7369ff;
}
/* Art Page Skeleton */
body.art-page {
  --header-bg: url('assets/header/art.gif');

  /* Font stack variables */
  --font-display: "Courier New", Courier, monospace;/* artistic serif for headers */
  --font-sans: "Courier New", Courier, monospace;;    /* clean sans for body text */
  --font-mono: "Courier New", Courier, monospace;;                          /* optional: for captions or details */

  /* Font sizing scale */
  --fs-xl: clamp(2rem, 5vw, 3.2rem);   /* page title */
  --fs-lg: clamp(1.5rem, 3vw, 2.2rem); /* section headers */
  --fs-md: 1.125rem;                   /* subheadings / body large */
  --fs-base: 1rem;                     /* normal text */
  --fs-sm: 0.875rem;                   /* captions / fine print */

  /* Line height & letter spacing */
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --tracking-wide: 0.03em;
}

/* Global font application  FOR ART PAGE DUH*/
body.art-page {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: #f5f5f5;
  background-color: #ffffff;
}


body.art-page h1, 
body.art-page h2, 
body.art-page h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  color: #ffffff;
    text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
}

body.art-page h1 { font-size: var(--fs-xl); }
body.art-page h2 { font-size: var(--fs-lg); }
body.art-page h3 { font-size: var(--fs-md); }


body.art-page p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  margin-bottom: 1em;
  color: #e5e5e5;
}

body.art-page figcaption,
body.art-page small {
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: #b3b3b3;
  line-height: 1.3;
    text-align: center;
}


body.art-page nav a,
body.art-page .btn {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

/* Optional accent color for hover or highlights */
:root {
  --accent: #eab308; /* gold / yellow accent */
}

a:hover, .btn:hover {
  color: var(--accent);
}


body.blog-page {
    --header-bg: url('assets/header/blog.gif');
}
/* Zines container */
.zines-wrap { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 2rem; }
.zines-wrap h3 { margin: 0 0 .5rem; }

/* Individual zine */
.zine { display: grid; gap: .6rem; }
.zine .zine-title { font-weight: 800; margin: 0; }

/* Reusable viewer styles */
.viewer {
  position: relative; overflow: hidden; border-radius: 12px; background: #111318;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.pages {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.page { scroll-snap-align: center; display: grid; place-items: center; padding: .75rem; }
.page figure { margin: 0; width: 100%; max-width: 900px; border-radius: 12px; overflow: hidden;
  background: #0b0c10; border: 1px solid rgba(255,255,255,.06);
}
.page img { width: 100%; height: auto; object-fit: contain; }
.caption { padding: .5rem .75rem .75rem; color: #9ca3af; font-size: .95rem; }

/* Controls */
.controls { display: flex; align-items: center; justify-content: center; gap: .6rem 1rem; flex-wrap: wrap; }
.btn { appearance: none; border: 0; background: #1f2937; color: #fff; padding: .6rem .9rem;
  border-radius: 999px; cursor: pointer; font-weight: 600; letter-spacing: .2px;
}
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.page-indicator { color: #ffffff; font-variant-numeric: tabular-nums; }
/*ABOUT PAGE SHIT */

body.about-page article#top {
  position: hidden;
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: #111;
  color: #f5f5f5;
  border-radius: 12px;
  line-height: 1.6;
}

/* the text itself */
body.about-page article#top h4 {
  margin-top: 0;
  font-size: 1.2rem;
  font-family: "Courier New", Courier, monospace;
}

/* avatar container */
body.about-page #avatar {
  float: right;            
  margin: 0 0 0.75rem 1.25rem; 
}
body.about-page #avatar img.flower {
  width: 200px;            
  height: auto;
  border-radius: 50%;       
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* responsive*/
@media (max-width: 480px) {
  body.about-page #avatar {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    text-align: center;
  }
}