*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Century Gothic", Arial, sans-serif;
background:#2b2b2b;
color:white;
min-height:100vh;

display:flex;
flex-direction:column;
}

/* MAIN */

main{
flex:1;

display:flex;
justify-content:center;

padding:2rem 1.8rem 3rem;
}

/* CONTAINER */

.container{
width:100%;
max-width:1400px;
}

/* HOME ICON */

/* TOP BAR */

.topBar{
position:sticky;
top:0;

z-index:100;

background:rgba(43,43,43,0.88);

backdrop-filter:blur(10px);

padding:1.4rem 0;

transition:0.35s ease;
}

/* INNER */

.topBarInner{
width:100%;
max-width:1400px;

margin:0 auto;

display:flex;
align-items:center;
}

/* HOME */

.home-link{
display:inline-flex;
align-items:center;
}

.home-link img{
width:28px;

opacity:0.8;
transition:0.3s;
cursor:pointer;
}

.home-link img:hover{
opacity:1;
}

/* GALLERY */

.gallery{
display:grid;

grid-template-columns:repeat(3, 1fr);

gap:0.3rem;
}

button:focus{
outline:none;
}

/* THUMB */

.thumb{
display:block;
overflow:hidden;
background:#1f1f1f;
}

.thumb img{
width:100%;
aspect-ratio:1/1;

object-fit:cover;
display:block;

transition:transform 0.5s ease, opacity 0.5s ease;
}

/* HOVER */

.thumb:hover img{
transform:scale(1.015);
opacity:0.94;
}

/* FOOTER */

footer{
padding:1.5rem 0 2.5rem;
display:flex;
justify-content:center;
}

.social{
display:flex;
gap:1.7rem;
}

.social img{
width:24px;
cursor:pointer;
}

/* */
@media(max-width:1400px){

.topBarInner{
padding:0 1.8rem;
}

}


/* TABLET / SMALL NOTEBOOK */

@media(max-width:900px){

.gallery{
grid-template-columns:repeat(2, 1fr);
}

}

/* MOBILE */

@media(max-width:600px){

main{
padding:4rem 1rem 2rem;
}

.gallery{
grid-template-columns:1fr;
}

.social{
gap:1.2rem;
}

.social img{
width:22px;
}

.home-link img{
width:24px;
}

.topBarInner{
padding:0 1.8rem;
}

}