:root {
  --headerbackground: #274f36;
  --white: #ffffff;
  --inter-font: "Inter", "sans-serif";
  --sliderbackground: #f5cd6d;
  --slider: #009290;
  --background: #f5f5f5;
}

.topsettings-container {
  background-color: var(--headerbackground);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin: -1em;
}

.x-button {
  left: 2em;
  width: 30px;
  height: 30px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagn-line {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: var(--white);
  border-radius: 20px;
  transform-origin: center;
}

.diagn-line:first-child {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.diagn-line:last-child {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.settings-h1 {
  color: var(--white);
  font: var(--inter-font);
}

.main-container {
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-h2 {
  margin-top: 3em;
}

.fa-music,
.fa-volume-high {
  margin: 0.5em;
  font-size: 20px;
}

.volume-bar {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.volume-bar2 {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.volume-slider {
  height: 10px;
  background-color: var(--sliderbackground);
  position: relative;
  width: 70%;
}

.volume-slider2 {
  height: 10px;
  background-color: var(--sliderbackground);
  position: relative;
  width: 70%;
}

.volume-fill {
  background-color: var(--slider);
  height: 100%;
  width: 50%;
}

.volume-fill2 {
  background-color: var(--slider);
  height: 100%;
  width: 50%;
}

.volume-btn {
  font-size: 50px;
  background-color: white;
  border: none;
  cursor: pointer;
  color: black;
}

/*Does work*/

/* media query tablet */
@media only screen and (max-device-width: 1024px) {
  .volume-bar {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .volume-bar2 {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .settings-h2 {
    font-size: 20px;
  }
}
/*----------------------------------------------------------*/
/*Does work without resizing*/

/* media query normal phone */
@media only screen and (max-device-width: 767px) {
  .settings-h1 {
    color: var(--white);
    font: var(--inter-font);
  }

  .volume-bar {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .volume-bar2 {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .settings-h2 {
    margin-top: 3em;
  }
}

/*-----------------------------------------------------------*/

/*Does work without resizing*/

/* media query small phone */
@media only screen and (max-device-width: 376px) {
  .settings-h1 {
    color: var(--white);
    font: var(--inter-font);
  }

  .volume-bar {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .volume-bar2 {
    display: flex;
    align-items: center;
    width: 100%;
  }
}