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

body{
background-color:lightgray;
}

/* NAVBAR */

.topnav{
background-color:#333;
overflow:hidden;
}

.topnav a{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}

.topnav a:hover{
background-color:#ddd;
color:black;
}

.topnav a.active{
background-color:#04AA6D;
color:white;
}

.topnav .icon{
display:none;
}


/* HERO IMAGE */

.heroImage{
background-image:url("./images/free-nature-images.jpg");
height:600px;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
}

.heroImage .image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
}

.heroImage .heroText{
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
font-size:5rem;
}


/* GRID */

.grid-section{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:10px;
padding:10px;
}

.grid-section01{
background-color:white;
border:1px solid black;
text-align:center;
overflow:hidden;
position:relative;
}

.grid-section01 img{
width:100%;
height:250px;
object-fit:cover;
display:block;
}

/* TEXT INSIDE IMAGE */

.imgText{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
color:white;
font-size:20px;
font-weight:bold;
background:rgba(0,0,0,0.5);
padding:6px 12px;
border-radius:5px;
}


/* RESPONSIVE */

@media screen and (max-width:600px){

.topnav a:not(:first-child){
display:none;
}

.topnav a.icon{
float:right;
display:block;
}

.heroImage .heroText{
font-size:3rem;
}

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

}

@media screen and (max-width:600px){

.topnav.responsive{
position:relative;
}

.topnav.responsive .icon{
position:absolute;
right:0;
top:0;
}

.topnav.responsive a{
float:none;
display:block;
text-align:left;
}

}

@media screen and (max-width:420px){

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

}