body {
  padding: var(--pine-dimension-300);
  font-family: var(--pine-font-family-inter);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pine-font-family-greet);
  color: var(--pine-color-mercury-500);
  text-align: center;
  margin: var(--pine-dimension-0);
}

h1 {
  margin-top: var(--pine-dimension-500);
  font-size: var(--pine-font-size-285);
  font-weight: var(--pine-font-weight-semi-bold);
  margin-bottom: var(--pine-dimension-500);
  background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);
  background-clip: text;
  color: transparent;
}

.changelog-intro {
  text-align: center;
  text-wrap: balance;
}

h3 {
  font-size: var(--pine-font-size-157);
  font-weight: var(--pine-font-weight-regular);
}

.changelog-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    'latest latest latest'
    'recent1 recent2 recent3'
    'recent4 recent5 recent6'
    'recent7 recent8 recent9';
  gap: var(--pine-dimension-300);
}

@media (width <= 930px) {
  .changelog-container {
    display: initial;
  }

  .changelog-entry + .changelog-entry {
    margin-top: var(--pine-dimension-300);
  }
}

.changelog-entry--0 { grid-area: latest; }
.changelog-entry--1 { grid-area: recent1; }
.changelog-entry--2 { grid-area: recent2; }
.changelog-entry--3 { grid-area: recent3; }
.changelog-entry--4 { grid-area: recent4; }
.changelog-entry--5 { grid-area: recent5; }
.changelog-entry--6 { grid-area: recent6; }
.changelog-entry--7 { grid-area: recent7; }
.changelog-entry--8 { grid-area: recent8; }
.changelog-entry--9 { grid-area: recent9; }

.changelog-entry {
  border: 3px solid var(--pine-color-mercury-500);
  border-radius: var(--pine-dimension-150);
  box-shadow: var(--pine-box-shadow-300);
  color: var(--pine-color-black);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.changelog-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--pine-box-shadow-400);
}

.changelog-entry:not(.changelog-entry--0) {
  border: 1px solid var(--pine-color-purple-500);
}

.changelog-entry:not(.changelog-entry--0)::after {
  content: 'View';
  position: absolute;
  bottom: var(--pine-dimension-400);
  right: var(--pine-dimension-400);
  font-weight: var(--pine-font-weight-light);
  font-size: var(--pine-font-size-116);
  pointer-events: none;
}

.changelog-entry--0::after {
  content: 'View Changes';
  position: absolute;
  bottom: var(--pine-dimension-400);
  right: var(--pine-dimension-400);
  font-weight: var(--pine-font-weight-light);
  font-size: var(--pine-font-size-128);
  pointer-events: none;
}

@media (width <= 400px) {
  .changelog-entry--0::after {
    content: 'View';
  }
}

.changelog-entry__link {
  text-decoration: none;
  display: grid;
  padding: var(--pine-dimension-400);
  color: var(--pine-color-black);
}

.changelog-entry p {
  margin: var(--pine-dimension-0);
}

.changelog-entry__version {
  order: 1;
  font-family: var(--pine-font-family-greet);
  font-size: var(--pine-font-size-285);
  font-weight: var(--pine-font-weight-extra-bold);
}

.changelog-entry--0 .changelog-entry__version {
  background-image: linear-gradient(to right, var(--pine-color-mercury-500), #6b62f2);
  background-clip: text;
  color: transparent;
}

.changelog-entry__date {
  order: 2;
  font-size: var(--pine-font-size-157);
  font-weight: var(--pine-font-weight-light);
  color: var(--pine-color-black);
}

.changelog-entry:not(.changelog-entry--0) .changelog-entry__version {
  font-size: var(--pine-font-size-142);
}

.changelog-entry:not(.changelog-entry--0) .changelog-entry__date {
  font-size: var(--pine-font-size-116);
  line-height: var(--pine-line-height-125);
}

/* Footer Styles */
footer {
  margin-top: var(--pine-dimension-500);
  padding: var(--pine-dimension-400);
  text-align: right;
  border-top: 1px solid var(--pine-color-mercury-100);
}

footer a {
  color: var(--pine-color-purple-500);
  text-decoration: none;
}

footer a + a {
  margin-left: var(--pine-dimension-400);
}

footer a:hover {
  text-decoration: underline;
}

@media (width <= 500px) {
  body {
    padding: var(--pine-dimension-150);
  }

  footer {
    padding: var(--pine-dimension-0);
  }

  h1 {
    margin-bottom: var(--pine-dimension-250);
  }
}