/* RegularScreen.
<--LandscapeView----->
<-------------------->
<-------------------->
<--------------------> */

* {--co-one: #D1BEA8;
--co-two: hotpink;
--co-three: midnightblue;
--co-four: green;
--co-five: white; /* (for plain text, along with bold). */
--co-six: transparent; /* (for nav-bg region; link-bottom on hover). */
--co-seven: #e0e0e0; /* (for nav-links; soft white gray). */
--co-eight: gray;
--co-nine: lightGreen;
--co-ten: transparent; /* (for nav-bg region; link-bottom on hover). */
--co-h1: black; /* (for h1 title). */
--co-co: black;
--co-li: white; /* (for links). */ }
/* campblue #1b1b32; consoleblue #0A0A23; #2A2A40 or #2A2B40; */

/* Setting base font size of 10px makes easy rem calculations;
Info: 1rem = 10px, 1.7rem = 17px, 2rem = 20px */

:root { font-size: 10px }
* { font-family: sans-serif;
color: var(--co-co);
background-color: var(--co-one);
box-sizing: border-box;
overflow-x: hidden; }

/* Nav area with both logo and navigation.
<-------------------->
<-------------------->
<--------------------> */

/* ---- Logo Base (desktop/tablet) ---- */
.logo { margin: 0.4% 0.8%; padding: 0.4%;
background: transparent;
  display: inline-block;   /* avoids baseline clipping */
  overflow: visible;       /* never crop the image */
  line-height: 0;          /* removes extra inline height */ }

.logo a { display: inline-flex;    /* helps with vertical centering if used in a nav */
background: transparent;
  align-items: center;
  text-decoration: none; }
  
/* Keep the logo from making the bar tall */
.logo img { background: transparent;
  display: block;
  max-height: 56px;             /* adjust this number to set bar height */
  height: auto;
  width: auto;
  object-fit: contain;
  line-height: 0; }

/* --- Header layout: logo + nav on one line --- */
.top {
  position: relative; /* needed for absolute pseudo-element positioning */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  /* position: sticky; top: 0; */
  z-index: 0; /* ensures pseudo-element can sit behind content */
}

.top::before {
  content: "";
  position: absolute;
  inset: 0; /* cover entire .top area */
  background-image: url("../image/pngs/forest.png");
  background-repeat: repeat-x;
  background-size: cover;
  background-position: top;
  opacity: 0.8; /* 0 = fully transparent, 1 = fully opaque */
  z-index: -1; /* push behind logo/icons/text */
}



/* --- NAVBAR --- */
div.nav {
  display: flex;
  align-items: center;          /* keeps items vertically centered */
  gap: 12px;                    /* space between items */
  margin: 0;                    /* remove % margins that push things around */
  padding: 0;                   /* keep it tight */
  max-width: none;              /* let it use space */
  background: transparent;      /* remove background box unless you want it */
  flex: 1 1 auto;               /* take remaining row space */
  justify-content: flex-end;    /* push links to the right */
}

/* Each item is a tight flex row: icon + label */
div.rotate {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  font-size: 1.05rem;           /* was 1.7rem -> huge; shrink to reduce height */
  line-height: 1.1;             /* tighter vertical rhythm */
}

/* Make the anchor the clickable row */
div.rotate > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;                     /* space between icon and text */
  padding: 6px 10px;            /* small, consistent hit area */
  text-decoration: none;
  color: var(--co-seven);
  background: transparent;
  border-bottom: none;
}

/* Icons */
.icon { width: 20px;                  /* smaller icon lowers height */
  height: auto;
  display: block;
  background: transparent; }

/* Hover animation stays, but avoid background/padding growth */
div.rotate:hover img { animation: scale 2s linear 1; }
div.rotate:hover,
div.rotate:hover a,
div.nav a:hover {
  background: transparent;
}

/* Keep your keyframes */
@keyframes scale {
  0%   { transform: scale(1) rotate(0); }
  50%  { transform: scale(1.34) rotate(-10deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Body coloration avoided */
.top, .top .nav, .top .logo {
background: transparent !important;
background-image: none !important; }
/* (since JS nav; force horizontal nav regardless of extra wrappers/tags) */
.top .nav { display: flex !important;
align-items: center;
gap: 14px;
flex-wrap: wrap; }
.top .nav > * { display: flex; align-items: center; } /* .rotate rows */
.top .nav a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.top .nav .icon { width: 20px; height: auto; display: block; }

/* --- Mobile tweak: wrap links and keep compact --- */
@media (max-width: 768px) {
  .top { flex-wrap: wrap;
    gap: 8px; /* less space between logo/nav */ }
  .logo img { max-height: 44px; /* smaller logo for mobile */ }
  div.nav { flex: 1 1 100%;
    justify-content: center;
    gap: 6px;            /* tighten gaps between links */
    padding-top: 4px;
    flex-wrap: wrap;     /* allow items to wrap neatly if still needed */ }
  div.rotate { font-size: 0.9rem;   /* smaller text */ }
  div.rotate > a { padding: 4px 6px;    /* less padding around text/icon */
    gap: 4px; /* space between icon and text */ }
  .icon { width: 16px;         /* smaller icon */ }
}


/* Body (Main) area.
<-------------------->
<-------------------->
<--------------------> */

body { margin: 0; padding: 0;
position: relative; height: 100vh;
background-color: var(--co-one); }
/* Body 0 marg/pad; without means bar on bottom gets pushed up bit, since natural body dimension. */

main { margin: 0.2% 2%; padding: 0.2%; font-size: 2rem; }
/* Why "display" set as important, because nav smallscreen has no display for <main> when active; therefore can switch states while nav active, switching to display on large state here, without having to turn off the nav button. */

h1 { font-size: 4rem;
color: var(--co-h1); }

h2 { font-size: 2.8rem;
color: var(--co-co);
text-align: left;
margin:  2% 0%;
padding: 0.8% 0%; }

p { color: var(--co-co); }

ol { list-style-position: inside; }
/* (list-style-position: inside) may bring back li-units if margin or padding unshows somehow. */
ul { margin: 0.4% 0;
text-align: left;
list-style-position: inside; }
/* Match (position) here with ol list variety. */
li { margin: 2% 0;
line-height: 2.8rem;
text-align: left; }
/* ul li::before { content: "•"; color: white;
display: inline-block; width: 1.8rem; margin-left: 1rem; }
Could generate own bullet... li::before {content: "•"; color: red;
display: inline-block; width: 1em; margin-left: -1em} */

#image { min-width: 400px;       /* keeps a solid minimum size */
max-width: 580px;       /* caps image size */
width: 88%;            /* let it shrink only if absolutely needed */
overflow: hidden; margin: 0.2%; padding: 0.2%;
border-radius: 20px; }

/* Optional: adjust only for very small screens */
@media (max-width: 768px) {
  #image { min-width: 280px;     /* still fairly large */
    max-width: 440px; }
}

/* the /about page circle image */
.circle { width: 340px;
height: 340px;
border-radius: 50%;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8),
0 0 2px rgba(255, 255, 255, 0.8); }

main a { color: none;
font-weight: bold;
font-size: 2.04rem; }


/* Main (/index) board area.
<-------------------->
<-------------------->
<--------------------> */

/* Activate here (comment out entire range below to switch
the /index board area to other [#2-??] layout below). */
.moodboard { display: flex;
flex-wrap: wrap;
gap: 28px;
max-width: 90%;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
align-items: flex-start; min-height: 100vh; padding: 40px; }
 
.moodboard img { display: block;
width: 100%;
height: 100%;
object-fit: cover; }

.moodboard .large { width: 400px;
height: 400px; }

.moodboard .medium { width: 400px;
height: 300px; }
.moodboard .medium2 { width: 392px;
height: 294px; }

.moodboard .small { width: 280px;
height: 280px; }

.moodquote { width: 100%;
text-align: center;
font-family: 'Brush Script MT', cursive;
font-size: 2.8rem;
word-spacing: 4px;
margin-bottom: 20px; }

/* Tilt effect classes */
.tilt-left { transform: rotate(-4deg); }
.tilt-right { transform: rotate(1.7deg); }

.moodboard .small,
.moodboard .medium,
.moodboard .medium2,
.moodboard .large {
position: relative;
display: inline-block;
border-radius: 8px;
overflow: hidden;
transition: transform 0.7s ease; }

.moodboard .medium,
.moodboard .large { box-shadow: 0 4px 8px rgba(0,0,0,0.12);
/* NO box-shadow for .small & .medium2 imgs since pngs & offset see-through. */ }

/* Crossfade hover swap */
.small img.second,
.medium img.second,
.medium2 img.second,
.large img.second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
border-radius: inherit;
transition: opacity 0.7s ease; }

.small:hover img.second,
.medium:hover img.second,
.medium2:hover img.second,
.large:hover img.second {
opacity: 1;
border-radius: inherit; }

.small img.first,
.medium img.first,
.medium2 img.first,
.large img.first {
border-radius: inherit;
transition: opacity 0.7s ease; }

.small:hover img.first,
.medium:hover img.first,
.medium2:hover img.first,
.large:hover img.first {
opacity: 0;
border-radius: inherit; }


/* Main (/index) #2 secondary board area.
<-------------------->
<-------------------->
<--------------------> */

/* Activate here (comment out entire range above to switch
the /index board area to other [original-??] layout). */
/* .moodboard { display: flex;
flex-wrap: wrap;
gap: 28px;
max-width: 90%;
justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
align-items: flex-start; min-height: 100vh; padding: 40px; } */


/* Blog (/blog) area.
<-------------------->
<-------------------->
<--------------------> */

#blog { float: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
align-items: left;
gap: 20px;
padding: 0.2%;
max-width: 94%;
margin: auto; }

#blog::after { content: "";
width: 400px; }

#blog img {
text-align: left;
color: var(--co-co);
line-height: 48px;
width: 100%;
max-width: 200px;
height: 200px;
display: block;
filter: saturate(1.2);
border-radius: 10px;
object-fit: cover;
background-color: var(--co-ten); }
/* "text-align" and "color" are for alt text underneath image; "line-height" experimental usage here; and if missing "line-height" then alt text appears at top of image. */

#post { flex: 1,2;
font-size: 1.7rem;
overflow: auto;
text-align: center;
position: relative; }
/* (text-align) centers text underneath picture. */

#post:hover .overlay { opacity: 0.88;
overflow: hidden;
border-radius: 10px; }

.overlay { position: absolute;
color: var(--co-co);
font-size: 1.7rem;
font-weight: bold;
text-align: left;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%; width: 100%;
padding: 10%;
opacity: 0;
overflow: hidden;
transition: 0.8s ease;
border-radius: 10px; }




/* Blog (Posts) area.
<-------------------->
<-------------------->
<--------------------> */

.content { margin: 0.2% 24% 0.2% 0.4%; padding: 0.4%; }
.dated { font-size: 1rem;
margin: 0.2% 0% 2% 0%; }


/* Optional: adjust only for very small screens */
@media (max-width: 768px) {
.content { margin: 0 2%; }
h1 { text-align: center;
    font-size: 2.4rem;
    color: var(--co-h1);
    margin: 2%; padding: 0.4%; }
#blog { float: left;
    gap: 10px; }
  /* (main /blog page; two columns: (100% - gap)/2 */
#post { flex: 0 1 calc((100% - 10px)/2); }
}



/* JS OFF variables.
<-------------------->
<-------------------->
<--------------------> */

.noscript-message { background: #ffdddd;
  padding: 20px 8px;
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  color: #900;
  /* display: none; ("none" if ever wanting to block entire no-JS appearance;
  like if switching to SSI version of navbar or something else.) */ }



/* Theme variables.
<-------------------->
<-------------------->
<--------------------> */


:root { --bg: #D1BEA8;      /* light background */
  --text: #1a1a1a;    /* light text */
  --link: #0b57d0;
  }

html[data-theme="dark"] {
  --bg: #333;      /* dark background = black
  the #333 is dark charcoal */
  --text: #f0f0f0;    /* light text for contrast */
  --link: #8ab4f8;
  }


/* Apply globally */
html, body, main, h1, h2, h3, h4, p, b, a, div, img, q, em, ul, ol, li, #bottom, #bottom2 {
  background: var(--bg);
  color: var(--text);
  transition: background-color .8s ease, color .8s ease; }

/* Make (Blog @ /blog) overlay follow your theme text color by default */
.overlay { color: var(--text); }
/* Force light text when dark mode is active */
html[data-theme="dark"] .overlay {
color: #f0f0f0 !important;   /* use #fff if you want pure white */ }
/* (Optional) links & icons inside overlay */
html[data-theme="dark"] .overlay a { color: #8ab4f8; }
html[data-theme="dark"] .overlay svg { fill: #f0f0f0; stroke: #f0f0f0; }




/* Bottom area.
<-------------------->
<-------------------->
<--------------------> */


#bottom { width: 100vw;
height: 80px;
margin: 0.8px;
padding: 8px 70px;
overflow: hidden;
position: absolute; }

#bottom2::before { margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.7rem;
content: "dnook \00A9 2024-2025 | made from scratch"; } /* | dnook site build */

#bottom2 { height: 58px;
text-align: center;
margin: 2px 0 40px 0; padding: 2px;
overflow: hidden; }