@import url(https://fonts.bunny.net/css?family=bilbo-swash-caps:400);

:root {
  /* Let the browser handle light and dark automatically */
  color-scheme: light;

  /* Two system-font stacks: sans for body, serif for headings */
  --font-body: system-ui, sans-serif;
  --font-head: ui-serif, Georgia, "Iowan Old Style", serif;

  /* Purple/pink palette. light-dark() picks the light value first, dark second */
  --bg: light-dark(#496245, #496245);
  --text: light-dark(#2a1f2d, #ece0ef);
  --muted: light-dark(#ece0ef, #a892b0);
  --accent: light-dark(#090088, #496245);
  --border: light-dark(#ecd9ec, #3a2f40);
}

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

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  background-image: url(/img/contours.svg);
  background-repeat: no-repeat;
  background-size:cover;
  line-height: 1.5;
  margin: 0;
  padding: 0 0rem;
  height: 100vh;
  width: auto;
  
}

/* Site header */
header {
  text-align: center;
  padding-block: 0rem;
  padding:0;
  margin:0;
}

/* Navigation */
nav {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-weight:bold;
  font-family: var(--font-head);
  font-size: clamp(0.9rem, calc(1vw + .2rem), 1.8rem);
}

/* Main content */
main {
  padding: 1rem 3rem;
}

/* Site footer */
footer {
  margin-top: 1rem;
  padding-block: 0rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  
}

/* Links */
a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration: none;
}

/* Headings */


h1 {
  font-size: clamp(4rem, calc(7vw + 1rem), 5rem);
  font-family: 'Bilbo Swash Caps', handwriting;
  margin:0;
  padding:0;
}

h2 {
  font-family: var(--font-head);
  font-size: clamp(1rem, calc(2vw + 1rem), 1.8rem);
  margin-top: 0;
  line-height: 1.1;
}

.post {
  background: white;
  margin: 2em auto;
  max-width: 60rem;
  padding: 2em 0;
  box-shadow: 12px 18px 24px rgba(darken(gray, 50%), .1);
}

.dotted {
background-color: #E5E5F7;
opacity: 0.8;
background-image:  radial-gradient(circle, #444CF7 0.8px, transparent 0.8px), radial-gradient(circle, #444CF7 0.8px, transparent 0.8px) ;
background-size: 5px 20px, 20px 5px;
background-position: -2.5px -10px, -10px -2.5px;
}

.notebook-page {
    margin: 0 auto;
    background: white;
    margin-top: 3rem;
    max-width: 35rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    height: 90%;
    min-height: fit-content;

    background-color: #E5E5F7;
    background-image:  radial-gradient(circle, var(--bg) 0.5px, transparent 0.5px), radial-gradient(circle, var(--bg) 0.5px, transparent 0.5px) ;
    background-size: 5px 30px, 30px 5px;
    background-position: -2.5px -10px, -10px -2.5px;

    border-radius: 5px 5px 50px 50px; 
}

.spiral-bind {
  margin: 0 auto;
  padding: 0;
  max-width: 85%;
  height: auto;
  position: relative;
  z-index: 2;
  top: -2rem;
}

.doodles {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 480px) {
  .notebook-page {
    margin-top: 2rem;
    border-radius: 5px 5px 5px 5px;
    width: 100%
  }

  .spiral-bind {
    max-width: 100%;
  }
  
}