@use "../../styles/typography" as type;

.root {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.title {
  position: absolute;
  z-index: 21;
  top: var(--app-content-top);
  left: max(var(--app-page-padding), calc((100% - var(--app-page-max-width)) / 2));
  margin: 0;
  padding-left:0;
  font-size: type.$font-size-xxl;
  font-weight: bolder;
  transform: translateY(-150%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-app-region: drag;
}

.fixedContent {
  width: calc(100% - var(--app-page-padding) * 2);
  max-width: var(--app-page-max-width);
  padding-top: var(--app-content-top);
  margin-right: auto;
  margin-left: auto;
}

.fixedContent,
.fixedSection {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.fixedSection {
  width: 100%;
}