:root {
  --page-wrapper-pt: 120px;
  --page-wrapper-pb: 120px;
  --page-wrapper-py: var(--page-wrapper-pt) 0 var(--page-wrapper-pb);
}

html, body {
  background: var(--bg-color);
  scroll-behavior: smooth;
  overflow-x: clip;
}

table td {
  padding: 0.25rem;
  border: 1px solid var(--color-on-background);
}

main {
  margin: var(--page-wrapper-py) 0;
}

.content {
  position: relative;
  width: 100%;
}
.content-hidden {
  transition: var(--transition-default) all;
}
.content-hidden.hide {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
  max-height: 0;
}
.content-center {
  display: flex;
  flex-direction: column;
  place-content: center;
}
.content-bottom {
  display: flex;
  flex-direction: column;
  place-content: flex-end;
  height: 100%;
}

.hidden {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  opacity: 0;
  transition: var(--transition-default) all;
}

.sticky {
  position: sticky;
  top: 0;
}
.sticky--bottom {
  top: unset;
  bottom: 0;
}