/* Plan:
 Background: cream (#FAF7F0)
Paper: off-white (#FFFDF8)
Notebook lines: very light blue
Margin line: muted red
Text: charcoal (#2E2E2E)
Accent: dusty blue or sage green
*/

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

body {
    margin: 0;
    padding: 2rem;
    background-color: #dbeafe;
    background-image:
            linear-gradient(rgba(122, 162, 227, 0.15) 1px, transparent 1px),
            linear-gradient(90deg, rgba(122, 162, 227, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    font-family: "Annie Use Your Telescope", cursive;
    font-weight: 400;
    font-style: normal;
    color: #2b2b2b;
}

nav { 
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 8px;
}

nav a {
    text-decoration: none;
    color: #2b2b2b;
    background: azure;
    padding: 6px 16px;
    
    border: 1px solid aliceblue;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 5px rgba(16, 31, 73, 0.12)  
}

#hero {
    text-align: center;
    margin-bottom: 4rem;
}

h1, h2, h3 {
    font-family: "Courier Prime", monospace;
    font-style: normal;
}

h1 { font-size: 3.5rem; margin-bottom: 0; font-weight: 700;}
h2 { font-size: 2.2rem; margin-top: 0; font-weight: 700; }
h3 {font-weight: 400; }

section, article {
    position: relative;
    background: azure;
    padding: 2.5rem;
    margin: 3rem auto;
    max-width: 600px; /* ADJUST IF LOOKS BAD */
    box-shadow: 3px 6px 18px rgba(64, 84, 84, 0.25); 
    border-radius: 2px;
}

/* Decorative translucent washi tape */
section::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 39%;
  width: 110px;
  height: 32px;
  background: rgba(115, 141, 212, 0.35); /* Washi tape color */
  transform: rotate(-2deg);
  backdrop-filter: blur(1px);
}

#about {
    transform: rotate(-1.2deg);
    background:  azure;
}

#now {
    transform: rotate(1.5deg);
    background: #e0f2ff;;  
    position: relative;
}

.paperclip {
    position: absolute;
    top: -25px;      
    right: 45px;      
    width: 24px;     
    height: 65px;   
    
  
    border: 2px solid #94a3b8; 
    border-radius: 12px;      
    
    background: transparent;
    transform: rotate(-15deg); 
    z-index: 10;               
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.15));
}

/* The Inner Wire Loop */
.paperclip::after {
    content: "";
    position: absolute;
    top: 10px;       
    left: 3px;        
    right: 3px;
    bottom: 12px;     
    
   
    border: 2px solid #94a3b8;
    border-top: none; 
    border-radius: 0 0 8px 8px; 
}

#archive article {
    transform: rotate(-0.7deg);
    border-left: 6px solid #457b9d;
    margin-bottom: 0.5em;
    background:#e0f2ff;
}

.currently {
    list-style: none;
    padding-left: 0;
}

.currently li {
    margin-bottom: 1rem;
    border-bottom: 1px dashed #e0e0e0;
    padding-bottom: 6px;
    font-weight: bold;
}

.currently span { 
    font-family: "Annie Use Your Telescope", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    color:  #1e3a8a; /* Black pen? */
}

.footer {
    text-align: center;
    margin-top: 5rem;
    font-size: 0.85rem;
    opacity: 0.6;
    font-family: "Courier Prime", monospace;
}

/* Unvisited link (default state) 
a:link {
  color: ; 
}
/* Visited link (already clicked) 
a:visited {
  color: ; 
}

/* Hover state (mouse pointer is over it) 
a:hover {
  color: ; 
}

/* Active state (the exact moment it is clicked) 
a:active {
  color: ; 
}
 */