body {
  margin: 0;
  display: block;
  grid-template-columns: 1fr;         /* single column layout */
  grid-template-rows: auto 1fr;       /* header height, remaining space */
  min-height: 100vh;                  /* fills full viewport height */
  font-family: Arial, sans-serif;
  background-image: url("/personalsite/MainichiNikki/Media/Background Images/light rice paper.png");
  background-position: center;  /* keeps focal point centered */
  background-repeat: repeat-y; /* tiles on the y-axis */
    background-size: cover;
    background-color: #f7f4eb;
}

header {
  background-color: rgb(34, 34, 34);
  color: #ffffff;
  display: grid;
  place-items: center;        /* centers text horizontally and vertically */
  font-size: 2rem;
 text-align: center
}

main {
  display: grid; 
}

nav{display:grid;
place-items:top;}

.Section1 { padding: 1.5fr;
display: block;
width:75%;
margin:auto;
  border: none;
  place-items: top;
  font-family: Cambria, Cochin, Georgia, Times,;
  }

.Section1 img {display: block;
width:auto;
max-height: 40rem;
margin:auto;
padding: 2vh;
}

.Section1 h1 {text-align: center}
.Section1 h2 {text-align: center}

section{background-color:#222}

.ImageGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
  gap: 1vh;
margin:auto;
  border: none;
  place-items: top;
  font-family: Cambria, Cochin, Georgia, Times,;
  }

.ImageGrid img {width: 100%;}


.decorative {
  width: 100%;
  height: auto;   /* preserves correct aspect ratio */
  display: block; /* optional: removes whitespace under images */
margin:auto;
border:none;
  max-width: 1000px; /* optional: prevents the image from over-expanding on large screens */ 
}

.decorative img{
height:300px;
margin:auto;
padding:2vh;}

.owari{
text-align: center;
font-family:sans-serif;
font-size:2em;
font-weight:999;
background-image: linear-gradient(to right, black, green);
background-clip: text;
color:transparent;
border-block-end:1vh double pink;}

.dateheader{text-align: center;
margin-top:5vh;
font-family:sans-serif;
font-size:2em;
font-weight:999;
background-image: linear-gradient(to right, blue, lime);
background-clip: text;
color:transparent;
}

ul {
  display: flex;        /* "display: flex;" would be a horizontal layout */
  gap: 3rem;            /* space between links */
  padding: 0;
  width:fit-content;
  margin: auto;
  list-style: none;
  text-align: center}

ul li a {
  color: #ffffff;            /* text color */
  text-decoration: none;   /* remove underline */
  font-size: 1.5rem;       /* scalable size */
  padding: 0.5rem 1rem;    /* clickable space around text */
  display: inline-block;   /* allows padding to work */
  transition: color 0.3s;  /* smooth hover effect */
  background-color:rgb((34, 34, 34),0.8); /* black!!!! */
  border-radius: 100px;

}

ul li a:hover {
  color: #ffe200;           /* changes color on hover */
 background-color: rgb((64, 64, 64),0.2); /* semi-transparent highlight; beige! */
  border-radius: 100px;                       /* smooth edges */

}

ul li a:active {
  color: #ffbb00;          /* optional: changes color when clicked */
}

ul li a:focus {
  outline: 2px solid #ffe200; /* UX/UI compliant for keyboard users */
}