/* all screen sizes */

/* colors and fonts */
:root {
    /* Fonts */
    --bodyfont: sans-serif;
    --headerfont: monospace;

    /* Main colors */
    --bg-image: url("https://file.garden/aXuNSUzen0_D9MSz/kit/IMG_B9FC89D10C87-1.jpeg");
    --background:#f7f6e8; 
    --color:#4d0010;
    --block:#d2fad4; 
    --lines:#85daad; 
    --shadow:#fa7298; 
    --accent:#fff7c1; 

    --link:#034d21;
    --linkhover:#d60861;

    --h1:#4d0010;
    --h2:#4d0010;
    --h3:#4d0010;
    --h4:#4d0010;

    --sidebar:#ffd1e3;
    --sidebarhighlight:#ffe6f0;
    --sidebarcolor:#4d0010;
    --title: #4d0010;
    --sidebarlink: #685d4f;
    --sidebarlinkhover:#d6083a;

    --menucolor:#1a6b5f;
    --menucolorhover:#f1459b;

    --tape: #a1e2bc;
    --tape-edge: #32ae6c;
}
:root[data-theme="dark"]{
  --background: #0f0f14;
  --bg-image: url("https://file.garden/aXuNSUzen0_D9MSz/IMG_B9FC89D10C87-1-modified.jpeg");
  --color: #fff9c2;
  --block: #1c1c25;
  --lines: #2a2a3a;
  --shadow: #a05083;

  --h1:#d8477f;
  --h2:#d8477f;
  --h3:#d8477f;
  --h4:#d8477f;

  --link: #ce5d8f;
  --linkhover: #a0507b;

  --sidebar: #42112a;
  --sidebarcolor: #fff9c2;
  --title: #fff9c2;

  --menucolor: #fc74a6;
  --menucolorhover: #fe3186;

  --accent: #d77fa2;
  --tape: #ce5d8f;
  --tape-edge: #f54399;
}
* { margin:0; padding:0; }

/* loading animation */
#content,
#post {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(1px);
  transition:
    opacity 1.0s ease,
    transform 1.0s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.0s ease;
}

body:not(.loading) #content,
body:not(.loading) #post {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* main body styling */
body {
    background-image: var(--bg-image);
    background-color: var(--background);
    background-attachment:fixed;
    font:1rem var(--bodyfont);
    color:var(--color);
}

/* rounded corners */

.article-content, #sidebar-content, #main-footer {
    border-radius:20px;
}

.article-content img {
  border-radius: 12px;
}

/* sidebar styling */

#sidebar-content {
    background: var(--sidebar);
    color: var(--sidebarcolor);
    padding:10px;
    border:1px solid var(--linkhover);
    box-shadow:5px 5px 0 var(--shadow);
}

.sidebar-columns {
    display:flex;
    gap:10px;
}

#sidebar-content header {
    color:var(--title);
    font:1.5em var(--headerfont);
    margin:8px 0 8px 0;
}

#sidebar-content p a {
    color:var(--sidebarlink);
}

#sidebar-content p a:hover {
    color:var(--sidebarlinkhover);
    transition:0.5s ease;
}

#sidebar-content { position: relative; }

.sticker{
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-block;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--accent);
  border: 1px solid var(--linkhover);
  box-shadow: 3px 3px 0 var(--shadow);
  transform: rotate(7deg);
  text-decoration: none;
  color: inherit;
}
.sticker:hover{
  transform: rotate(0deg) scale(1.03);
  transition:0.5s ease;
}


/* dark theme toggle */
:root[data-theme="dark"] .float-btn { color: var(--color); }


.icon {
    margin:auto;
}

.icon img {
    border-radius:10px;
    width:90px; 
    height:auto; 
}

/* Styling for the menu */

#main-menu {
    font:1.1em var(--headerfont);
    width:100%;
    margin-top:20px;
}

#main-menu ul {
    list-style:none;
}

#main-menu li {
    display:inline-block;
}

#main-menu li a {
    padding:3px;
    color:var(--menucolor);
    text-decoration:none;
    transition:0.5s ease;
    border-bottom:1px solid;

}

#main-menu li a:hover, #main-menu li a:focus {
    color:var(--menucolorhover);
    transition:0.5s ease;
}

/* Content styling */

main {
    margin-top:20px;
}

/* Styling for blocks */

main .post {
    margin-bottom:28px;
    width:100%;
}

.article-content, #main-footer {
    padding:22px;
    width:calc(100% - 44px);
    border:1px solid var(--linkhover);
    box-shadow:5px 5px 0 var(--shadow);
    background:linear-gradient(var(--block) 0px, var(--block) 30px, var(--lines) 31px);
    background-size:100% 32px;
}

.article-content {
  position: relative;
}

/* Heart permalink */
.permalink-heart{
  position: absolute;
  bottom: 20px;
  right: 10px;

  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  border: 1px solid var(--linkhover);
  background: var(--accent);
  box-shadow: 2px 2px 0 var(--shadow);

  text-decoration: none;
  color: inherit;
  font-size: 16px;
}

.permalink-heart:hover{
  transform: translateY(-2px);
}

.main-footer {
  padding: 22px;
  width: calc(100% - 44px);
  border: 1px solid var(--linkhover);
  box-shadow: 5px 5px 0 var(--shadow);

  background: var(--sidebar);
  text-align: center;
}



main h1 {
    font:1.8em var(--headerfont);
    color:var(--h1);
}

main h2 {
    font:1.5em var(--headerfont);
    color:var(--h2);
}

main h3 {
    font:1.3em var(--headerfont);
    color:var(--h3);
}

main h4 {
    font:1em var(--headerfont);
    font-style:italic;
    color:var(--h4);
}

p {
    line-height:1.5;
    margin:10px 0 10px 0;
}

main a {
    color:var(--link);
    transition:0.5s ease;
}

main a:hover, main a:focus {
    color:var(--linkhover);
    transition:0.5s ease;
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}

main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main pre {
    background:var(--lines);
    padding:10px;
    margin:5px;
    border-radius:5px;
    max-width:600px;
    max-height:300px;
    overflow:auto;
}

main input, textarea, select, button { 
    background: var(--block);  
    color: var(--color);
    font: 1rem var(--bodyfont); 
    border: 1px solid; 
    padding: 8px; 
    margin: 2px;
}

main details {
    background: var(--lines);
    padding:10px;
    margin:5px;
    border-radius:5px;
}

main details summary {
    cursor: pointer;
}

.article-footer {
    margin-top:15px;
}

.tag {
    display:inline-block;
    background: var(--accent);
    padding:5px;
    border-radius:3px;
    box-shadow:2px 2px 0 var(--shadow);
    border:1px solid var(--linkhover);
    margin:0.25em 0 0.25em 0;
    margin-top: 12px;
    text-decoration: none;
    color: inherit;
}

.tag:hover {
  cursor: pointer;
}

.date {
    display:inline-block;
    background: var(--sidebar);
    padding:5px;
    border-radius:3px;
    box-shadow:2px 2px 0 var(--shadow);
    border:1px solid var(--linkhover);
    margin:0.25em 0 0.25em 0;
}

#main-footer {
    text-align:center;
}

.tape::before {
    content:"";
    display:block;
    height: 30px;
    margin:-28px auto 5px auto;
    width: 50%;
    max-width:150px;
    background-color: var(--tape);
    border-right: 1px dotted var(--tape-edge);
    border-left: 1px dotted var(--tape-edge);
    opacity: 0.5;
    box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
}

#pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-bottom: 80px;
}

#pagination a {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--linkhover);
  border-radius: 8px;
  background: var(--block);
  text-decoration: none;
  color: inherit;
  box-shadow: 2px 2px 0 var(--shadow);
}

#pagination a[aria-current="page"] {
  background: var(--accent);
}


/* mobile/small screens */

/* Container styling */
#container {
    width: calc(100% - 40px);
    padding:20px;
    margin-top:10px;
}

#sidebar-content {
    width: calc(100% - 20px);
}

#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}


/* desktop/big screens */

@media screen and (min-width: 800px) {
    #container {
        max-width:1100px;
        width:90%;
        display:flex;
        gap:20px;
        margin:25px auto;
    }

    main {
        margin-top:10px;
        flex: 0 0 540px;
        max-width: 540px;
    }

    #sidebar {
        flex: 0 0 280px;
        max-width: 280px;
        margin-top:10px;
    }


    .icon {
        margin-top:-35px;
        margin-left:-40px;
    }

    #sidebar-content {
        position:sticky;
        top:40px;
    }

    .sidebar-columns {
        display:block;
    }

    main {
        flex: 1 1 calc(70% - 30px);
    }
    
    .article-footer {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .tag, .notes {
        margin-top: 12px;
    }
}

/* --- templates --- */
.tmpl-caption img,
.tmpl-split img,
.tmpl-carousel img {
  max-width: 100%;
  display: block;
  border-radius: 10px;
}

.tmpl-caption figcaption {
  margin-top: 10px;
  font-style: italic;
  opacity: 0.9;
}

.tmpl-split {
  border-radius: 10px;  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  
}

@media (max-width: 600px) {
  .tmpl-split { 
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.tmpl-note {
  padding: 14px 16px;
  border: 1px solid var(--linkhover);
  border-radius: 16px;
  background: rgba(255, 145, 217, 0.449);
}
.tmpl-note .note-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  opacity: 0.85;
  margin-bottom: 8px;
}
.tmpl-note .note-handle {
  font-family: var(--headerfont);
}
.tmpl-note .note-time {
  font-size: 0.9em;
}

.tmpl-article h2 {
  margin-top: 0;
}
.tmpl-article .lede {
  font-size: 1.05em;
  opacity: 0.95;
}

.tmpl-carousel {
  position: relative;
  border-radius: 16px;
  overflow: hidden; 
  border: 1px solid var(--linkhover);
  background: rgba(0,0,0,0.03);
}
.tmpl-carousel .carousel-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.tmpl-carousel .carousel-slide {
  min-width: 100%;
}
.tmpl-carousel .carousel-slide img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.tmpl-carousel .carousel-ui {
  position: absolute;
  inset: auto 10px 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.tmpl-carousel button {
  cursor: pointer;
  border: 1px solid var(--linkhover);
  background: var(--block);
  color: var(--color);
  padding: 8px 10px;
  border-radius: 999px;
}

.tmpl-carousel .carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex: 1;
}
.tmpl-carousel .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1px solid var(--linkhover);
  background: rgba(255,255,255,0.6);
}
.tmpl-carousel .dot.is-active {
  background: var(--linkhover);
}

.tmpl-carousel .carousel-ui {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tmpl-carousel:hover .carousel-ui {
  opacity: 1;
}

.tmpl-carousel:focus-within .carousel-ui {
  opacity: 1;
}

@media (hover: none) {
  .tmpl-carousel .carousel-ui { opacity: 0.6; }
}
#lightbox{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  padding: 20px;
}

#lightbox.is-open{ display: grid; }

#lightbox-img{
  max-width: min(92vw, 900px);
  max-height: 88vh;
  border-radius: 16px;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
}

#lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--linkhover);
  background: var(--block);
  color: var(--color);
  font-size: 24px;
  cursor: pointer;  
}

#lightbox-close button{
  place-items: center;
}

.float-actions{
  position: fixed;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 9999;
}

.float-btn{
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--linkhover);
  background: var(--accent);
  box-shadow: 2px 2px 0 var(--shadow);
  text-decoration: none;
  color: inherit;
  font-family: var(--headerfont);
}
.float-btn:hover{ transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  #content, #post {
    transition: none;
    transform: none;
    filter: none;
  }
}