<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>"Anastasia's Portofolio"</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Inter:wght@300;400&display=swap" rel="stylesheet">

<style>
/* ================================
   ORGANIC FLOW THEME VARIABLES
================================= */
:root {
  --bg: #faf8f3;
  --paper: #fffdf7;
  --ink: #3a3a3a;
  --accent: #9b7e56;
  --accent-light: #ccbda4;
  --shadow: rgba(0,0,0,0.08);

  --serif: "Cormorant Garamond", serif;
  --sans: "Inter", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
}

/* ================================
   NAVIGATION (Your CSS)
================================= */
nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1.2rem 0;
  background: var(--paper);
  box-shadow: 0 2px 6px var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}

nav a {
  font-family: var(--serif);
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}

nav a:hover::after {
  width: 100%;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: 0.3s ease;
}

html {
	scroll-behaviour: smooth;
}

/* ================================
   HERO SECTION
================================= */
.hero {
  padding: 4rem 2rem;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  width: 60%;
  margin: 0 auto 2rem;
  color: #5f5b52;
}

.hero {
  display: flex;               /* align text and image */
  flex-direction: column;      /* or row for side-by-side layout */
  justify-content: center;     /* vertical centering */
  align-items: center;         /* horizontal centering */
  min-height: 70vh;           /* full viewport height */
  padding: 2rem;
  box-sizing: border-box;
}

.hero-image img {
  max-width: 80%;             /* image won’t overflow the screen */
  height: auto;
  border-radius: 12px;
}


.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 8px var(--shadow);
  transition: 0.3s ease;
}

.btn:hover {
  background: var(--accent);
  color: white;
}


/* ================================
   ABOUT SECTION
================================= */
.about {
  padding: 4rem 2rem;
  background: var(--paper);       /* soft paper-like background */
  text-align: center;             /* center all text */
}

.about h2 {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.about p {
  font-family: var(--sans);
  font-size: 1.2rem;
  color: var(--ink);
  max-width: 700px;               /* readable line length */
  margin: 0 auto;                 /* center paragraph block */
  line-height: 1.8;
  box-shadow: 0 4px 10px var(--shadow);  /* subtle shadow */
  padding: 1.2rem;
  border-radius: 12px;            /* soft rounded corners */
  background: var(--bg);           /* slightly different tone for contrast */
}

/* ================================
   GALLERY
================================= */
.gallery {
  padding: 3rem 2rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.gallery-item {
  background: var(--paper);
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 4px 10px var(--shadow);
}

.gallery-item img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer; /* Changes pointer to a hand icon */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05); /* zoom in slightly */
  box-shadow: 0 8px 15px rgba(0,0,0,0.3); /* add shadow */
}

/* ================================
   Lightbox overlay within gallery
================================= */

.lightbox{
	display: none;
	position: fixed;
	z-index:1000;
	padding-top: 60px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
}
.lightbox-content {
	margin: auto;
	display: block;
	max-width: 90%;
	max-height: 80%;
	border-radius: 8px;
}
	
/* ================================
   LIGHTBOX CAPTION
================================= */
#caption {
  position: absolute;       /* sits over the image */
  bottom: 20px;             /* offset from bottom */
  left: 50%;
  transform: translateX(-50%); /* center horizontally */
  max-width: 90%;           /* prevent it from overflowing */
  background: var(--paper); /* matches gallery-item background */
  color: #222;              /* readable on light background, change for dark images */
  padding: 1rem;
  border-radius: 10px;      /* rounded corners like gallery-item */
  box-shadow: 0 4px 10px var(--shadow); /* subtle shadow */
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;               /* initially hidden */
}

/* Show caption when lightbox is active */
.lightbox.active #caption {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Caption text structure */
#caption .title {
  font-weight: bold;
  font-style: italic;
  display: block;
  margin-bottom: 0.5rem;
}

#caption span:not(.title) {
  display: block;
  margin: 2px 0; /* spacing for year, dimensions, materials */
}

.close {
	position: absolute;
	top: 20px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}


/* ================================
   CONTACT SECTION
================================= */


.contact {
  padding: 4rem 2rem;
  background: var(--bg);           /* slightly lighter background for contrast */
  text-align: center;              /* center all text */
}

.contact h2 {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.contact p {
  font-family: var(--sans);
  font-size: 1.2rem;
  color: var(--ink);
  max-width: 600px;               /* readable line length */
  margin: 0 auto;                 /* center paragraph block */
  line-height: 1.8;
}

.contact a {
	color: inherit; /* link uses the normal text color */
	text-decoration: none; /* remove underline*/
}

.contact a:hover {
	/*color: #7fa0ff; /* choose any hover color */
	text-decoration: underline; /* optional hover underline */
	/*text-shadow: 0px 0px 5px #7fa0ff;
}

/* ================================
   OPTIONAL BUTTONS IN CONTACT
================================= */
.contact .btn {
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 8px var(--shadow);
  transition: 0.3s ease;
}

.contact .btn:hover {
  background: var(--accent);
  color: white;
}

/* ================================
   FOOTER
================================= */
footer {
  margin-top:2rem;
  display: flex;
  flex-direction: column; /* stack items vertically */
  justify-content: center; /* vertical alignment if footer has height */
  align-items: center;    /* horizontal centering */
  padding: 2rem;
  background: var(--paper);
  color: var(--ink);
  gap: 0.5rem;            /* space between items */
}



