@font-face {
    font-family: 'BostonTraffic';
    src: url('./fonts/boston_traffic.ttf');
}

@font-face {
    font-family: 'MarketDeco';
    src: url('./fonts/market_deco.ttf');
}

div {
    display: flex;
    justify-content: center;
}

body {
    font-family: 'MarketDeco';
    color: white;
    background-color: black;
}

.top-title {
    display: flex;
    justify-content: center;
}

.home-link {
    display: flex;
    justify-content: center;
}

a:link {
    color: #eb6328;
}

.list-columns {
  display: flex;
  justify-content: center;
}

/* ===========================
   Base styles (mobile first)
   Up to 1365px wide
   =========================== */

p {
  width: 90%;
}

.top-title img {
  width: 60%;
  height: auto;
}

.photos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.photos img {
  width: 80%;
  height: auto;
  padding: 10px;
}

/* ===========================
   Larger screens (≥1366px)
   =========================== */
@media screen and (min-width: 1366px) {
  p {
    width: 70%;
  }

  .top-title img {
    width: 30%;
  }

  .photos {
    flex-direction: row;
    justify-content: center;
  }

  .photos img {
    width: 40%;
  }
}

/* ===========================
   Ultra-wide monitors (≥2000px)
   =========================== */
@media screen and (min-width: 2000px) {
  p {
    width: 50%;
  }

  .top-title img {
    width: 20%;
  }

  .photos img {
    width: 30%;
  }
}