body {
  font-family: sans-serif;
  margin: 0;
  background-color: whitesmoke;
  padding : 10px;
  outline : 3px solid black;
  min-height: 100vh;



}

h1 {
  font-weight:400;
  font-size: 60px;
  font-family: "Moo Lah Lah", sans-serif;
  letter-spacing: 25px;
  text-align:left;
  color: black;
  font: bodoni ornaments;
  text-decoration: underline;
  padding: 10px;
  text-underline-offset: 18px;
  padding-bottom: 100px;
}

/* Gallery layout */
.gallery {

  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  object-fit: cover;
  
}

/* Tile */
.tile
 {
  width: 90%;
  height: auto;
  border: 2px solid #000;
  justify-self: center;
  
}

 .tile1{
    width: 80%;
    height:90%;
    margin-left: 70px;
    background-color: #aed09e;

 }
 .tile2{
    background-color:#d5eeff;
    
 }
 .tile3{
    background-color:#2e79ba;
    
 }
  
 .tile4{
   background-color:#eb2632;

 }
 .tile5{
   background-color:#9fa180;


 }

 .tile6{
   background-color:#ffdc76;
  
 }
 .tile7{
   background-color:#b0dedb;
   
 }
 .tile8{
   background-color:#ff6d24;

 }
 .tile8 .photo{
    position : relative;
    left: 20px;
 }
 .tile9{
   background-color:#fbe0d8;
 
 }
 .tile10{
    background-color: #aed09e;
    /* width: 100%;
    height: 50%;
    position: relative;
    top: 60px; */

 }
 .tile11{
    background-color:#d5eeff;

 }
 .tile12{
    background-color:#2e79ba;

 }
.tile img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  position:relative;
  bottom : 30px;
  right: 30px;
  outline: 2px solid black;
}
.site-footer {
  margin-top: 4rem;
  padding: 2.5rem 1.5rem;
  background-color: rgb(5, 5, 121); 
  color: #3a3a3a;
  font-family: "Georgia", "Times New Roman", serif;
  text-align: center;
}

.site-footer p {
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.7;
  font-size: 2rem;
  font-family: "Rubik Puddles" , system-ui;
  font-weight : 1000;
}

.site-footer p:last-child {
  margin-bottom: 0;
}
.about {
    background-color: #c2cfd8;
    border: 35px solid whitesmoke;
}
nav {
  display: flex;
  justify-content: flex-end; /* right side */
  padding: 20px;
}

nav a {
  margin-left: 20px;
}

#all .tile {
  width: 200px;  /* adjust as needed */
  height: 150px;  /* keeps aspect ratio */
  margin: 15px;  /* optional spacing */
  position: static;   /* cancels any absolute/relative/fixed positioning */
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: none;
  overflow : visible ;
}
#all .tile img {
  width: 100%;      /* or max-width: 100%; to keep original ratio */
  height: 100%;     /* maintain aspect ratio */
  object-fit: cover; /* keeps images filling the space without distortion */
  display: block;    /* removes inline spacing issues */
}
.about .tile1 {
    width:60%;
    height: auto;
}

.about .content {
  display: flex;
  gap: 30px;

  max-width: 900px;
  margin: 40px auto;
  padding: 30px;

  /* background-color: white; */

  /* border: 2px solid #000; */
  /* outline: 4px solid #aaa; */
}

/* Image sizing */
.about .photo {
  width: 250px;
  height: auto;
  border-radius: 6px;
}

/* Text section */
.about-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text h2 {
  margin-bottom: 10px;
}

.description {
  margin-bottom: 20px;
  line-height: 1.6;
}

.contact p {
  margin: 5px 0;
}