@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Michroma&display=swap');

:root {
  --bgc-app: #101010;
  --sidebar-w: 320px;
  --sidebar-w-md: 260px;
  --dock-h: 64px;
  --text: #e8e8e8;
  --muted: #b8bbc4;
  --side: rgba(255, 255, 255, .12);
  --accent: #6c63ff;
  --accent-2: #7a73ff;
  --radius: 12px;
}

::selection {
  background: rgba(99, 102, 241, 0.18);
  color: var(--text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bgc-app);
  font-family: "Exo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.layout {
  min-height: 100svh;
  padding-left: var(--sidebar-w);
}

.page-content {
  min-height: 100svh;
  overflow-x: hidden;
}

.page-content > :first-child {
  margin-top: 0;
}
.page-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1279px) and (min-width: 769px) {
  .layout {
    padding-left: var(--sidebar-w-md);
  }
}

@media (max-width: 768px) {
  .layout {
    padding-left: 0;
  }
  
  .page-content {
    padding-bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom, 0));
  }
}