* {
  padding: 0;
  margin: 0;
  border: none;
  font-family: alata, Roboto, Arial;
}

body,
html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;

  padding-bottom: 100px;

  --title-1: rgba(0, 0, 0, 0.781);
  --title-2: rgb(42, 189, 103);
  --background-color-1: #f2f3f5;
  --background-color-2: #e6e7e9;
  --background-color-3: white;

  --left-panel: white;
  --font-color-1: #374958;
  --font-color-2: white;

  --element-bg-nonactive: white;
  --element-bg-active: rgb(175, 241, 162);
  --hover-color-nonactive: rgb(230, 227, 227);
  --hover-color-active: rgb(33, 187, 33, 0.2);

  --hover-1: rgb(192, 190, 190);

  /* tasks */
}

.body-dark-mode {
  --title-1: white;
  --title-2: rgb(33, 187, 33);
  /* --background-color: #f2f3f5;
  --left-panel: white; */
}

.header-section {
  flex: 1.1;
  display: flex;
  border-bottom: solid 4px rgb(48, 204, 48);
}
.main-section {
  flex: 10;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: var(--cum);
}