style.css

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

body {
  margin: 0 auto;
  max-width: 1280px;
  background: linear-gradient(
    216deg,
    rgba(51, 55, 69, 1) 0%,
    rgba(34, 42, 70, 1) 100%
  );
  color: #fcfafa;
  font-family: "Roboto Mono";
}

hr {
  width: 100%;
  opacity: 0.5;
  margin-right: 50%;
}

/* Style for clickable h3 headings */
h3 a {
  text-decoration: none;
  color: #ff9419;
}

h3 a:hover {
  color: blue;
}

h3 a:visited {
  color: #34c9fa;
}

#heading {
  width: min-content;
}

#heading:hover {
  font-style: italic;
  color: rgb(187, 175, 175);
}

#whatHappened {
  display: flex;
  gap: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
  width: 400px;
  min-height: 400px;
  border-radius: 6px;
  background-color: #0eb1d2;
  box-sizing: border-box;
  padding: 32px;
  filter: contrast(90%);

  box-shadow:
    rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px,
    rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px,
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
}

.card:hover {
  transform: scale(1.05);
}

.card.big p {
  font-size: x-small;
}

.card h3 {
  margin-top: 0;
}

.card p {
  font-size: smaller;
}

.card:nth-child(2) {
  background-color: hsl(130, 70%, 40%);
  /* Darker color */
}

.card:nth-child(3) {
  background-color: hsl(16, 70%, 40%);
  /* Darker color */
}

.card:nth-child(4) {
  background-color: hsl(50, 88%, 33%);
  /* Darker color */
}

.card:nth-child(5) {
  background-color: hsl(300, 100%, 40%);
  /* Darker color */
}

.card:nth-child(6) {
  background-color: hsl(180, 88%, 32%);
  /* Darker color */
}

.card:nth-child(7) {
  background-color: hsl(90, 92%, 29%);
  /* Darker color */
}

.card:nth-child(8) {
  background-color: hsl(20, 94%, 41%);
  /* Darker color */
}

.card:nth-child(9) {
  background-color: hsl(150, 88%, 33%);
  /* Darker color */
}

.card:nth-child(10) {
  background-color: hsl(273, 65%, 40%);
  /* Darker color */
}

.card:nth-child(11) {
  background-color: hsl(9, 65%, 45%);
  /* Darker color */
}

.card:nth-child(12) {
  background-color: hsl(210, 50%, 40%);
  /* Darker color */
}

.card:nth-child(13) {
  background-color: hsl(328, 80%, 40%);
  /* Darker color */
}

.card:nth-child(14) {
  background-color: hsl(195, 100%, 40%);
  /* Darker color */
}

.card:nth-child(15) {
  background-color: hsl(120, 60%, 40%);
  /* Darker color */
}

.comparison {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  box-sizing: border-box;
}

.vendor {
  font-weight: bold;
}

i {
  font-size: x-small;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Style the table header */
th {
  background-color: #0eb1d2;
  /* Background color for header */
  color: #333;
  /* Text color for header */
  font-weight: bold;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #0c90aa;
  /* Bottom border for header row */
  border-right: 1px solid #0c90aa;
}

/* Style the table rows */
td {
  background-color: #ddd;
  color: black;
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #0c90aa;
  /* Bottom border for all rows */
  border-right: 1px solid #0c90aa;
}

@media only screen and (max-width: 1280px) {
  body {
    margin: 30px;
  }
}

@media only screen and (max-width: 1280px) {
  .card {
    width: 48%;
  }

  table {
    max-width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .card {
    width: 46%;
  }
}

@media screen and (max-width: 600px) {
  .card {
    width: 100%;
  }
}
.img {
  max-width: 70%;
  max-height: 70%;
}
a {
  color: #34c9fa;
  text-decoration-style: dashed;
  text-underline-offset: 5px;
  text-decoration-color: rgb(117 209 239 / 50%);
  transition: 120ms ease-out;
  width: fit-content;
  position: relative;
  top: 0;
  /* filter: drop-shadow(0 2px 2px var(--text-shadow)); */
}

a:hover {
  color: #a7e1f3;
  top: -2px;
  filter: drop-shadow(0 4px 2px rgb(117 209 239 / 50%));
  text-decoration-color: #a7e1f3;
}

quote {
  display: block;
  margin-bottom: 24px;
}

quote span {
  font-style: italic;
  color: gray;
}