body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFE55A; /* yellow background */
}

html{
scroll-behavior:smooth;
}

body{
animation:fadeIn 2s ease;
}

@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}

/* Roboto Font */
@font-face {
  font-family: 'Roboto Black';
  src: url('text/Satoshi_Complete/Satoshi_Complete/text2/Roboto/static/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed Medium';
  src: url('text/Satoshi_Complete/Satoshi_Complete/text2/Roboto/static/Roboto_Condensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed Light';
  src: url('text/Satoshi_Complete/Satoshi_Complete/text2/Roboto/static/Roboto_Condensed-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

/* Navigation */

.archive-header {
    font-family: 'Roboto Condensed Light', Arial, sans-serif;
    font-size: 20px;
    margin: 20px;
}

.navbar {
    position: fixed;
    top: 20px;
    right: 40px;
}

.navbar a {
    margin-left: 20px;
    text-decoration: none;
    color: black;
    font-family: 'Satoshi-Light', Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
}

/* Hero Section */

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.hero h1 {
    font-family: 'Roboto Black', Arial, sans-serif;
    font-size: 150px;
    line-height: 0.75;
    color: rgb(33, 34, 37);
    margin: 0;
}

.quote {
    font-family: 'Roboto Condensed Medium', Arial, sans-serif;
    font-size: 70px;
    color: rgb(33, 34, 37);
    margin-top: 30px;
}

.dark-section{
background-color:#305e87;
padding-top:120px;
}

.dark-section a{
color:white;
}

.dark-section .nav{
color:white;
}


/* Gallery */

.gallery {
    padding: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.photo {
    background: #333;
    height: 300px;
}

/* Featured Gallery */

.featured-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 100px;
}

.featured-image {
width: 750px;
height: 500px;
object-fit: cover;
box-shadow: 0px 10px 40px rgba(0,0,0,0.4);
transition: opacity 0.7s ease;
}



.featured-section{
display:flex;
align-items:center;
justify-content:center;
gap:80px;
max-width:1200px;
margin:0 auto;
padding:120px 40px;
}

.photo-info{
max-width:400px;
color:white;
}

.photo-info h2{
font-family:'Satoshi-bold', Arial, sans-serif;
font-size: 28px;
margin-bottom:5px;
text-transform:uppercase;
letter-spacing:1px;
}

.photo-info p{
font-family:'Satoshi-Light', Arial, sans-serif;
font-size:18px;
line-height:1.2;
margin-bottom:40px;
color:white;
}


.image-container{
position:relative;
}

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:32px;
background:rgba(0,0,0,0.4);
border:none;
color:white;
padding:12px 18px;
cursor:pointer;
}

.prev{
left:10px;
}

.next{
right:10px;
}

.gallery-button{
display:inline-block;
padding:14px 28px;
border:2px solid white;
color:white;
text-decoration:none;
font-weight:bold;
transition:all 0.3s ease;
font-family:'satoshi-light', Arial, sans-serif;
letter-spacing:1px;
text-transform:uppercase;
font-size:14px;
}

.gallery-button:hover{
background:white;
color:#0f172a;
}

.nav {
    font-size: 30px;
    border: none;
    background: none;
    cursor: pointer;
}

/* Footer */

.footer {
    margin-top: 200px;
    padding: 80px;
    background: #111;
    color: white;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}

.footer h3 {
    margin-bottom: 10px;
}


/* Page title */

.page-title {
    text-align: center;
    font-family: 'Satoshi-Light', Arial, sans-serif;
    font-size: 60px;
    margin-top: 120px;
}

/* Masonry gallery */

.gallery-grid {
    column-count: 3;
    column-gap: 20px;
    padding: 80px;
}

.gallery-grid img {
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
}

.gallery-grid img {
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-grid img:hover {
    transform: scale(1.03);
}

.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: none;
justify-content: center;
align-items: center;
}

.lightbox img {
max-width: 90%;
max-height: 90%;
}

.about {
max-width: 800px;
margin: 200px auto;
font-size: 20px;
line-height: 1.6;
}



.contact {
max-width: 600px;
margin: 200px auto;
font-size: 20px;
}