* {
  font-family: Sans-serif;
}

table {
  width: 90%;
  max-width: 700px;
  table-layout: fixed;
  margin: auto;
  text-align: left;
  margin-top: 50px;
  border-collapse: collapse; /* creates a single border between cells */
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
  border-radius: 10px;
  overflow: hidden; /* without this the background color fill of the header row would extend beyound the curved corners*/
  line-height: 2.5rem; /* REM is actually the only band I've ever seen live, Cardiff 1995, awesome */
}

/* give the header row a colour fill */
th {
  background-color: AliceBlue;
}

/* pad all header and cell elements, becasue it's 2023, and we all love whitespace */
th,
td {
  padding: 6px 10px;
}

/* fix the width of the 1st column, i.e. "format"  */
th:nth-child(1) {
  width: 70px;
}

/* set column 2 i.e. "resource", to no word-wrap and use ellipsis, becasue there's a special hell for people who build tables with different row heights */
td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* set the 3rd column, i.e "progress", to a fixed percentage */
th:nth-child(3) {
  width: 30%;
}

/* define the style of the outside of the progress indicator, no border, just a simple drop-shadow. I'm using custom HTML elements, by default they are spans, hence the 'display: block' setting here. And in other places below */
progress-meter {
  display: block;
  height: 10px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 1px;
  margin-right: 2rem;
  position: relative;
}

/* define the style of the inside of the progress indicator, the height matches its container, the width has to match the actual progress */
progress-percent {
  display: block;
  height: 100%;
  border-radius: 5px;
  width: calc(var(--progress) * 1%); /* the value of "--progress" is defined in the HTML. I know, it's neat right? the HTML is where the content should go after all  */
  background-color: IndianRed; /* this will NOT be used if the progress is 100%, see below  */
  font-size: 70%;
  color: grey;
}

/* set the inside of the progress indicator to green when "--progress" = 100 i.e. when it's complete */
progress-percent[style="--progress: 100"] {
  background-color: MediumAquamarine;
}


/* create a counter and reset its value to "--progress", then display this progress as a value.*/
progress-percent::after {
  counter-reset: percent var(--progress);
  content: counter(percent) '%';
  position: absolute;
  right: -2rem;
  bottom: -0.9rem;
}

progress-percent[style="--progress: 100"]::after {
  content: '✓';
  right: -1rem;
  bottom: -0.9rem;
}


/* define the shared tag styles */
:where(course-tag, tutorial-tag, book-tag):before {
  font-size: 0.8rem;
  color: white;
  border-radius: 3px;
  padding: 1px 5px;
}

/* Now set the individual tag styles. ok, maybe not all the content is going in the HTML */
course-tag:before {
  background-color: MediumVioletRed;
  content: "course";
}

tutorial-tag:before {
  background-color: SteelBlue;
  content: "tutorial";
}

book-tag:before {
  background-color: MediumPurple;
  content: "book";
}