App.css

:root {
  --accent-purple: rgb(125, 115, 231);
  --darker-purple: rgb(95, 85, 205);
  --select-yellow: #ffc52f;
  --background-dark-blue: #15171b;
  --background-dark-gray: #212326;
  --background-light-gray: #2f3136;
  --top-nav-height: 64px;
  --sidebar-width: 300px;
  --divider-gray: rgba(255, 255, 255, 0.12);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  font: "Roboto";
}
input[type="text"] {
  user-select: text;
}
html {
  touch-action: manipulation;
  overflow: hidden;
}
* {
  font-size: 1rem;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
  background: var(--select-yellow);
  width: 8px;
  height: 8px;
  border-radius: 4px;
}
h1 {
  font-size: 2.2rem;
}
h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.3rem;
}
.App {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  position: fixed;
}

.Page {
  background: var(--background-dark-blue);
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.Panel {
  position: absolute;
  background: var(--background-dark-blue);
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  height: calc(100vh);
}