/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Libre Baskerville', serif;
  color: #4a3b47;

  background-image: url('water.jpg');
  background-size: cover;   
  background-repeat: no-repeat; 
  background-position: center; 
}


.navbar h1,
.scrap-item h3 {
  font-family: 'Playfair Display', serif;
}

.tab,
.app,
.scrap-item.note {
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
}


/* Navbar */
/* Gradient Header */
.navbar {
  background: linear-gradient(
    315deg,
    var(--lavender),
    var(--sky),
    var(--rose),
    var(--peach),
    var(--butter)
  );
  padding: 20px 25px;
  border-bottom: 4px dashed var(--rose);
  filter: saturate(90%);
   display: flex;
  align-items: center;
  justify-content: space-between;
}


.navbar h1 {
  font-size: 1.4rem;
}

.navbar a {
  margin-left: 15px;
  text-decoration: none;
  color: #5a3a52;
  font-style: italic;
}

.navbar a:hover {
  text-decoration: underline;
}

/* Layout */
.layout {
  display: flex;
  padding: 20px;
  gap: 20px;
}

/* Phone Sidebar */
.phone {
  width: 230px;
  padding: 18px;

  background: linear-gradient(
    160deg,
    var(--peach),
    var(--sky)
  );

  border-radius: 36px;
  box-shadow:
    6px 8px 0 rgba(0,0,0,0.2),
    inset 0 0 0 3px rgba(255,255,255,0.4);

  position: relative;
}

.phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  width: 60px;
  height: 6px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}

.phone-screen {
  background: #fff;
  border-radius: 26px;
  padding: 18px;
  height: 100%;

  box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
}


.phone-screen h2 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

details {
  background: var(--sky);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 10px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.15);
  details:nth-of-type(1) { background: var(--rose); }
  details:nth-of-type(2) { background: var(--peach); }
  details:nth-of-type(3) { background: var(--butter); }
  details:nth-of-type(4) { background: var(--sky); }

}

summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
}

details p {
  margin-top: 6px;
  font-size: 0.9rem;
}

/* Remove default triangle */
summary::-webkit-details-marker {
  display: none;
}


.app {
  display: block;
  background: #f7e6ef;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #4a3b47;
  text-align: center;
  font-size: 0.95rem;
}

.app:hover {
  background: #efd1e2;
}

/* Scrapbook Canvas */
.scrapbook {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Scrap Items */
.scrap-item {
  padding: 15px;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
  background: var(--butter);
}

/* Color rotation for whimsy */
.scrap-item:nth-child(5n+1) { background: var(--paperfive); }
.scrap-item:nth-child(5n+2) { background: var(--paperone); }
.scrap-item:nth-child(5n+3) { background: var(--paperfour); }
.scrap-item:nth-child(5n+4) { background: var(--paperthree); }
.scrap-item:nth-child(5n+5) { background: var(--papertwo); }


.scrap-item h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.scrap-item.image img {
  width: 100%;
  border-radius: 8px;
}

.scrap-item.note {
  font-style: italic;
  background: #fff5fa;
}

.scrap-item {
  transform: rotate(-1deg);
}

.scrap-item:nth-child(even) {
  transform: rotate(1.5deg);
}


:root {
  --lavender: #9B04DB;
  --sky: #E200A3;
  --rose: #FF1C6A;
  --peach: #FF8103;
  --butter: #FBDD49;
  --paperone: #DFD0B9;
  --papertwo: #EDEDE7;
  --paperthree: #F3E1D4;
  --paperfour: #E8D3BE;
  --paperfive: #D9C2A6;
}


/* Paper Tabs */
.tabs {
  display: flex;
  gap: 10px;
}

.tab {
  padding: 8px 16px;
  text-decoration: none;
  font-style: italic;
  color: #4a3b47;
  border-radius: 8px 8px 12px 12px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.15);
  transform: rotate(-1deg);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Individual tab colors */
.tab1 { background: var(--papertwo); }
.tab2 { background: var(--paperfour); transform: rotate(1deg); }
.tab3 { background: var(--paperthree); }
.tab4 { background: var(--paperone); transform: rotate(-2deg); }

.tab:hover {
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 3px 6px 0 rgba(0,0,0,0.2);
}

/* Washi Tape Image System - Main Folder Version */
.scrap-item {
  position: relative;
  overflow: visible; /* allow tape to stick out */
}

/* Base washi style */
.scrap-item::before,
.scrap-item::after {
  content: "";
  position: absolute;
  width: 70px; /* adjust size as needed */
  height: 22px;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 999;
  opacity: 0.95;
}

/* Top-left corner */
.scrap-item::before {
  top: -10px;
  left: -12px;
  transform: rotate(-8deg);
}

/* Bottom-right corner */
.scrap-item::after {
  bottom: -12px;
  right: -14px;
  transform: rotate(10deg);
}

/* Top-left “fake random” */
.scrap-item:nth-of-type(5n+1)::before { background-image: url("washi1.png"); }
.scrap-item:nth-of-type(5n+2)::before { background-image: url("washi2.png"); }
.scrap-item:nth-of-type(5n+3)::before { background-image: url("washi3.png"); }
.scrap-item:nth-of-type(5n+4)::before { background-image: url("washi4.png"); }
.scrap-item:nth-of-type(5n+4)::before { background-image: url("washi4.png"); }

/* Bottom-right “fake random” */
.scrap-item:nth-of-type(5n+1)::after { background-image: url("washi3.png"); }
.scrap-item:nth-of-type(5n+2)::after { background-image: url("washi1.png"); }
.scrap-item:nth-of-type(5n+3)::after { background-image: url("washi5.png"); }
.scrap-item:nth-of-type(5n+4)::after { background-image: url("washi2.png"); }
.scrap-item:nth-of-type(5n+4)::before { background-image: url("washi4.png"); }

/* Gradient Footer */
.footer {
  margin-top: 30px;
  padding: 15px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: #4a3b47;

  background: linear-gradient(
    315deg,
    var(--butter),
    var(--peach),
    var(--rose),
    var(--sky),
    var(--lavender)
  );
  filter: saturate(90%);

  border-top: 4px dashed var(--rose);
}