frontend/src/assets/styles/base/_global.scss
@use '../base/breakpoints' as breakpoints;
@use '../base/functions' as functions;

html {
  height: 100%;
  width: 100%;
  font-family: var(--font-body), sans-serif;
  font-weight: 700;

  &[data-mui-color-scheme='light'] {
    --logo-svg-text-vote-color: #3e3e3e;
    --vote-progress-color: rgba(var(--mui-palette-body-mainChannel) / 0.08);
  }

  &[data-mui-color-scheme='dark'] {
    --logo-svg-text-vote-color: #c1c1c1;
    --vote-progress-color: rgba(var(--mui-palette-white-mainChannel) / 0.08);
  }

  font-size: 16px;

  @media (max-width: breakpoints.$width-mobile-xs) {
    font-size: 16px !important;
  }

  @media (max-width: breakpoints.$width-mobile-2xs) {
    font-size: 15px !important;
  }

  @media (max-width: breakpoints.$width-mobile-3xs) {
    font-size: 14px !important;
  }

  @media (max-height: breakpoints.$height-small) {
    font-size: 14px;
  }

  @media (min-height: breakpoints.$height-xl) {
    font-size: 18px;
  }

  @media (min-height: breakpoints.$height-2xl) {
    font-size: 20px;
  }

  @media (min-height: breakpoints.$height-3xl) {
    font-size: 22px;
  }
}

body {
  color: var(--mui-palette-primary-main);
  background: var(--mui-palette-background-main);
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-size: functions.calculate-rem(14);
}

#root {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden auto;

  & > * {
    margin: 0 auto;
    max-width: 30rem;
  }
}

ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

p {
  &:not(:first-child) {
    margin-top: 0.5rem;
  }
}

a {
  color: var(--mui-palette-lightPurple-main);

  &:visited {
    color: var(--mui-palette-lightPurple-main);
  }
}

.title {
  font-family: var(--font-title), sans-serif;
  font-style: italic;
  font-weight: 600;
}

.hide {
  display: none !important;
}
