* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html body {
  max-width: 100%;
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: black;
}

/* Top logo bar */
header {
  display: block;
  margin-top: 30px;
  border-bottom: 2px solid white;
  padding-bottom: 20px;
}

.logo {
  width: 200px;
  height: 70px;
}
.update-btn,
.update-btn:hover {
  background-color: gray;
  float: right;
  margin-top: 20px;
  color: white;
}

/* General Ticker */
.buttons-list {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}
.btn-stop-display,
.btn-stop-display:hover {
  background-color: purple;
  color: white;
}
.set-btn,
.set-btn:hover {
  background-color: gray;
  color: white;
}
.row-2 {
  border-bottom: 2px solid white;
  padding-bottom: 30px;
}

/* Features to display */
.features-div {
  background-color: white;
  padding-block: 10px;
  height: 200px;
  overflow-y: scroll;
}
.features-div-two {
  background-color: white;
  padding-block: 10px;
  height: 370px;
  overflow-y: scroll;
}
.display-features-list {
  list-style-type: none;
}

.fa-chevron-right,
.fa-chevron-left,
.fa-chevron-up,
.fa-chevron-down,
.fa-minus {
  background-color: gray;
  padding: 10px;
}
.icons-list {
  margin-block: 70px;
}
.icons-list a {
  color: white;
}
.icons-list i {
  cursor: pointer;
}
.display-features-list li:hover {
  background-color: blue;
  cursor: pointer;
}

.save-btn-div {
  text-align: center;
  margin-top: 60px;
}
.save-btn,
.save-btn:hover {
  background-color: gray;
  color: white;
  padding-inline: 40px;
}

.footer {
  text-align: center;
  color: white;
  margin-top: 120px;
}

li.active {
  background-color: skyblue;
}
.row-1, .row-3{
  margin-block: 50px;
}
/* Responsiveness */
@media (max-width: 767px) {

  .buttons-list{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    position: relative;
    right: 20px;
  }
  .row-1, .row-3{
    margin-block: 25px;
  }
  .screen-saver{
    margin-block: 25px;
  }
  .display-none-div{
    display: none;
  }
  .icons-list{
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .icons-list a{
    margin-left: -120px;
  }

  .remove{
    margin-right: -100px;
    margin-left: -100px;
  }




}

@media (min-width: 768px) and (max-width: 991px) {

  .icons-list a{
   position: relative;
    top: 10px;
  }

}