#fontWrapper {
    /* width: 22rem; */
    margin-right: 1rem;
}

#fontWrapper p {
    margin: 0 .5rem 0 0;
    float: left;
    clear: both;
    font-size: 1.4rem;
}

#fontWrapper ul {
    list-style-type: none;
    float: left;
    padding: 0;
    margin: 0
}

#fontWrapper li {
    float: left;
    margin: 0 .3rem 0 0;
    font-size: 1.4rem;
}

#fontWrapper li a {
    display: block;
    width: 2.4rem;
    height: 1.5rem;
    border: none;
    outline: none;
}

#fontWrapper li a.fontDefault:focus, #fontWrapper li a.fontBigger:focus, #fontWrapper li a.fontBig:focus {
    border: 1px solid #000;
}

#contrastWrapper {
    /* width: 22rem; */
}

#contrastWrapper p {
    margin: 0;
    float: left;
    clear: both;
    font-size: 1.4rem;
}

#contrastWrapper ul {
    list-style-type: none;
    float: left;
    padding: 0;
    margin: 0 0 0 .5rem;
}

#contrastWrapper li {
    float: left;
    margin: 0 .3rem 0 0;
    font-size: 1.4rem;
}

#fontWrapper, #contrastWrapper {
  display: flex;
  align-items: flex-end;
}

#fontWrapper ul, #contrastWrapper ul {
  display: inherit;
  align-items: inherit;
}

.fontChanger, .contrChanger {
  cursor: pointer;
}

.fontDefault {
  font-size: 1em;
}

.fontBigger {
  font-size: 1.1em;
}

.fontBig {
  font-size: 1.2em;
}

.contrChanger {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  padding: .2rem;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.contr_1 {
  border: 2px solid black;
  background-color: white;
}

.contr_4 {
  border: 2px solid black;
  background-color: black;
  color: #fafa00;
}