/* 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." */

body {
background:#0b1f1d;
background-image:url("bg1.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
color:#c7f2e3;
font-family:"Space Mono", monospace;
margin:0;
}

/* layout */

.container{
display:flex;
}

/* sidebar */

.sidebar{
width:260px;
padding:30px;
position:fixed;
right:0;
top:0;
height:100vh;
background:#071514;
border-left:1px solid #1f4c48;
}

.sidebar h1{
font-size:20px;
margin-bottom:40px;
}

.sidebar h2{
font-size:14px;
margin-top:30px;
margin-bottom:10px;
color:#78ffd6;
}

.sidebar a{
display:block;
color:#c7f2e3;
text-decoration:none;
margin-bottom:8px;
}

.sidebar a:hover{
color:#78ffd6;
}

/* archive area */

.memory-wall{
margin-right:320px;
padding:150px;
max-width:1400px;
margin-left:auto;
display:flex;
flex-direction:column;
gap:0px;
}

.moment{
display:grid;
grid-template-columns:80px 70px 1fr;
gap:12px;
overflow:visible;
}

.moment-photos{
display:grid;
grid-template-columns:repeat(24,1fr);
gap:4px;
overflow:visible;
}

/* images */

.moment-photos img{
width:100%;
margin-bottom:4px;
height:auto;
break-inside:avoid;
display:block;
transition:transform 0.25s ease;
z-index:1;
}

.landscape{
grid-column:span 7;
}

.portrait{

grid-column:span 4;
}

/* slight offset */

.moment-photos img:nth-child(3n){
transform:translateY(8px);
}

.moment-photos img:nth-child(4n){
transform:translateX(-6px);
}

/* hover */

.moment-photos img:hover{
transform:scale(1.05);
z-index:10;
}

/* moment labels */

.moment-title{
margin-top:20px;
width:50px;
font-size:13px;
line-height:1.2;
opacity:0.7;
break-inside:avoid;
}

.moment-place{
writing-mode:vertical-rl;
font-size:36px;
margin-top:6px;
letter-spacing:4px;
color:#ff5a5a;
font-weight:bold;
}

/* Chrome / Edge / Safari — page scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(7,21,20,0.25);
  border-radius: 8px;
  /* subtle inner shadow to feel glassy */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.45);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(31,76,72,0.55), rgba(31,76,72,0.45));
  border-radius: 8px;
  border: 2px solid rgba(7,21,20,0.25);
  backdrop-filter: blur(3px);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(120,255,214,0.9), rgba(120,255,214,0.7));
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(31,76,72,0.55) rgba(7,21,20,0.25);
}