body {
  background: #495057;
  color: white;
}

.container {
  padding-left: 0;
  padding-right: 0;
  position: relative;
margin-top: 1rem;
}

.container > ul {
  display: flex;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

.row > div > a[href="#top"],
.row > div > a[href="#"] {
  padding-left: 1rem;
  color: white;
  font-weight: bold;
}

.force-left ul {
min-width: 85vw;
position: relative;
list-style: none;
padding-left: 0;
margin-left: 0;
}

.force-left ul li {
margin-left: 0;
padding-left: 0;
}

ul > li.definitions {
  margin-top: .2rem;
  background: rgba(0,0,0,0.6);
  border-radius: 0 15px 25px 15px;
  padding: .6rem;
}

.force-left ul li button {
margin-left: 0;
background: black;
color: white;
border-radius: 2rem;
margin: 0;
padding: 3px 6px;
}

button:focus {
  outline: none;
}



.force-right {
  position: fixed;
  top: .1rem;
  right: .1rem;

}

.force-right ul {
    list-style: none;
    padding-left: 0;
}

.force-right li {
    color: white;
    background: black;
    border-radius: 100%;
    padding: 0rem .3rem;
    text-align: center;
    margin-bottom: .2rem;
}

.force-right li a {
    color: white;
    text-align: center;
}

span::before {
  content: "■";
}
span {
  padding-left: 1rem;
}

@media all and (max-width:414px) {
  * {
      font-size: .95rem;
  }
}

@media all and (min-width:768px) and (max-width: 1024px) and (orientation: portrait) {
  .container {
    margin-left: 0;
  }
  button {
    font-size: 1.2rem;
  }
  .force-right li {
    font-size: 1.4rem;
      color: white;
      background: black;
      border-radius: 100%;
      padding: 0rem .3rem;
      text-align: center;
      margin-bottom: .2rem;
  }
}

@media all and (min-width:768px) and (max-width: 1024px) and (orientation: landscape) {
  .container {
    margin-left: 0;
  }
  button {
    font-size: 1.2rem;
  }
}

@media all and (min-width: 1025px) {
  .container {
    margin-left: 0;
  }
  button {
    font-size: 1.35rem;
  }
}