* {
  box-sizing: border-box;
}

*::selection {
  background: rgba(45, 170, 219, 0.3);
}

strong {
  font-weight: 600;
}

p {
  margin: 0;
}

button {
  all: unset;
}

html {
  height: auto;
  font-weight: var(--text-weight);
  scrollbar-color: var(--scrollbar-thumb-color)
    var(--scrollbar-background-color);
}

html ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border: 3px solid transparent;
  border-radius: 50px;
  background-clip: padding-box;
}

html ::-webkit-scrollbar {
  width: 15px;
  background: var(--scrollbar-background-color);
  border-left: 1px solid var(--scrollbar-border-color);
  border-right: 1px solid var(--scrollbar-border-color);
}

html ::-webkit-scrollbar:horizontal {
  border-top: 1px solid var(--scrollbar-border-color);
  border-bottom: 1px solid var(--scrollbar-border-color);
  border-left: none;
  border-right: none;
}

body {
  height: 100%;
  color: var(--color-text-default);
  background: var(--color-bg-default);
  fill: currentColor;
  margin: 0;
  font-family: var(--secondary-font);
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.super-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.super-content-wrappe