body {
   background-image: url(images/bg.png);
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
}
.wrapper {
   max-width: 1200px;
   margin: auto;
   padding: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
header {
   display: flex;
   flex-wrap: wrap;
}
header {
   justify-content: space-between;
   align-items: center;
   background-color: #351b2d;
}
header img {
   max-width: 200px;
}
nav ul {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   list-style-type: none;
}

nav ul li a {
   color: white;
   text-decoration: none;
   font-size: 1.2em;
   transition: 0.3s;
   background-color: rebeccapurple;
   margin: 0.25rem;
   padding: 5px;
   border-radius: 5px;
}
nav ul li a:hover {
   color: gray;
   background-color: indigo;
}
main {
   background-color: rgba(0, 0, 0, 0.9);
   color: white;
   padding: 1rem;
}
h2 {
   text-align: center;
   font-size: 2em;
   margin: 1rem;
}
.gallery {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   justify-items: center;
}
.gallery img {
   max-width: 90%;
   margin: 5px;
   border: white 2px solid;
   border-radius: 1rem;
}
footer {
   background-color: #351b2d;
   text-align: center;
   color: white;
   padding: 10px;
}

@media (max-width: 480px) {
   .wrapper {
      width: 100%;
      padding: 0;
      font-size: 150%;
      text-align: center;
   }
   header {
      flex-direction: column;
   }
   header img {
      max-width: 75%;
   }
   nav ul {
      flex-direction: column;
      align-items: center;
      margin: 0.75rem 0;
   }
   nav ul li {
      margin: 0.75rem 0;
   }
   .gallery {
      grid-template-columns: 1fr;
   }
}