/* Josh Comeau's CSS Reset
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* My custom CSS */

/* custom fonts */

@font-face {
  font-family: "Poetsen";
  src: url('fonts/PoetsenOne-Regular.ttf');
}

@font-face {
  font-family: 'Work Sans';
  src: url('fonts/WorkSans[wght].ttf') format('truetype');
  font-weight: 1 999;
  font-stretch: 1% 100%;
}

@font-face {
  font-family: 'Work Sans';
  src: url('fonts/WorkSans-Italic[wght].ttf') format('truetype');
  font-weight: 1 999;
  font-stretch: 1% 100%;
  font-style: italic;
}

/* CSS vars used below */
/* Color palette */
:root {
  --bittersweet: hsla(7, 82%, 63%, 1);
  --powder-blue: hsla(214, 61%, 82%, 1);
  --baby-powder: hsla(108, 19%, 95%, 1);
  --sage: hsla(74, 35%, 69%, 1);
  --ultra-violet: hsla(232, 20%, 35%, 1);
}

/* CSS classes */

.title * {
  font-family: "Poetsen";
  color: var(--bittersweet);
  text-decoration: none;
}

.topnav {
  display: flex;
  flex-direction: row;
}

.topnav h3 {
  flex: 0;
  padding: 20px;
  text-decoration: none;
  margin: auto 0;
}

.topnav > h3 > a {
  text-decoration: none;
  color: var(--ultra-violet);
}

.topnav > h3 > a:hover {
  display: inline-block;
  transform: rotate(.1rad);
  text-shadow: 3px 3px 2px var(--powder-blue);
}

.center {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer {
  font-size: 10pt;
}

.sitemap {
  line-height: 1;
}

.footnotes {
  margin-top: 1.5rem;
}

/* standard html element style */

body {
  font-family: "Work Sans";
  background-color: var(--baby-powder);
  color: var(--ultra-violet);
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  text-align: justify;
  margin: auto;
  max-width: clamp(0px, 60vw, 60em);
  font-size: clamp(16px, 1vw, 20px);
}

h1 {
  font-family: "Poetsen";
  color: var(--bittersweet);
  text-align: left;
  margin-bottom: 10px;
  margin-top: 30px;
}

h2 {
  font-family: "Work Sans";
  color: var(--ultra-violet);
  text-align: left;
  margin-bottom: 0px;
  margin-top: 25px
}

h3 {
  font-family: "Work Sans";
  font-style: italic;
  color: var(--ultra-violet);
  margin-bottom: 0px;
  margin-top: 30px;
  text-decoration: underline;
}

p, ul, ol { 
  font-family: "Work Sans"; 
  margin: 10px 0px;
}

li {
  text-align: start;
}

a {
    color: var(--bittersweet);
}

img, video {
    width: calc(40vw);
    height: auto;    /* Maintain image aspect ratio */
    display: block;  /* Remove default bottom margin */
    margin: 0 auto;  /* Center images within their container */
    border: 2px solid var(--sage); /* Add a border around images */
    border-radius: 10px;    /* Add rounded corners to images */
    padding: 4px;
}

pre code {
  white-space: pre-wrap;   /* Ensures the text wraps inside the code block */
  word-wrap: break-word;   /* Allows breaking long words */
  word-break: break-word;
  padding: 10px;
}

code {
  display: inline-block;
  font-family: Courier, monospace; /* Fixed-width font */
  background-color: var(--powder-blue); /* Subtle background color */
  border: 1px solid var(--sage); /* Border */
  padding: 1px 1px; /* Padding for spacing */
  border-radius: 2px; /* Slight border radius for rounded corners */
  font-size: 90%;
}

hr {
  color: var(--sage);
  background-color: var(--sage);
  height: 1px;
  border: none;
  width: 100%;
}

/* for special semantic classes */

.sidenote {
    background-color: var(--powder-blue); /* Background */
    color: var(--ultra-violet); /* Text color */
    border: 1px solid var(--sage); /* Border */
    padding: 30px; /* space between inner text and border */
    margin: 20px 0px; /* margin above and below to separate */
}

.sidenote h1, h2, h3 {
  margin: 0px;
}

.published-slug {
  color: var(--ultra-violet);
  opacity: 0.7;
  font-style: italic;
}

.footer-container {
  margin-top: 30px; /* give us a little space at the end of pages. */
  margin-bottom: 30px; /* give us a little space at the end of pages. */
}

/* Ensure no global styles override the gallery-grid images */
/* Grid container */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 items per row by default */
  gap: 10px;
  justify-items: center; /* Center all items */
  align-items: center;
}

.gallery-grid a {
  text-align: center;
}

.gallery-grid img {
  width: 100%;
  max-width: 150px; 
  height: auto;
  margin: 0;
}

.gallery-grid .caption {
  margin-top: 5px;
}

/* Media queries for larger screens */
@media (min-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
  }
}

@media (min-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr); /* 6 items per row */
  }
}


/* Media queries for smaller screen-sizes */

@media screen and (max-width: 62rem) {
  body {
    max-width: 90%;
    font-size: 1rem;
    text-align: left;
  }
  .topnav > h3 > a {
    flex-direction: column;
    flex: 1;
    font-size: 1rem;
    line-height: 0;
  }
  .topnav * {
    line-height: 0;
    margin-bottom: 10px;
  }
}