/* ==========================================================
   IP2 Classic Sketch – adapted for the static site
   ----------------------------------------------------------
   Author   : Amar Vyas
   Version  : 0.1.0  (Jan 2026)
   ----------------------------------------------------------
   This stylesheet works together with the Sakura CSS framework
   (loaded via CDN) and provides the site‑wide look‑and‑feel:

   • Root variables – colour palette, radii, gaps, fonts
   • Header / navigation (dark‑coffee style)
   • Main container (max‑width, padding)
   • Grid / cards (used for blog listings and portfolio)
   • Hero / featured sections
   • Blockquote, tables, forms, images, etc.
   • Footer (dark coffee again)
   • Responsive break‑points (≤ 979 px & ≤ 679 px)
   • Back‑to‑top button (optional)


   ---------------------------------------------------------- */
:root {
  /* Colour palette --------------------------------------------------- */
  --bg:            #f6f1e7;   /* page background                */
  --ink:           #2b2b2b;   /* primary text colour            */
  --muted:         #5b6770;   /* secondary text / meta          */
  --paper:         #fffaf2;   /* cards, article background      */
  --line:          #e7e0d7;   /* borders, separators            */
  --accent:        #c26a2e;   /* links, hover, accent           */
  --coffee:        #3e2723;   /* header / footer background     */
  --coffee-light:  #5d4037;   /* header/footer bottom border    */

  /* Layout helpers --------------------------------------------------- */
  --shadow:        0 10px 25px rgba(0,0,0,.06);
  --radius:        14px;
  --content:       120ch;      /* max width for long text blocks */
  --gap:           1.25rem;
  --serif:         Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --mono:          ui-monospace, "Courier New", Courier, monospace;
}

/* ------------------------------------------------------------------- */
/* 1️⃣  Global reset & base                                            */
/* ------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Links --------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}
a:hover {
  color: var(--accent);
}

/* Images -------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Helper container – used for the outer wrapper in header/footer */
/* (header.php already gives <header class="container">) */
.container {
  max-width: 1200px;          /* fits the design */
  margin: 0 auto;
  padding: 0 2rem;
}

/* ------------------------------------------------------------------- */
/* 2️⃣  Header & Navigation                                            */
/* ------------------------------------------------------------------- */
header.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;            /* mobile – stack */
  gap: 1rem;
  padding: 2rem 0 2.5rem;     /* vertical rhythm */
  background: var(--coffee);
  border-bottom: 3px solid var(--coffee-light);
  color: #f5f5f5;
}

/* Brand – the Site title inside the header */
header.container h1 {
  margin: 0;
  font-size: 1.6rem;
  font-family: var(--mono);
}
header.container h1 a {
  color: #f5f5f5;
  text-decoration: none;
}

/* Navigation (the <nav> that lives inside the header) */
nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-family: var(--mono);
  font-size: .95rem;
}
nav a {
  padding: .45rem .75rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #f5f5f5;
  transition: all .2s ease;
}
nav a:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ------------------------------------------------------------------- */
/* 3️⃣  Main content area                                              */
/* ------------------------------------------------------------------- */
main.container {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.5rem;
  margin-bottom: 3rem;
}

/* Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: .8rem;
  line-height: 1.2;
}
h1 { font-size: 2.5rem; color: var(--accent); }
h2 { font-size: 2rem;   color: var(--coffee); }
h3 { font-size: 1.5rem; color: var(--muted); }

/* Lists --------------------------------------------------------------- */
ul, ol {
  margin: 1.2rem 0;
  padding-left: 1.5rem;
}
li { margin-bottom: .5rem; }

/* Blockquote ---------------------------------------------------------- */
blockquote {
  border-left: 4px solid var(--accent);
  padding: .5rem 1rem;
  margin: 1.5rem 0;
  background: rgba(194,106,46,.06);
  border-radius: 10px;
  font-style: italic;
}

/* Tables -------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
th, td {
  padding: .75rem;
  border-bottom: 1px solid var(--line);
}
th {
  background: var(--coffee-light);
  color: #fff;
  font-family: var(--mono);
}
tr:nth-child(even) { background: rgba(0,0,0,.02); }

/* Code / pre ----------------------------------------------------------- */
pre, code {
  font-family: var(--mono);
  background: rgba(0,0,0,.04);
  padding: .2rem .4rem;
  border-radius: 4px;
}

/* ------------------------------------------------------------------- */
/* 4️⃣  Card & Grid system (used for blog list, portfolio grid)       */
/* ------------------------------------------------------------------- */
.grid,
.post-grid,
.portfolio-grid {
  display: grid;
  gap: var(--gap);
}

/* 3‑column on large screens, 2‑column on tablets, 1‑column on phones */
@media (min-width: 980px) {
  .grid--cards,
  .post-grid,
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (min-width: 680px) and (max-width: 979px) {
  .grid--cards,
  .post-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 679px) {
  .grid--cards,
  .post-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* Individual card */
.project-card,
.post-card,
.grid-item {
  background: var(--paper);
  border: 2px solid #444;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 1rem;
}
.project-card h3,
.post-card h3,
.grid-item h3 {
  margin: .6rem 0 .2rem;
  font-size: 1.1rem;
}
.project-card p,
.post-card p,
.grid-item p {
  margin: .4rem 0;
  font-size: .95rem;
}

/* Featured / hero image wrappers (used on the home page) */
.hero,
.featured {
  padding: 1.25rem;
  border: 3px solid #333;
  margin-bottom: 3rem;
  background: var(--paper);
}
.hero__media,
.featured img {
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
}

/* ------------------------------------------------------------------- */
/* 5️⃣  Footer                                                         */
/* ------------------------------------------------------------------- */
footer {
  padding: 2rem;
  background: var(--coffee);
  color: rgba(255,255,255,.85);
  text-align: center;
  border-top: 3px solid var(--coffee-light);
  margin-top: 4rem;
}
footer a {
  color: rgba(255,255,255,.9);
}
footer a:hover {
  color: #fff;
}

/* ------------------------------------------------------------------- */
/* 6️⃣  Back‑to‑Top button (optional – just add the element to any page) */
/* ------------------------------------------------------------------- */
#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.85);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#back-to-top:hover {
  transform: translateY(-2px);
  background: #fff;
}

/* ------------------------------------------------------------------- */
/* 7️⃣  Responsive tweaks                                               */
/* ------------------------------------------------------------------- */

/* Small screens – header stacks, nav centres */
@media (max-width: 979px) {
  header.container { flex-direction: column; text-align: center; }
  nav { justify-content: center; }
}

/* Extra‑tight mobile – reduce paddings */
@media (max-width: 679px) {
  .container { padding: 0 1rem; }
  main.container { padding: 1.5rem 1rem; }
  .project-card,
  .post-card,
  .grid-item { padding: .75rem; }
}

/* ------------------------------------------------------------------- */
/* 8️⃣  Print stylesheet (very light)                                    */
/* ------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  header, nav, footer, #back-to-top { display: none; }
  main.container { box-shadow: none; padding: 0; }
}

/* ------------------------------------------------------------------- */
/* 9️⃣  Accessibility helpers                                           */
/* ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #1a1a1a;
    --ink:           #e0e0e0;
    --muted:         #a0a0a0;
    --paper:         #2d2d2d;
    --line:          #444;
    --accent:        #ff9f4b;
    --coffee:        #2c1a18;
    --coffee-light: #4e342e;
  }
}

/**Style-css-old**/

/*cstyle.css*/
/*Header and Navbar at top */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  
  /*body styling */
           body {
        font-family: Arial, Helvetica, sans-serif;
    }
   p.normal {
        font-style: normal;
    }
    p.italic {
        font-style: italic;
    }
    p.oblique {
        font-style: oblique;
    }
      p{
        font-weight: inherit;}
h1 {
    font-size: 2em;    /* 32px/16px=2em */
  color: green;
}
p {
    font-size: 1.075em;    /* 14px/16px=0.875em */
}
        :root {
  --accent: turquoise;
    }

        .gradient {
                width: 100%;
                height: 300px;
          /* Fallback for browsers that don't support gradients */
                background: red;
                /* For Safari 5.1 to 6.0 */
                background: -webkit-linear-gradient(left, blue, orange);
                /* For Internet Explorer 10 */
                background: -ms-linear-gradient(left, blue, orange);
                /* Standard syntax */
                background: linear-gradient(to right, blue, orange);
        }

/*Second gradient*/
.gradient2 {
                width: 80%;
                height: 500px;
                /* Fallback for browsers that don't support gradients */
                background: red;
                /* For Safari 5.1 to 6.0 */
                background: -webkit-radial-gradient(lime, orange, blue);
                /* For Internet Explorer 10 */
                background: -ms-radial-gradient(lime, orange, blue);
                /* Standard syntax */
  background: radial-gradient(lime,orange,blue);
   }

}

.posts div { margin: 1rem 0;}

#summary {
  display: inline-block;
  text-decoration: underline;
  text-decoration-style: dotted;
}

#detail {
    display:none;
  width: 25rem;
  padding: 1rem;
  border-radius: 8px;
  position: absolute;
  top: 16rem;
  left: 0;
  margin: 0 calc(50vw - 35ch);
  background-color: var(--bg-mid);
}

/* Show the tooltip text when you mouse over the tooltip container */
#summary:hover + #detail {
    display:block;
}

body{
  color:#fff;
  background:#1c1c1c;
  margin:1em auto;
  padding:1em;
  max-width:55em;
  font:14px monospace;
}

a {
  color: #bb6767;
  text-decoration: none;
}

a:active,a:hover,a:focus {
  color: #eaeace;
  text-decoration: none;
}

ul {
  list-style: '• ';
}

.code {
  color: #bbbbbb;
  font-size: 14px;
  padding: 2px 0px;
  margin-top: 1px;
}

.colon {
  width: 110px;
  display: inline-block;
}

.footer p {
  line-height: 15px;  
  margin: 5px 0;
}


/*xkon*/
body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:16px;font-weight:300;margin:1rem}a,a:active,a:visited{color:#9b4dca}header .container{margin-top:2.5rem;text-align:center}main{margin-top:2.5rem}footer{margin-bottom:2.5rem}.container{max-width:50rem;margin:0 auto}.skiplink{left:-999999px;top:1rem;position:absolute;background:var(--color-black);color:var(--color-white);padding:1rem}.skiplink:focus{left:0}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}.bar-divider{background-color:#9b4dca;height:4px;margin-top:2.5rem;margin-bottom:2.5rem}.tattoo-gallery img{margin-top:1rem;margin-bottom:1rem;max-width:100%}body.dark{background-color:#000;color:#fff;}