@font-face {
  font-family: "Arial";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/projects/arl.woff2") format("woff2");
}
@font-face {
  font-family: "Arial";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("/projects/arlbld.woff2") format("woff2");
}

body {
  background-color: black;
  font-family: "Arial";
  /*
    Scales font size to 1% of the viewport width 
    Clamps min/max value to 80%/120% of the base font size
  */
  font-size: clamp(0.8rem, 1vw, 1.2rem);
}

p {
  width: fit-content;
  margin: 1px;
  color: white;
}

.page-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 4rem 0;
}

.projects-container {
  width: 80%;
  height: 80%;
  display: grid;
  justify-items: center;
  gap: 3rem;

  /* 
    Changes the grid layout between 1 or 2 columns
    Depending on the viewport size. 
    Small screens (<700px) get 1 column. 
    Large screens (>700px) get a 2 column layout.
  */
  @media (min-width: 300px) {
    /* One column layout */
    grid-template-columns: 1fr;
  }

  @media (min-width: 700px) {
    /* 
        Two cloumn layout
        "1fr 1fr" means each column gets 1 FRaction of the grid 
        In other words, each gets an equal amount (50% split).
        Other amounts like "3fr 1fr" would give 75% to col1 and 25% to col2
    */
    grid-template-columns: 1fr 1fr;
  }
}

.project-container {
  /* 
    Container scales to 50% of the allotted grid spot 
    Based on the parent grid's width
    Min/max size of 250px/400px.   
  */
  width: clamp(250px, 50%, 400px);
  display: flex;
  flex-direction: column;
  /* 
    Defines this as a container for use in children
    This allows us to perform scaling tricks
    Relative to the size of the container itself
    Used on this page to consistently scale font sizes within the container
  */
  container-type: inline-size;
}

.project-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.link {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  top: 0;
  z-index: 100;
}

.project-title {
  width: fit-content;
  /* 
    "cqw" === "container query width"
    AKA 7% of the container's width
    Defining the font in terms of container size means a consistent value
    This keeps the font size reliable no matter the scale
  */
  font-size: 7cqw;
}
.project-date {
  align-self: flex-end;
  font-size: 7cqw;
  margin-bottom: 1rem;
}

.project-credits {
  width: fit-content;
  display: grid;
  gap: 2rem;
  align-self: center;
  margin-bottom: 2rem;
  font-size: 6cqw;

  /* 
    Change credit layout depending on screen size
    Between 1 or 2 columns.
  */
  @media (min-width: 300px) {
    grid-template-columns: 1fr;
  }

  @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
    font-size: 5cqw;
  }
}

.project-credit {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 2px;
}

.credit-name {
  align-self: center;
  font-weight: bold;
}

.credit-role {
  align-self: center;
}

.project-client {
  align-self: center;
  font-weight: bold;
  font-size: 5.5cqw;
}