

.base{
  height: 100vh;
  display: flex;
  flex-flow: column;
}
.base-font {
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-white);
  font-family: var(--font-verdana);
}
.responsive {
  position: relative;
}
.responsive * {
  position: relative;
}
.content{
  height: fit-content;
  flex: 1 0 fit-content;
  display: flex;
  flex-flow: column;
  overflow-x: clip;
}
.content-fit{
  height: fit-content;
  flex: 0 0 fit-content;
}
.content-flex{
  height: fit-content;
  flex: 1 0 fit-content; /* {can-grow, cannot shrink, base size} */
}
.hidden-link:link { text-decoration: none; }
.hidden-link:visited { text-decoration: none; }
.hidden-link:hover { text-decoration: none; }
.hidden-link:active { text-decoration: none; }

.display-inline-block {
  display: inline-block;
}

.display-hidden {
  display: hidden;
}

.masked-icon {
  display:inline-block;
  background: var(--color-cadetblue-200);
  -webkit-mask:var(--u);
          mask:var(--u);
}

.masked-icon > img {
  width:100%;
  height:100%;
  opacity: 0;
  object-fit: cover;
  display:block;
}