@import url("https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap");

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

/* 3.2 Header + nav */
header {
  background-color: #222222;
  height: 10vh;
  padding: 0 10vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7vh;
}

h1 {
  color: white;
  font-size: 1.2em;
}

nav a {
  color: white;
  text-decoration: none;
}

nav {
  display: flex;
  gap: 10px;
}

/* 3.3 Custom font */
h2 {
  font-family: "Tangerine", cursive;
  font-style: normal;
  font-size: 5em;
  margin: 0;
  margin-bottom: 3vh;
}

/* 3.4 Main */
main {
  /* padding-left: 10vw; */
  /* padding-right: 10vw; */
  padding: 0 10vw;
}

/* 3.5 Gallery layout */
.photo-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 3.6 Card styling */
.card {
  background-color: white;
  border: 1px solid lightgray;
}

.card img {
  width: 100%;
}

.card p {
  padding: 10px;
}

/* 3.7 Footer */
footer {
  background-color: #222222;
  color: white;
  height: 3vh;
  padding: 0 10vw;
}

/* 3.8 Media queries */
@media screen and (max-width: 700px) {
  .photo-container {
    /* Alternatively, set grid-template-columns to have just one columnm */
    /* grid-template-columns: 1fr; */
    display: flex;
    flex-direction: column;
  }
}