:root {
  --section-content-width: 64rem;
  --cards-row-gap: 0rem;
  --cards-column-gap: 1rem;
  --card-padding: 1rem;
  --page-main-font: myFirstFont;
  --list-padding: 0.5rem;
  --list-border: 1px solid #ddd;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--page-main-font);
  display: flex;
  flex-wrap: wrap;
}

body > header,
body > footer {
  flex: 1 1 100%;
}

body > aside {
  flex: 0 0 250px;
}

body > main {
  flex: 1;
}

.sections {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.sections > section {
  flex: 1 1 100%;
  align-self: auto;
  width: 100%;
}

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: stretch;
  row-gap: var(--cards-row-gap);
  column-gap: var(--cards-column-gap);
  margin-left: auto;
  margin-right: auto;
}

.sections.contained .cards {
  max-width: var(--section-content-width);
}

.card {
  order: 0;
  flex: 1 1 var(--section-content-width);
  position: relative;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  column-gap: var(--cards-column-gap);
  padding: var(--card-padding);
  box-sizing: border-box;
}

.card.half {
  flex-basis: calc(
    (var(--section-content-width) - var(--cards-column-gap) * 2) / 2
  );
}

.card.third {
  flex-basis: calc(
    (var(--section-content-width) - var(--cards-column-gap) * 3) / 3
  );
}

.card.fourth {
  flex-basis: calc(
    (var(--section-content-width) - var(--cards-column-gap) * 4) / 4
  );
}

.card.fifth {
  flex-basis: calc(
    (var(--section-content-width) - var(--cards-column-gap) * 5) / 5
  );
}

.card.sixth {
  flex-basis: calc(
    (var(--section-content-width) - var(--cards-column-gap) * 6) / 6
  );
}

.card > * {
  flex: 1 1 100%;
  margin-block: 0;
}

.flow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.flow > .half {
  width: 50%;
}

.flow > .third {
  width: 33.3333%;
}

.flow > .fourth {
  width: 25%;
}

.flow > .fifth {
  width: 20%;
}

.flow > .sixth {
  width: 16.6667%;
}

.flow.center {
  justify-content: center;
}

.flow.between {
  justify-content: space-between;
}

.flow.end {
  justify-content: flex-end;
}

.flow.scroll {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 100px;
}

.flow.scroll > * {
  flex: 1 0 0;
}

.card ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.card li {
  padding: var(--list-padding);
  border-bottom: var(--list-border);
  font-size: 16px;
}

.card li:last-child {
  border-bottom: none;
}

.overlay {
  position: absolute;
}

.overlay.top {
  top: 0;
}

.overlay.bottom {
  bottom: 0;
}

.overlay.middle {
  top: 50%;
  transform: translateY(-50%);
}

.overlay.left {
  left: 0;
}

.overlay.right {
  right: 0;
}

.overlay.center {
  left: 50%;
  transform: translateX(-50%);
}

/* Tabs */
.tabs,
.accordion {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.tabs {
  gap: 10px;
}

.tab {
  position: absolute;
  opacity: 0;
}

.tablabel {
  background: #e5e5e5;
  cursor: pointer;
}

.accordion > .tablabel {
  width: 100%;
}

.tablabel:active {
  background: #ccc;
}

.tabcontent {
  display: none;
  width: 100%;
}

.tabs > .tabcontent {
  order: 1;
}

input.tab:checked + .tablabel + .tabcontent {
  display: block;
}

.tabcontent > .accordion {
  padding-left: 10px;
}