@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap");

:root {
  --text-color-white: #ffffff;
  --bg-color: #18181b;

  /* btn colors */
  --btn-border-default: #3778c2;
  --btn-border-active: #0b9c0b;

  /* bar colors */
  --bar-color: #bbb;
}

* {
  padding: 0px;
  margin: 0px;
}

body {
  font-family: "Ubuntu", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color-white);
}

a {
  text-decoration: none;
  color: var(--text-color-white);
}

.main {
  margin: 2%;
  /* background-color: #0b9c0b; */
}

h1 {
  margin: 0 auto 2% 3%;
  /* background-color: #bbb; */
}

.content {
  text-align: center;
  /* background-color: yellow; */
}

.container {
  display: inline;
}

.sliders {
  padding: 8px;
  /* background-color: red; */
  margin: 0 2% 0 0;
}

.slider {
  margin-left: 2%;
}

.btn {
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  color: var(--text-color-white);

  padding: 8px;
  border: 1px solid var(--btn-border-default);
  border-radius: 6px;

  background-color: var(--bg-color);
}

.btn-sort {
  margin: 0% 0% 0% 1%;
}

/* pseudo classes */

.btn:hover {
  cursor: pointer;
  border-color: var(--btn-border-active);
}

.btn-clicked {
  border-color: var(--btn-border-active);
  opacity: 1;
}

.btn-disabled {
  background-color: var(--bg-color);
  color: var(--text-color-white);
  opacity: 0.4;
}

/* BARS */

.bar-container {
  height: 460px;
  width: 80%;

  text-align: center;
  padding: 1%;
  margin: 10px auto 10px auto;
  /* background-color: red; */

  /* to push the bars to end of div */
  display: flex;
  justify-content: center;
}

.bar {
  /* to push the bars to end of div */
  align-self: flex-end;

  background: var(--bar-color);
  display: inline-block;
  border-radius: 2px 2px 1px 1px;
  margin: 0 1px 0 1px;
}

.footer {
  text-align: center;
  margin: 1%;
  padding: 1%;
  /* background-color: #0b9c0b; */
  margin-top: 80px;
}

a:hover {
  text-decoration: underline;
}