/* FONT SETUP */
@font-face {
  font-family: 'Product Sans';
  src: url('Product Sans Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Product Sans';
  src: url('Product Sans Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Product Sans';
  src: url('Product Sans Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Product Sans';
  src: url('Product Sans Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* RESET */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: "Product Sans", sans-serif;
}

/* =========================== */
/*        NEW NAV BAR         */
/* =========================== */

nav {
  background: linear-gradient(to bottom right, #1de6b7, #267bfc);
  height: 100px;
  color: white;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 25px;
  box-sizing: border-box;
}

/* Left side (logo + name) */
nav .logo {
  display: flex;
  align-items: center;
  font-size: 45px;
  font-family:"Product Sans",sans-serif;
  /* todo: make it an H1 abd use proper headers */
}

nav .logo img {
  filter: grayscale(100%) brightness(5);
  margin-right: 15px;
}

/* Right side (links) */
nav .navlinks {
  display: flex;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
}

nav .navlinks span,
nav .navlinks a {
  color: white;
  text-decoration: none;
  margin: 0 12px;
  cursor: pointer;
}

/* =========================== */
/*        CONTENT AREA        */
/* =========================== */

#content {
  padding: 20px;
}

/* SUMMARY CARD */
.card,
.summary { /* support both names */
  background: #f0f2f5;
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 26px;
}

.text-content {
  flex-grow: 1;
}

.summary-image {
  max-width: 450px;
  height: auto;
}

/* DEV BOX */
.devbox {
  background: #f0f2f5;
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* just gonna reuse this styling for other boxes */
.abox {
  background: #f0f2f5;
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.redbox {
  background: #facbca;
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.yellowbox {
  background: #faf1de;
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* DEV CARD (unified) */
.dev {
  background: #dce0e6;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.dev img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* VLC 2.9 Foundation footer */
.vlc29podcast-footer {
  background: #dce0e6;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.vlc29podcast-footer img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}