body {
  background: #fefaf3 url('https://www.thefrugalgamer.net/img/backgrounds/morrisAllium.png');
  font-family: 'Georgia', serif;
  margin: 0;
  padding: 30px;
  color: #2f2f2f;
}

a {
  color: #7c3a3a;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1.title {
  text-align: center;
  font-size: 2.5rem;
  color: #2d3142;
  margin-bottom: 30px;
}

.wrapper {
  max-width: 1000px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.box {
  background-color: #fffefc;
  border: 2px dashed #bfa98f;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
}

.box h2 {
  color: #7c3a3a;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.updates ul,
.links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.updates li,
.links li {
  margin-bottom: 8px;
}

blockquote {
  margin: 0;
  padding-left: 15px;
  border-left: 4px solid #f3cf7a;
  font-style: italic;
  color: #295141;
}

/* Color accents */
.intro { background-color: #f7d3d3; }
.updates { background-color: #f3cf7a; }
.currently { background-color: #c7e4c0; }
.links { background-color: #e6e3f4; }
.thought { background-color: #fef5dc; }
.mantra { background-color: #f0e4db; }

/* Scrollbar style */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #bfa98f;
  border-radius: 10px;
}

/* --- STICKER PAGE --- */
/* === STICKERBOOK CARNET STYLE === */

body.stickerbook-body {
  background-color: #fefaf3;
  font-family: 'Georgia', serif;
  margin: 0;
  padding: 40px;
  background-image: url('https://e7.pngegg.com/pngimages/18/412/png-clipart-notebook-notebook.png'); /* motif carnet ou papier */
  background-size: cover;
  color: #2f2f2f;
}

.stickerbook-wrapper {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 20px;
  position: relative;
}

.sidebar-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.tab {
  background-color: #f7d3d3;
  border-left: 6px solid #7c3a3a;
  padding: 8px 14px;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tab:hover {
  background-color: #f0c4c4;
}

.stickerbook-pages {
  display: flex;
  background-color: rgba(255,255,255,0.9);
  border: 2px dashed #bfa98f;
  border-radius: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  flex-grow: 1;
}

.page {
  width: 50%;
  padding: 20px;
  background-image: url('https://images.unsplash.com/photo-1616410731303-6affae095a0a?q=80&w=1001&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: contain;
  background-repeat: repeat;
  min-height: 600px;
}

.spiral-column {
  width: 20px;
  background: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0;
}

.hole {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
}

.sticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 10px;
}

.sticker {
  width: 100px;
  height: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.sticker:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px #f3cf7a);
}