/* Base Variables and Root Styles */
:root {
  --base-font-size: 18px;
  --main-bg-light: #fff;
  --main-bg-dark: #111;
  --decor-size: 48px;
}

@media (max-width: 1100px) {
  :root {
    --base-font-size: 16px;
  }
}

@media (max-width: 780px) {
  :root {
    --base-font-size: 15px;
    --decor-size: 32px;
  }
}

@media (max-width: 380px) {
  :root {
    --decor-size: 24px;
  }
}

html,
body {
  font-size: var(--base-font-size);
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  overflow: hidden;
}

.theme-light,
.theme-dark {
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-bg {
  background: var(--main-bg-light);
}

body.theme-dark {
  background: var(--main-bg-dark) !important;
}