body {
margin: 0;
padding: 0;
background: #0d0d0d;
color: #fff;
font-family: "Segoe UI", Roboto, sans-serif;
}


main {
background: #0d0d0d;
padding-bottom: 40px;
color: #fff;
}


header {
text-align: center;
padding: 40px 20px 10px 8px;
background: #0d0d0d;
border-bottom: 1px solid #fff;
}


header h1 {
margin: 0 0 15px;
font-size: 2.0rem;
letter-spacing: 3px;
color: #f2f2f2;
}


nav ul {
list-style: none;
padding: 0;
margin: 0;
}


nav ul li {
display: inline-block;
margin: 0 12px;
}


nav a {
color: #bdbdbd;
text-decoration: none;
font-size: 1.5rem;
padding: 6px 10px;
transition: 0.2s;
}


nav a:hover {
color: #888;
}


.intro {
color: #ffffff;
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}


.grid {
display: grid;
gap: 15px;
grid-template-rows: auto;
grid-template-columns: 1fr 3fr;
padding: 20px;
}


.grid img {
width: 100%;
border-radius: 6px;
transition: 0.3s;
}


.grid img:hover {
opacity: 0.5;
}


footer {
text-align: center;
color: #777;
padding: 30px 0;
background: ##0d0d0d;
margin-top: 40px;
border-top: 1px solid #000;
}