/* @import url(https://fonts.bunny.net/css?family=averia-serif-libre:400,400i);
font-family: 'Averia Serif Libre', display;

@import url(https://fonts.bunny.net/css?family=spectral:300,300i,600,600i);
font-family: 'Spectral', serif;

@import url(https://fonts.bunny.net/css?family=brygada-1918:500,500i);
font-family: 'Brygada 1918', serif;

@import url(https://fonts.bunny.net/css?family=brygada-1918:500,500i|oxygen:400);
font-family: 'Oxygen', sans-serif;

@import url(https://fonts.bunny.net/css?family=comme:300|spectral:300,300i,600,600i);
font-family: 'Comme', sans-serif; */


@import url(https://fonts.bunny.net/css?family=spectral:300,300i,600,600i);


/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1800,24,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --fs-xs: clamp(0.7813rem, 0.7655rem + 0.0699vw, 0.8442rem);
  --fs-sm: clamp(0.9375rem, 0.8906rem + 0.2086vw, 1.1253rem);
  --fs-base: clamp(1.125rem, 1.0313rem + 0.4167vw, 1.5rem);
  --fs-md: clamp(1.35rem, 1.1876rem + 0.7217vw, 1.9995rem);
  --fs-lg: clamp(1.62rem, 1.3587rem + 1.1615vw, 2.6653rem);
  --fs-xl: clamp(1.944rem, 1.5418rem + 1.7877vw, 3.5529rem);
  --fs-xxl: clamp(2.3328rem, 1.732rem + 2.6702vw, 4.736rem);
  --fs-max: clamp(2.7994rem, 1.9209rem + 3.9041vw, 6.3131rem);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
  margin-block: 1rem;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion) {
  @view-transition {
    navigation: none;
  }
}

/* Disable the default fade out effect on the old content */
/* ::view-transition-old(root) {
    animation: none;
} */

/* Make new content wipe in from the right */
/* ::view-transition-new(root) {
    animation: wipe-in 0.6s ease-out forwards;
} */

/* Animation wiping in the new content */
/* @keyframes wipe-in {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
} */



body {
  font-family: 'Spectral', 'Times New Roman', serif;
  color: #5a5a5a;
  background: #f1f2e2;
  background: linear-gradient(to left, #f1f2e2 15%, #ffffff, #f1f2e2 85%);

  }

h1 {
    font-size: var(--fs-xxl);
    font-weight: 600;
}

h2 {
    font-size: var(--fs-md);
  font-weight: 600;
  margin-top: 0;
}


h3 {
    font-size: var(--fs-base);
  font-weight: 600;
}

p, li {
    font-size: var(--fs-base);
    font-weight: 300;
}

header {
    display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 1rem 4vw;
      border: 2px solid #9e98e7;
      border-radius: 20px;
      padding: 1rem;
}

header nav,
header h1 {
    font-size: var(--fs-md);
    margin: 0;
}

header a {
    text-decoration: none;
    }

header a:hover {
  text-decoration: underline;
}


.home-new {
    display: grid;
    grid-template-columns: 60% auto;
    grid-template-rows: min-content min-content min-content;
    align-items: start;
    gap: 2rem 4vw;
    margin: 2rem 4vw;
}

.home-template h2 {
    margin-bottom: 2rem;
}

.bubble {
    background: #fff;
    border: 3px solid var(--sec-color);
    border-radius: 20px;
    padding: 2rem 3vw;
}

.current h2,
.finished h2,
.online h2,
.poets h2 {
    color: var(--sec-color)
}

.current {
    --sec-color: blue;
}

.finished {
    --sec-color: magenta;

}

.poets {
    --sec-color: green;
}



.online {
    --sec-color: maroon;

    grid-column: 2;
    grid-row: 1/-1;
    padding: 2rem 1vw;
}

/* Main content */
.home-grid {
  display: grid;
  grid-template-columns: 33% 45% 1fr;
 // flex: 1;
  padding: 0;
  gap: 0;
  margin: 3rem 3vw 0;
  }


.col {
  padding: 0 3vw;
  }

.col:first-child {
  padding-left: 0;
}

.col:last-child {
  padding-right: 0;
}

.col-middle,
.col-right {
  border-left: 1px solid #9e98e7;
}

.col-middle {
  padding-left: 3vw;
}

.col-right {
  padding-left: 3vw;
}


/* Currently Reading */
.current-book-title {
  font-style: italic;
  font-size: var(--fs-base);
  }

.current-book-author {
  //color: #999;
  font-size: var(--fs-base);
  margin-top: 0;
  margin-bottom: 4rem;
}

/* Recently Read list */
.reading-list {
  list-style: none;
  padding-inline: 0;
  }

.reading-list .book-title {
  font-style: italic;
}

/* Online Reading excerpts */
.excerpt {
  margin-block: 3rem;
  border-top: 1px solid #9e98e7;
}

.excerpt blockquote {
  margin-inline: 0;
  font-size: var(--fs-base);
  }


.excerpt p { font-size: var(--fs-sm); }

a {
  color: #d02cff;
  }

a:hover {
  text-decoration: none;
}

.excerpt .post-tags {
    margin-block: 0;
    text-align: right;
}

.page-template {
    & article {
        margin: 4rem 12vw;
          max-width: 88ch;
          padding: 2rem 1vw;
          background: white;
          //border: 2px solid red;
          border-radius: 20px;

          & header {
              margin: 0;
              border: 0;
              padding: 0;
          }
    }
}

.tag-template {
    & .gh-container {
        margin: 4rem 12vw;
          max-width: 88ch;
          padding: 2rem 1vw;
          background: white;
          //border: 2px solid red;
          border-radius: 20px;

          & header {
              margin: 0;
              border: 0;
              padding: 0;
          }

         & header p { margin-top: 0; }
    }
}


/* Footer */
footer {
  margin: 1rem 4vw;
    border: 2px solid #9e98e7;
    border-radius: 20px;
    padding: 1rem;
    font-size: var(--fs-base);
    display: flex;
    justify-content: center;
  }

footer a {
    margin-inline: 1ch;
    text-decoration: none;
    }

footer a:hover {
    text-decoration: underline;
}


/* .footer-nav {
  text-align: center;
}

.footer-nav a {
  color: #1a1a1a;
  text-decoration: underline;
}

.footer-nav a:hover {
  text-decoration: none;
} */